mirror of https://github.com/ElemeFE/element
Link: add link component (#15052)
parent
0c9452f778
commit
5ecf4c2895
|
@ -70,6 +70,7 @@
|
||||||
"footer": "./packages/footer/index.js",
|
"footer": "./packages/footer/index.js",
|
||||||
"timeline": "./packages/timeline/index.js",
|
"timeline": "./packages/timeline/index.js",
|
||||||
"timeline-item": "./packages/timeline-item/index.js",
|
"timeline-item": "./packages/timeline-item/index.js",
|
||||||
|
"link": "./packages/link/index.js",
|
||||||
"divider": "./packages/divider/index.js",
|
"divider": "./packages/divider/index.js",
|
||||||
"image": "./packages/image/index.js"
|
"image": "./packages/image/index.js"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,77 @@
|
||||||
|
## Link
|
||||||
|
|
||||||
|
Text hyperlink
|
||||||
|
|
||||||
|
### Basic
|
||||||
|
|
||||||
|
Basic text link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
|
||||||
|
<el-link type="primary">primary</el-link>
|
||||||
|
<el-link type="success">success</el-link>
|
||||||
|
<el-link type="warning">warning</el-link>
|
||||||
|
<el-link type="danger">danger</el-link>
|
||||||
|
<el-link type="info">info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
Disabled state of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link disabled>default</el-link>
|
||||||
|
<el-link type="primary" disabled>primary</el-link>
|
||||||
|
<el-link type="success" disabled>success</el-link>
|
||||||
|
<el-link type="warning" disabled>warning</el-link>
|
||||||
|
<el-link type="danger" disabled>danger</el-link>
|
||||||
|
<el-link type="info" disabled>info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Underline
|
||||||
|
|
||||||
|
Underline of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link :underline="false">Without Underline</el-link>
|
||||||
|
<el-link>With Underline</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Icon
|
||||||
|
|
||||||
|
Link with icon
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link icon="el-icon-edit">Edit</el-link>
|
||||||
|
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Attributes
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Options | Default |
|
||||||
|
| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |
|
||||||
|
| type | type | string | primary / success / warning / danger / info | default |
|
||||||
|
| underline | whether the component has underline | boolean | — | true |
|
||||||
|
| disabled | whether the component is disabled | boolean | — | false |
|
||||||
|
| href | same as native hyperlink's `href` | string | — | - |
|
||||||
|
| icon | class name of icon | string | — | - |
|
|
@ -0,0 +1,77 @@
|
||||||
|
## Link
|
||||||
|
|
||||||
|
Text hyperlink
|
||||||
|
|
||||||
|
### Basic
|
||||||
|
|
||||||
|
Basic text link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
|
||||||
|
<el-link type="primary">primary</el-link>
|
||||||
|
<el-link type="success">success</el-link>
|
||||||
|
<el-link type="warning">warning</el-link>
|
||||||
|
<el-link type="danger">danger</el-link>
|
||||||
|
<el-link type="info">info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
Disabled state of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link disabled>default</el-link>
|
||||||
|
<el-link type="primary" disabled>primary</el-link>
|
||||||
|
<el-link type="success" disabled>success</el-link>
|
||||||
|
<el-link type="warning" disabled>warning</el-link>
|
||||||
|
<el-link type="danger" disabled>danger</el-link>
|
||||||
|
<el-link type="info" disabled>info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Underline
|
||||||
|
|
||||||
|
Underline of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link :underline="false">Without Underline</el-link>
|
||||||
|
<el-link>With Underline</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Icon
|
||||||
|
|
||||||
|
Link with icon
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link icon="el-icon-edit">Edit</el-link>
|
||||||
|
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Attributes
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Options | Default |
|
||||||
|
| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |
|
||||||
|
| type | type | string | primary / success / warning / danger / info | default |
|
||||||
|
| underline | whether the component has underline | boolean | — | true |
|
||||||
|
| disabled | whether the component is disabled | boolean | — | false |
|
||||||
|
| href | same as native hyperlink's `href` | string | — | - |
|
||||||
|
| icon | class name of icon | string | — | - |
|
|
@ -0,0 +1,77 @@
|
||||||
|
## Link
|
||||||
|
|
||||||
|
Text hyperlink
|
||||||
|
|
||||||
|
### Basic
|
||||||
|
|
||||||
|
Basic text link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link href="https://element.eleme.io" target="_blank">default</el-link>
|
||||||
|
<el-link type="primary">primary</el-link>
|
||||||
|
<el-link type="success">success</el-link>
|
||||||
|
<el-link type="warning">warning</el-link>
|
||||||
|
<el-link type="danger">danger</el-link>
|
||||||
|
<el-link type="info">info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
Disabled state of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link disabled>default</el-link>
|
||||||
|
<el-link type="primary" disabled>primary</el-link>
|
||||||
|
<el-link type="success" disabled>success</el-link>
|
||||||
|
<el-link type="warning" disabled>warning</el-link>
|
||||||
|
<el-link type="danger" disabled>danger</el-link>
|
||||||
|
<el-link type="info" disabled>info</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Underline
|
||||||
|
|
||||||
|
Underline of link
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link :underline="false">Without Underline</el-link>
|
||||||
|
<el-link>With Underline</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Icon
|
||||||
|
|
||||||
|
Link with icon
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link icon="el-icon-edit">Edit</el-link>
|
||||||
|
<el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Attributes
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Options | Default |
|
||||||
|
| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |
|
||||||
|
| type | type | string | primary / success / warning / danger / info | default |
|
||||||
|
| underline | whether the component has underline | boolean | — | true |
|
||||||
|
| disabled | whether the component is disabled | boolean | — | false |
|
||||||
|
| href | same as native hyperlink's `href` | string | — | - |
|
||||||
|
| icon | class name of icon | string | — | - |
|
|
@ -0,0 +1,66 @@
|
||||||
|
## Link 文字链接
|
||||||
|
|
||||||
|
文字超链接
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
基础的文字链接用法。
|
||||||
|
:::demo
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
|
||||||
|
<el-link type="primary">主要链接</el-link>
|
||||||
|
<el-link type="success">成功链接</el-link>
|
||||||
|
<el-link type="warning">警告链接</el-link>
|
||||||
|
<el-link type="danger">危险链接</el-link>
|
||||||
|
<el-link type="info">信息链接</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 禁用状态
|
||||||
|
文字链接不可用状态。
|
||||||
|
:::demo
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link disabled>默认链接</el-link>
|
||||||
|
<el-link type="primary" disabled>主要链接</el-link>
|
||||||
|
<el-link type="success" disabled>成功链接</el-link>
|
||||||
|
<el-link type="warning" disabled>警告链接</el-link>
|
||||||
|
<el-link type="danger" disabled>危险链接</el-link>
|
||||||
|
<el-link type="info" disabled>信息链接</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 下划线
|
||||||
|
文字链接下划线。
|
||||||
|
:::demo
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link :underline="false">无下划线</el-link>
|
||||||
|
<el-link>有下划线</el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 图标
|
||||||
|
|
||||||
|
带图标的文字链接可增强辨识度。
|
||||||
|
:::demo
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<el-link icon="el-icon-edit">编辑</el-link>
|
||||||
|
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Attributes
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
|
||||||
|
| type | 类型 | string | primary / success / warning / danger / info | default |
|
||||||
|
| underline | 是否下划线 | boolean | — | true |
|
||||||
|
| disabled | 是否禁用状态 | boolean | — | false |
|
||||||
|
| href | 原生 href 属性 | string | — | - |
|
||||||
|
| icon | 图标类名 | string | — | - |
|
|
@ -70,6 +70,10 @@
|
||||||
{
|
{
|
||||||
"path": "/button",
|
"path": "/button",
|
||||||
"title": "Button 按钮"
|
"title": "Button 按钮"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/link",
|
||||||
|
"title": "Link 文字链接"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -336,6 +340,10 @@
|
||||||
{
|
{
|
||||||
"path": "/button",
|
"path": "/button",
|
||||||
"title": "Button"
|
"title": "Button"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/link",
|
||||||
|
"title": "Link"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -602,6 +610,10 @@
|
||||||
{
|
{
|
||||||
"path": "/button",
|
"path": "/button",
|
||||||
"title": "Button"
|
"title": "Button"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/link",
|
||||||
|
"title": "Link"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -868,6 +880,10 @@
|
||||||
{
|
{
|
||||||
"path": "/button",
|
"path": "/button",
|
||||||
"title": "Button"
|
"title": "Button"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/link",
|
||||||
|
"title": "Link"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
import Link from './src/main';
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
Link.install = function(Vue) {
|
||||||
|
Vue.component(Link.name, Link);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Link;
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<a
|
||||||
|
:class="[
|
||||||
|
'el-link',
|
||||||
|
type ? `el-link--${type}` : '',
|
||||||
|
disabled && 'is-disabled',
|
||||||
|
underline && !disabled && 'is-underline'
|
||||||
|
]"
|
||||||
|
:href="href"
|
||||||
|
v-bind="$attrs"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
|
||||||
|
<el-icon :class="icon" v-if="icon"></el-icon>
|
||||||
|
|
||||||
|
<span v-if="$slots.default" class="el-link--inner">
|
||||||
|
<slot></slot>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ElLink',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
disabled: Boolean,
|
||||||
|
href: String,
|
||||||
|
icon: String
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleClick(event) {
|
||||||
|
if (!this.disabled) {
|
||||||
|
if (!this.href) {
|
||||||
|
this.$emit('click', event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -863,6 +863,29 @@ $--timeline-node-size-normal: 12px !default;
|
||||||
$--timeline-node-size-large: 14px !default;
|
$--timeline-node-size-large: 14px !default;
|
||||||
$--timeline-node-color: $--border-color-light !default;
|
$--timeline-node-color: $--border-color-light !default;
|
||||||
|
|
||||||
|
/* Link
|
||||||
|
--------------------------*/
|
||||||
|
/// fontSize||Font|1
|
||||||
|
$--link-font-size: $--font-size-base !default;
|
||||||
|
/// fontWeight||Font|1
|
||||||
|
$--link-font-weight: $--font-weight-primary !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-default-font-color: $--color-text-regular !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-default-active-color: $--color-primary !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-disabled-font-color: $--color-text-placeholder !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-primary-font-color: $--color-primary !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-success-font-color: $--color-success !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-warning-font-color: $--color-warning !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-danger-font-color: $--color-danger !default;
|
||||||
|
/// color||Color|0
|
||||||
|
$--link-info-font-color: $--color-info !default;
|
||||||
|
|
||||||
/* Break-point
|
/* Break-point
|
||||||
--------------------------*/
|
--------------------------*/
|
||||||
$--sm: 768px !default;
|
$--sm: 768px !default;
|
||||||
|
|
|
@ -67,5 +67,6 @@
|
||||||
@import "./footer.scss";
|
@import "./footer.scss";
|
||||||
@import "./timeline.scss";
|
@import "./timeline.scss";
|
||||||
@import "./timeline-item.scss";
|
@import "./timeline-item.scss";
|
||||||
|
@import "./link.scss";
|
||||||
@import "./divider.scss";
|
@import "./divider.scss";
|
||||||
@import "./image.scss";
|
@import "./image.scss";
|
||||||
|
|
|
@ -0,0 +1,76 @@
|
||||||
|
@import "mixins/mixins";
|
||||||
|
@import "common/var";
|
||||||
|
|
||||||
|
$typeMap: (
|
||||||
|
primary: $--link-primary-font-color,
|
||||||
|
danger: $--link-danger-font-color,
|
||||||
|
success: $--link-success-font-color,
|
||||||
|
warning: $--link-warning-font-color,
|
||||||
|
info: $--link-info-font-color);
|
||||||
|
|
||||||
|
@include b(link) {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
font-size: $--link-font-size;
|
||||||
|
font-weight: $--link-font-weight;
|
||||||
|
|
||||||
|
@include when(underline) {
|
||||||
|
&:hover:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-bottom: 1px solid $--link-default-active-color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include when(disabled) {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
& [class*="el-icon-"] {
|
||||||
|
& + span {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&.el-link--default {
|
||||||
|
color: $--link-default-font-color;
|
||||||
|
&:hover {
|
||||||
|
color: $--link-default-active-color
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
border-color: $--link-default-active-color
|
||||||
|
}
|
||||||
|
@include when(disabled) {
|
||||||
|
color: $--link-disabled-font-color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $type, $primaryColor in $typeMap {
|
||||||
|
&.el-link--#{$type} {
|
||||||
|
color: $primaryColor;
|
||||||
|
&:hover {
|
||||||
|
color: mix($primaryColor, $--color-white, 80%)
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
border-color: $primaryColor
|
||||||
|
}
|
||||||
|
@include when(disabled) {
|
||||||
|
color: mix($primaryColor, $--color-white, 50%)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -71,6 +71,7 @@ import Main from '../packages/main/index.js';
|
||||||
import Footer from '../packages/footer/index.js';
|
import Footer from '../packages/footer/index.js';
|
||||||
import Timeline from '../packages/timeline/index.js';
|
import Timeline from '../packages/timeline/index.js';
|
||||||
import TimelineItem from '../packages/timeline-item/index.js';
|
import TimelineItem from '../packages/timeline-item/index.js';
|
||||||
|
import Link from '../packages/link/index.js';
|
||||||
import Divider from '../packages/divider/index.js';
|
import Divider from '../packages/divider/index.js';
|
||||||
import Image from '../packages/image/index.js';
|
import Image from '../packages/image/index.js';
|
||||||
import locale from 'element-ui/src/locale';
|
import locale from 'element-ui/src/locale';
|
||||||
|
@ -144,6 +145,7 @@ const components = [
|
||||||
Footer,
|
Footer,
|
||||||
Timeline,
|
Timeline,
|
||||||
TimelineItem,
|
TimelineItem,
|
||||||
|
Link,
|
||||||
Divider,
|
Divider,
|
||||||
Image,
|
Image,
|
||||||
CollapseTransition
|
CollapseTransition
|
||||||
|
@ -256,6 +258,7 @@ export default {
|
||||||
Footer,
|
Footer,
|
||||||
Timeline,
|
Timeline,
|
||||||
TimelineItem,
|
TimelineItem,
|
||||||
|
Link,
|
||||||
Divider,
|
Divider,
|
||||||
Image
|
Image
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { createTest, createVue, destroyVM, wait } from '../util';
|
||||||
|
import Link from 'packages/link';
|
||||||
|
|
||||||
|
describe('Link', () => {
|
||||||
|
let vm;
|
||||||
|
afterEach(() => {
|
||||||
|
destroyVM(vm);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('create', () => {
|
||||||
|
vm = createTest(Link, {
|
||||||
|
type: 'primary'
|
||||||
|
}, true);
|
||||||
|
let linkElm = vm.$el;
|
||||||
|
expect(linkElm.classList.contains('el-link--primary')).to.be.true;
|
||||||
|
});
|
||||||
|
it('icon', () => {
|
||||||
|
vm = createTest(Link, {
|
||||||
|
icon: 'el-icon-search'
|
||||||
|
}, true);
|
||||||
|
let linkElm = vm.$el;
|
||||||
|
expect(linkElm.querySelector('.el-icon-search')).to.be.ok;
|
||||||
|
});
|
||||||
|
it('href', () => {
|
||||||
|
vm = createTest(Link, {
|
||||||
|
href: 'https://element.eleme.io/'
|
||||||
|
}, true);
|
||||||
|
let linkElm = vm.$el;
|
||||||
|
expect(linkElm.getAttribute('href')).to.be.equal('https://element.eleme.io/');
|
||||||
|
});
|
||||||
|
it('target', () => {
|
||||||
|
vm = createVue(`
|
||||||
|
<el-link href="https://element.eleme.io" target="_blank">
|
||||||
|
default
|
||||||
|
</el-link>
|
||||||
|
`);
|
||||||
|
let linkElm = vm.$el;
|
||||||
|
expect(linkElm.getAttribute('target')).to.be.equal('_blank');
|
||||||
|
});
|
||||||
|
it('disabled', () => {
|
||||||
|
vm = createTest(Link, {
|
||||||
|
disabled: true
|
||||||
|
}, true);
|
||||||
|
let linkElm = vm.$el;
|
||||||
|
expect(linkElm.classList.contains('is-disabled')).to.be.true;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('click', async() => {
|
||||||
|
let result;
|
||||||
|
vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-link @click="handleClick"></el-link>
|
||||||
|
`,
|
||||||
|
methods: {
|
||||||
|
handleClick(evt) {
|
||||||
|
result = evt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
vm.$el.click();
|
||||||
|
await wait();
|
||||||
|
expect(result).to.exist;
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { ElementUIComponent } from './component'
|
||||||
|
|
||||||
|
/** Button type */
|
||||||
|
export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
|
||||||
|
|
||||||
|
/** Link Component */
|
||||||
|
export declare class ElLink extends ElementUIComponent {
|
||||||
|
/** Link type */
|
||||||
|
type: LinkType
|
||||||
|
|
||||||
|
/** Disable the link */
|
||||||
|
disabled: boolean
|
||||||
|
|
||||||
|
/** Link underline */
|
||||||
|
underline: boolean
|
||||||
|
|
||||||
|
/** Link icon, accepts an icon name of Element icon component */
|
||||||
|
icon: string
|
||||||
|
|
||||||
|
/** Link href */
|
||||||
|
href: string
|
||||||
|
|
||||||
|
/** Link target */
|
||||||
|
target: string
|
||||||
|
}
|
Loading…
Reference in New Issue