Element为文字链接提供了不同的样式与用法,本节将从基础用法、下画线、图标、禁用状态等方面介绍文字链接的样式与用法。本节首先结合地图展示文字链接的样式,如图 2-23所示;然后对文字链接的样式与用法进行讲解。
图2-23 文字链接的样式
单击“基础用法”中的“默认链接”,会跳转到Vue官网首页,如图2-24所示。
图2-24 Vue官网的首页
创建Vue实例,由于本示例比较简单,因此data和methods都为空。
(1)基础用法。Element通过对el-link标签的封装提供了文字链接,href属性用来标注文字链接的网址;可通过将type属性设置为primary、success、warning、danger和info来定义不同的颜色。代码如下:
(2)下画线。underline属性的值默认是true,表示具有下画线。若将underline属性的值设置为false,则下画线会消失。代码如下:
(3)图标。既可以在el-link标签中添加并设置icon属性的值来使用图标,此时图标在文字前面;也可以在el-link标签中添加i标签来使用图标,此时图标在文字后面。代码如下:
(4)禁用状态。在el-link标签中添加disabled属性,可以使文字链接处于禁用状态。代码如下: