ElementUI文字链接组件的使用 [ElementUI]

Element_文字链接组件的使用

Element中的文字链接就相当于html中的a标签(超连接)

文字链接组件的创建： 通过el-link标签创建文字链接组件

文字链接组件中的属性：

1. type ： 类型

   • 可选值： primary / success / warning / danger / info
     • 文字链接的type属性的可选值和按钮组件的type属性的可选值是一样的， 其实elementui中也就只有这五种类型（重要， 成功， 警告 ， 危险， 信息），这五种类型分别对应着不同的颜色

2. underline ： 是否有下划线

   • 布尔值 : 默认为true， 也就是默认是有下划线的， 和HTML中超链接是默认是一样的

     • 注意：对于默认值为true的属性， 我们要设置为false时必须要指明属性值为false， 如果仅仅是声明一个属性，则还是表示为true， 但是对于默认值为false的属性， 我们要设置为true时只需要声明属性即可， 我们不需要知名属性值为true

3. disabled ： 是否是警用状态

   • 布尔值 ： 默认为false， 也就是默认时不禁用状态

4. href ： 原生的href属性

   • 就是原生的a标签中的href属性， 用来指明要访问的位置

5. icon ： 图标类名

   • 可以给超链接的前面设置图标

6. target ： 原生的target属性

   • 就是设置跳转方式
     • _self表示的就是从当前页面中打开
     • _blank表示的就是在空白页面打开
     • _parent表示的就是在父级页面打开

如果一个属性值为整数类型, 那么我们可以通过在属性前面使用v-bind(也就是: )就可以将属性值改为字符串类型了

• 比如: el-col组件中的span属性值就是整数类型的, 所以按理我们输入属性值的时候只能是输入整数, 比如: span = 2, 但是只要我们在span属性前面加上:之后, 后面的属性值就可以输入字符串了

  • 因为vue中指令的属性值就是字符串