购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.8 Element的文字链接

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属性,可以使文字链接处于禁用状态。代码如下: XWhAh3Jet9rjHmxwxYM9PGQNBuPSFEwoDSuaBr7yWmjPHddv0flUckOuPoSep1a2

点击中间区域
呼出菜单
上一章
目录
下一章
×