element-ui link 组件源码分享

link 组件的 api 涉及的内容不是很多,源码部分的内容也相对较简单,下面从以下这三个方面来讲解:

一、组件结构

1.1 组件结构如下图:

element-ui link 组件源码分享_第1张图片

二、组件属性

2.1 组件主要有 type、underline、disabled、href、icon 这些属性,接下来我们对其属性进行一一揭秘。

2.1.1 type 属性,string 类型,可选值有 primary / success / warning / danger / info,默认 default

element-ui link 组件源码分享_第2张图片

element-ui link 组件源码分享_第3张图片

element-ui link 组件源码分享_第4张图片

element-ui link 组件源码分享_第5张图片

2.1.2 underline 属性,是否下划线,boolean 类型,默认 false,这个是鼠标放上的时候文字是否有下划线,如下图:

element-ui link 组件源码分享_第6张图片

element-ui link 组件源码分享_第7张图片

element-ui link 组件源码分享_第8张图片

element-ui link 组件源码分享_第9张图片

element-ui link 组件源码分享_第10张图片

2.1.3 disabled 属性,是否禁用状态,boolean 类型,默认 false

element-ui link 组件源码分享_第11张图片

element-ui link 组件源码分享_第12张图片

element-ui link 组件源码分享_第13张图片

element-ui link 组件源码分享_第14张图片

2.1.4 href 属性,string 类型,原生 href 属性,无默认值,如下图:

element-ui link 组件源码分享_第15张图片

element-ui link 组件源码分享_第16张图片

element-ui link 组件源码分享_第17张图片

2.1.5 icon 属性,图标类名,string 类型,无默认值,如下图:

element-ui link 组件源码分享_第18张图片

element-ui link 组件源码分享_第19张图片

代码如下:

element-ui link 组件源码分享_第20张图片

三、组件方法

3.1.1 组件内保留事件,如下图:

element-ui link 组件源码分享_第21张图片

你可能感兴趣的:(javascript,前端,开发语言)