first
This commit is contained in:
Ivan
238
examples/docs/zh-CN/alert.md
Normal file
238
examples/docs/zh-CN/alert.md
Normal file
@@ -0,0 +1,238 @@
|
||||
## Alert 警告
|
||||
|
||||
用于页面中展示重要的提示信息。
|
||||
|
||||
### 基本用法
|
||||
|
||||
页面中的非浮层元素，不会自动消失。
|
||||
|
||||
:::demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 主题
|
||||
|
||||
Alert 组件提供了两个不同的主题：`light`和`dark`。
|
||||
|
||||
:::demo 通过设置`effect`属性来改变主题，默认为`light`。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### 自定义关闭按钮
|
||||
|
||||
自定义关闭按钮为文字或其他符号。
|
||||
|
||||
:::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="不可关闭的 alert"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="自定义 close-text"
|
||||
type="info"
|
||||
close-text="知道了">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="设置了回调的 alert"
|
||||
type="warning"
|
||||
@close="hello">
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有 icon
|
||||
|
||||
表示某种状态时提升可读性。
|
||||
|
||||
:::demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文字居中
|
||||
|
||||
使用 `center` 属性让文字水平居中。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有辅助性文字介绍
|
||||
|
||||
包含标题和内容，解释更详细的警告。
|
||||
|
||||
:::demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="带辅助性文字介绍"
|
||||
type="success"
|
||||
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有 icon 和辅助性文字介绍
|
||||
|
||||
:::demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题 | string | — | — |
|
||||
| type | 主题 | string | success/warning/info/error | info |
|
||||
| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
|
||||
| closable | 是否可关闭 | boolean | — | true |
|
||||
| center | 文字是否居中 | boolean | — | true |
|
||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||
| show-icon | 是否显示图标 | boolean | — | false |
|
||||
| effect | 选择提供的主题 | string | light/dark | light |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | 描述 |
|
||||
| title | 标题的内容 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| close | 关闭alert时触发的事件 | — |
|
||||
147
examples/docs/zh-CN/avatar.md
Normal file
147
examples/docs/zh-CN/avatar.md
Normal file
@@ -0,0 +1,147 @@
|
||||
## Avatar 头像
|
||||
|
||||
用图标、图片或者字符的形式展示用户或事物信息。
|
||||
|
||||
### 基本用法
|
||||
|
||||
通过 `shape` 和 `size` 设置头像的形状和大小。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-row class="demo-avatar demo-basic">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">circle</div>
|
||||
<div class="demo-basic--circle">
|
||||
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
|
||||
<div class="block" v-for="size in sizeList" :key="size">
|
||||
<el-avatar :size="size" :src="circleUrl"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">square</div>
|
||||
<div class="demo-basic--circle">
|
||||
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
|
||||
<div class="block" v-for="size in sizeList" :key="size">
|
||||
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
|
||||
squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
|
||||
sizeList: ["large", "medium", "small"]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 展示类型
|
||||
|
||||
支持三种类型：图标、图片和字符
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="demo-type">
|
||||
<div>
|
||||
<el-avatar icon="el-icon-user-solid"></el-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<el-avatar> user </el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图片加载失败的 fallback 行为
|
||||
|
||||
当展示类型为图片的时候，图片加载失败的 fallback 行为
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="demo-type">
|
||||
<el-avatar :size="60" src="https://empty" @error="errorHandler">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
errorHandler() {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 图片如何适应容器框
|
||||
|
||||
当展示类型为图片的时候，使用 `fit` 属性定义图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="demo-fit">
|
||||
<div class="block" v-for="fit in fits" :key="fit">
|
||||
<span class="title">{{ fit }}</span>
|
||||
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
|
||||
| icon | 设置头像的图标类型，参考 Icon 组件 | string | | |
|
||||
| size | 设置头像的大小 | number/string | number / large / medium / small | large |
|
||||
| shape | 设置头像的形状 | string | circle / square | circle |
|
||||
| src | 图片头像的资源地址 | string | | |
|
||||
| srcSet | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string | | |
|
||||
| alt | 描述图像的替换文本 | string | | |
|
||||
| fit | 当展示类型为图片的时候，设置图片如何适应容器框 | string | fill / contain / cover / none / scale-down | cover |
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------ | -------- |
|
||||
| error | 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为 |(e: Event) |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------ | ------------------ |
|
||||
| default | 自定义头像展示内容 |
|
||||
60
examples/docs/zh-CN/backtop.md
Normal file
60
examples/docs/zh-CN/backtop.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Backtop 回到顶部
|
||||
|
||||
返回页面顶部的操作按钮
|
||||
|
||||
### 基础用法
|
||||
|
||||
滑动页面即可看到右下方的按钮。
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
Scroll down to see the bottom-right button.
|
||||
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 自定义显示内容
|
||||
|
||||
显示区域被固定为 40px \* 40px 的区域, 其中的内容可支持自定义。
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
Scroll down to see the bottom-right button.
|
||||
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
|
||||
<div
|
||||
style="{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #f2f5f6;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #1989fa;
|
||||
}"
|
||||
>
|
||||
UP
|
||||
</div>
|
||||
</el-backtop>
|
||||
</template>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
|
||||
| target | 触发滚动的对象 | string | | |
|
||||
| visibility-height | 滚动高度达到此参数值才出现 | number | | 200 |
|
||||
| right | 控制其显示位置, 距离页面右边距 | number | | 40 |
|
||||
| bottom | 控制其显示位置, 距离页面底部距离 | number | | 40 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------ | -------- |
|
||||
| click | 点击按钮触发的事件 | 点击事件 |
|
||||
120
examples/docs/zh-CN/badge.md
Normal file
120
examples/docs/zh-CN/badge.md
Normal file
@@ -0,0 +1,120 @@
|
||||
## Badge 标记
|
||||
|
||||
出现在按钮、图标旁的数字或状态标记。
|
||||
|
||||
### 基础用法
|
||||
展示新消息数量。
|
||||
|
||||
:::demo 定义`value`属性，它接受`Number`或者`String`。
|
||||
|
||||
```html
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="1" class="item" type="primary">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="2" class="item" type="warning">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="clearfix">
|
||||
评论
|
||||
<el-badge class="mark" :value="12" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="clearfix">
|
||||
回复
|
||||
<el-badge class="mark" :value="3" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 最大值
|
||||
可自定义最大值。
|
||||
|
||||
:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
|
||||
|
||||
```html
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
可以显示数字以外的文本内容。
|
||||
|
||||
:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
|
||||
|
||||
```html
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">回复</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 小红点
|
||||
以红点的形式标注需要关注的内容。
|
||||
|
||||
:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。
|
||||
|
||||
```html
|
||||
<el-badge is-dot class="item">数据查询</el-badge>
|
||||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | 显示值 | string, number | — | — |
|
||||
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
|
||||
| is-dot | 小圆点 | boolean | — | false |
|
||||
| hidden | 隐藏 badge | boolean | — | false |
|
||||
| type | 类型 | string | primary / success / warning / danger / info | — |
|
||||
135
examples/docs/zh-CN/border.md
Normal file
135
examples/docs/zh-CN/border.md
Normal file
@@ -0,0 +1,135 @@
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
|
||||
const varMap = {
|
||||
'$--box-shadow-light': 'boxShadowLight',
|
||||
'$--box-shadow-base': 'boxShadowBase',
|
||||
'$--border-radius-base': 'borderRadiusBase',
|
||||
'$--border-radius-small': 'borderRadiusSmall'
|
||||
};
|
||||
const original = {
|
||||
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
|
||||
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
|
||||
borderRadiusBase: '4px',
|
||||
borderRadiusSmall: '2px'
|
||||
}
|
||||
export default {
|
||||
created() {
|
||||
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
|
||||
},
|
||||
mounted() {
|
||||
this.setGlobal();
|
||||
},
|
||||
methods: {
|
||||
setGlobal() {
|
||||
if (window.userThemeConfig) {
|
||||
this.global = window.userThemeConfig.global;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
global: {},
|
||||
boxShadowLight: '',
|
||||
boxShadowBase: '',
|
||||
borderRadiusBase: '',
|
||||
borderRadiusSmall: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
global: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
Object.keys(varMap).forEach((c) => {
|
||||
if (value[c]) {
|
||||
this[varMap[c]] = value[c]
|
||||
} else {
|
||||
this[varMap[c]] = original[varMap[c]]
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Border 边框
|
||||
|
||||
我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
|
||||
|
||||
### 边框
|
||||
|
||||
我们提供了以下几种边框样式，以供选择。
|
||||
|
||||
<table class="demo-border">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text">名称</td>
|
||||
<td class="text">粗细</td>
|
||||
<td class="line">举例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text">实线</td>
|
||||
<td class="text">1px</td>
|
||||
<td class="line">
|
||||
<div></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text">虚线</td>
|
||||
<td class="text">2px</td>
|
||||
<td class="line">
|
||||
<div class="dashed"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### 圆角
|
||||
|
||||
我们提供了以下几种圆角样式，以供选择。
|
||||
|
||||
<el-row :gutter="12" class="demo-radius">
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">无圆角</div>
|
||||
<div class="value">border-radius: 0px</div>
|
||||
<div class="radius"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">小圆角</div>
|
||||
<div class="value">border-radius: {{borderRadiusSmall}}</div>
|
||||
<div
|
||||
class="radius"
|
||||
:style="{ borderRadius: borderRadiusSmall }"
|
||||
></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">大圆角</div>
|
||||
<div class="value">border-radius: {{borderRadiusBase}}</div>
|
||||
<div
|
||||
class="radius"
|
||||
:style="{ borderRadius: borderRadiusBase }"
|
||||
></div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="title">圆形圆角</div>
|
||||
<div class="value">border-radius: 30px</div>
|
||||
<div class="radius radius-30"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### 投影
|
||||
|
||||
我们提供了以下几种投影样式，以供选择。
|
||||
|
||||
<div
|
||||
class="demo-shadow"
|
||||
:style="{ boxShadow: boxShadowBase }"
|
||||
></div>
|
||||
<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
|
||||
|
||||
<div
|
||||
class="demo-shadow"
|
||||
:style="{ boxShadow: boxShadowLight }"
|
||||
></div>
|
||||
<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>
|
||||
44
examples/docs/zh-CN/breadcrumb.md
Normal file
44
examples/docs/zh-CN/breadcrumb.md
Normal file
@@ -0,0 +1,44 @@
|
||||
## Breadcrumb 面包屑
|
||||
显示当前页面的路径，快速返回之前的任意页面。
|
||||
|
||||
### 基础用法
|
||||
|
||||
适用广泛的基础用法。
|
||||
|
||||
:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图标分隔符
|
||||
|
||||
:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Breadcrumb Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | 分隔符 | string | — | 斜杠'/' |
|
||||
| separator-class | 图标分隔符 class | string | — | - |
|
||||
|
||||
### Breadcrumb Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
|
||||
| replace | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |
|
||||
166
examples/docs/zh-CN/button.md
Normal file
166
examples/docs/zh-CN/button.md
Normal file
@@ -0,0 +1,166 @@
|
||||
## Button 按钮
|
||||
常用的操作按钮。
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础的按钮用法。
|
||||
|
||||
:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button plain>朴素按钮</el-button>
|
||||
<el-button type="primary" plain>主要按钮</el-button>
|
||||
<el-button type="success" plain>成功按钮</el-button>
|
||||
<el-button type="info" plain>信息按钮</el-button>
|
||||
<el-button type="warning" plain>警告按钮</el-button>
|
||||
<el-button type="danger" plain>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button round>圆角按钮</el-button>
|
||||
<el-button type="primary" round>主要按钮</el-button>
|
||||
<el-button type="success" round>成功按钮</el-button>
|
||||
<el-button type="info" round>信息按钮</el-button>
|
||||
<el-button type="warning" round>警告按钮</el-button>
|
||||
<el-button type="danger" round>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button icon="el-icon-search" circle></el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
||||
<el-button type="success" icon="el-icon-check" circle></el-button>
|
||||
<el-button type="info" icon="el-icon-message" circle></el-button>
|
||||
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
按钮不可用状态。
|
||||
|
||||
:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-button disabled>默认按钮</el-button>
|
||||
<el-button type="primary" disabled>主要按钮</el-button>
|
||||
<el-button type="success" disabled>成功按钮</el-button>
|
||||
<el-button type="info" disabled>信息按钮</el-button>
|
||||
<el-button type="warning" disabled>警告按钮</el-button>
|
||||
<el-button type="danger" disabled>危险按钮</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button plain disabled>朴素按钮</el-button>
|
||||
<el-button type="primary" plain disabled>主要按钮</el-button>
|
||||
<el-button type="success" plain disabled>成功按钮</el-button>
|
||||
<el-button type="info" plain disabled>信息按钮</el-button>
|
||||
<el-button type="warning" plain disabled>警告按钮</el-button>
|
||||
<el-button type="danger" plain disabled>危险按钮</el-button>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文字按钮
|
||||
|
||||
没有边框和背景色的按钮。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-button type="text">文字按钮</el-button>
|
||||
<el-button type="text" disabled>文字按钮</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图标按钮
|
||||
|
||||
带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
|
||||
|
||||
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮组
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
|
||||
:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
|
||||
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 加载中
|
||||
|
||||
点击按钮后进行数据加载操作，在按钮上显示加载状态。
|
||||
|
||||
:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">加载中</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button size="medium">中等按钮</el-button>
|
||||
<el-button size="small">小型按钮</el-button>
|
||||
<el-button size="mini">超小按钮</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button round>默认按钮</el-button>
|
||||
<el-button size="medium" round>中等按钮</el-button>
|
||||
<el-button size="small" round>小型按钮</el-button>
|
||||
<el-button size="mini" round>超小按钮</el-button>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | 尺寸 | string | medium / small / mini | — |
|
||||
| type | 类型 | string | primary / success / warning / danger / info / text | — |
|
||||
| plain | 是否朴素按钮 | boolean | — | false |
|
||||
| round | 是否圆角按钮 | boolean | — | false |
|
||||
| circle | 是否圆形按钮 | boolean | — | false |
|
||||
| loading | 是否加载中状态 | boolean | — | false |
|
||||
| disabled | 是否禁用状态 | boolean | — | false |
|
||||
| icon | 图标类名 | string | — | — |
|
||||
| autofocus | 是否默认聚焦 | boolean | — | false |
|
||||
| native-type | 原生 type 属性 | string | button / submit / reset | button |
|
||||
66
examples/docs/zh-CN/calendar.md
Normal file
66
examples/docs/zh-CN/calendar.md
Normal file
@@ -0,0 +1,66 @@
|
||||
## Calendar calendar
|
||||
|
||||
显示日期
|
||||
|
||||
### 基本
|
||||
|
||||
:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。
|
||||
```html
|
||||
<el-calendar v-model="value">
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
|
||||
:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
|
||||
```html
|
||||
<el-calendar>
|
||||
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
|
||||
<template
|
||||
slot="dateCell"
|
||||
slot-scope="{date, data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
||||
</p>
|
||||
</template>
|
||||
</el-calendar>
|
||||
<style>
|
||||
.is-selected {
|
||||
color: #1989FA;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义范围
|
||||
|
||||
:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
|
||||
```html
|
||||
<el-calendar :range="['2019-03-04', '2019-03-24']">
|
||||
</el-calendar>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------------|-------------- |---------- |------------ |-------- |
|
||||
| value / v-model | 绑定值 | Date/string/number | — | — |
|
||||
| range | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array | — | — |
|
||||
| first-day-of-week | 周起始日 | Number | 1 到 7 | 1 |
|
||||
|
||||
### dateCell scoped slot 参数
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------------|-------------- |---------- |------------ |-------- |
|
||||
| date | 单元格代表的日期 | Date | — | — |
|
||||
| data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — |
|
||||
170
examples/docs/zh-CN/card.md
Normal file
170
examples/docs/zh-CN/card.md
Normal file
@@ -0,0 +1,170 @@
|
||||
## Card 卡片
|
||||
将信息聚合在卡片容器中展示。
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
包含标题，内容和操作。
|
||||
|
||||
:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>卡片名称</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 简单卡片
|
||||
|
||||
卡片可以只有内容区域。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'列表内容 ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图片
|
||||
|
||||
可配置定义更丰富的内容展示。
|
||||
|
||||
:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>好吃的汉堡</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">操作按钮</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 卡片阴影
|
||||
|
||||
可对阴影的显示进行配置。
|
||||
|
||||
:::demo 通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。
|
||||
```html
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always">
|
||||
总是显示
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
鼠标悬浮时显示
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
从不显示
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
|
||||
| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
|
||||
| shadow | 设置阴影显示时机 | string | always / hover / never | always |
|
||||
212
examples/docs/zh-CN/carousel.md
Normal file
212
examples/docs/zh-CN/carousel.md
Normal file
@@ -0,0 +1,212 @@
|
||||
## Carousel 走马灯
|
||||
|
||||
在有限空间内，循环播放同一类型的图片、文字等内容
|
||||
|
||||
### 基础用法
|
||||
|
||||
适用广泛的基础用法
|
||||
|
||||
:::demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认 Hover 指示器触发</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3 class="small">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Click 指示器触发</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3 class="small">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 指示器
|
||||
|
||||
可以将指示器的显示位置设置在容器外部
|
||||
|
||||
:::demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
|
||||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 切换箭头
|
||||
可以设置切换箭头的显示时机
|
||||
|
||||
:::demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 卡片化
|
||||
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
|
||||
|
||||
:::demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<h3 class="medium">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 方向
|
||||
默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来让走马灯在垂直方向上显示。
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-carousel height="200px" direction="vertical" :autoplay="false">
|
||||
<el-carousel-item v-for="item in 3" :key="item">
|
||||
<h3 class="medium">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Carousel Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | 走马灯的高度 | string | — | — |
|
||||
| initial-index | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 |
|
||||
| trigger | 指示器的触发方式 | string | click | — |
|
||||
| autoplay | 是否自动切换 | boolean | — | true |
|
||||
| interval | 自动切换的时间间隔，单位为毫秒 | number | — | 3000 |
|
||||
| indicator-position | 指示器的位置 | string | outside/none | — |
|
||||
| arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
|
||||
| type | 走马灯的类型 | string | card | — |
|
||||
| loop | 是否循环显示 | boolean | - | true |
|
||||
| direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |
|
||||
|
||||
### Carousel Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
|
||||
|
||||
### Carousel Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|---------- |-------------- | -- |
|
||||
| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 |
|
||||
| prev | 切换至上一张幻灯片 | — |
|
||||
| next | 切换至下一张幻灯片 | — |
|
||||
|
||||
### Carousel-Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — |
|
||||
| label | 该幻灯片所对应指示器的文本 | string | — | — |
|
||||
1966
examples/docs/zh-CN/cascader.md
Normal file
1966
examples/docs/zh-CN/cascader.md
Normal file
File diff suppressed because it is too large
Load Diff
283
examples/docs/zh-CN/checkbox.md
Normal file
283
examples/docs/zh-CN/checkbox.md
Normal file
@@ -0,0 +1,283 @@
|
||||
## Checkbox 多选框
|
||||
一组备选项中进行多选
|
||||
|
||||
### 基础用法
|
||||
|
||||
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
|
||||
|
||||
:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` 为 true 或 false -->
|
||||
<el-checkbox v-model="checked">备选项</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
多选框不可用状态。
|
||||
|
||||
:::demo 设置`disabled`属性即可。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 多选框组
|
||||
|
||||
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
|
||||
|
||||
:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可。 `el-checkbox` 的 `label`属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 C"></el-checkbox>
|
||||
<el-checkbox label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox label="选中且禁用" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkList: ['选中且禁用','复选框 A']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### indeterminate 状态
|
||||
|
||||
`indeterminate` 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
checkedCities: ['上海', '北京'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.cities.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可选项目数量的限制
|
||||
|
||||
使用 `min` 和 `max` 属性能够限制可以被勾选的项目的数量。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkedCities: ['上海', '北京'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 按钮样式
|
||||
|
||||
按钮样式的多选组合。
|
||||
|
||||
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkboxGroup1: ['上海'],
|
||||
checkboxGroup2: ['上海'],
|
||||
checkboxGroup3: ['上海'],
|
||||
checkboxGroup4: ['上海'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有边框
|
||||
|
||||
:::demo 设置`border`属性可以渲染为带有边框的多选框。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup1" size="small">
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
<el-checkbox label="备选项2" border disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
<el-checkbox label="备选项2" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked1: true,
|
||||
checked2: false,
|
||||
checked3: false,
|
||||
checked4: true,
|
||||
checkboxGroup1: [],
|
||||
checkboxGroup2: []
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
|
||||
| true-label | 选中时的值 | string / number | — | — |
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
| checked | 当前是否勾选 | boolean | — | false |
|
||||
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
|
||||
|
||||
### Checkbox Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | 更新后的值 |
|
||||
|
||||
### Checkbox-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | array | — | — |
|
||||
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
|
||||
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
|
||||
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF |
|
||||
|
||||
### Checkbox-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发的事件 | 更新后的值 |
|
||||
|
||||
### Checkbox-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
|
||||
| true-label | 选中时的值 | string / number | — | — |
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
| checked | 当前是否勾选 | boolean | — | false |
|
||||
131
examples/docs/zh-CN/collapse.md
Normal file
131
examples/docs/zh-CN/collapse.md
Normal file
@@ -0,0 +1,131 @@
|
||||
## Collapse 折叠面板
|
||||
|
||||
通过折叠面板收纳内容区域
|
||||
|
||||
### 基础用法
|
||||
|
||||
可同时展开多个面板，面板之间不影响
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="一致性 Consistency" name="1">
|
||||
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
|
||||
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="反馈 Feedback" name="2">
|
||||
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="效率 Efficiency" name="3">
|
||||
<div>简化流程：设计简洁直观的操作流程；</div>
|
||||
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可控 Controllability" name="4">
|
||||
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 手风琴效果
|
||||
|
||||
每次只能展开一个面板
|
||||
|
||||
:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。
|
||||
```html
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="一致性 Consistency" name="1">
|
||||
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
|
||||
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="反馈 Feedback" name="2">
|
||||
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="效率 Efficiency" name="3">
|
||||
<div>简化流程：设计简洁直观的操作流程；</div>
|
||||
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可控 Controllability" name="4">
|
||||
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义面板标题
|
||||
|
||||
除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item>
|
||||
<template slot="title">
|
||||
一致性 Consistency<i class="header-icon el-icon-info"></i>
|
||||
</template>
|
||||
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
|
||||
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="反馈 Feedback">
|
||||
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="效率 Efficiency">
|
||||
<div>简化流程：设计简洁直观的操作流程；</div>
|
||||
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可控 Controllability">
|
||||
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
```
|
||||
:::
|
||||
|
||||
### Collapse Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string / array | — | — |
|
||||
| accordion | 是否手风琴模式 | boolean | — | false |
|
||||
|
||||
### Collapse Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 唯一标志符 | string/number | — | — |
|
||||
| title | 面板标题 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | — |
|
||||
123
examples/docs/zh-CN/color-picker.md
Normal file
123
examples/docs/zh-CN/color-picker.md
Normal file
@@ -0,0 +1,123 @@
|
||||
## ColorPicker 颜色选择器
|
||||
|
||||
用于颜色选择，支持多种格式。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">有默认值</span>
|
||||
<el-color-picker v-model="color1"></el-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">无默认值</span>
|
||||
<el-color-picker v-model="color2"></el-color-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 选择透明度
|
||||
|
||||
:::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。
|
||||
```html
|
||||
<el-color-picker v-model="color" show-alpha></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(19, 206, 102, 0.8)'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 预定义颜色
|
||||
|
||||
:::demo ColorPicker 支持预定义颜色
|
||||
```html
|
||||
<el-color-picker
|
||||
v-model="color"
|
||||
show-alpha
|
||||
:predefine="predefineColors">
|
||||
</el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(255, 69, 0, 0.68)',
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-color-picker v-model="color"></el-color-picker>
|
||||
<el-color-picker v-model="color" size="medium"></el-color-picker>
|
||||
<el-color-picker v-model="color" size="small"></el-color-picker>
|
||||
<el-color-picker v-model="color" size="mini"></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| size | 尺寸 | string | medium / small / mini | — |
|
||||
| show-alpha | 是否支持透明度选择 | boolean | — | false |
|
||||
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
|
||||
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
|
||||
| predefine | 预定义颜色 | array | — | — |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 当绑定值变化时触发 | 当前值 |
|
||||
| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |
|
||||
244
examples/docs/zh-CN/color.md
Normal file
244
examples/docs/zh-CN/color.md
Normal file
@@ -0,0 +1,244 @@
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
import { tintColor } from '../../color.js';
|
||||
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
|
||||
const varMap = {
|
||||
'primary': '$--color-primary',
|
||||
'success': '$--color-success',
|
||||
'warning': '$--color-warning',
|
||||
'danger': '$--color-danger',
|
||||
'info': '$--color-info',
|
||||
'white': '$--color-white',
|
||||
'black': '$--color-black',
|
||||
'textPrimary': '$--color-text-primary',
|
||||
'textRegular': '$--color-text-regular',
|
||||
'textSecondary': '$--color-text-secondary',
|
||||
'textPlaceholder': '$--color-text-placeholder',
|
||||
'borderBase': '$--border-color-base',
|
||||
'borderLight': '$--border-color-light',
|
||||
'borderLighter': '$--border-color-lighter',
|
||||
'borderExtraLight': '$--border-color-extra-light'
|
||||
};
|
||||
const original = {
|
||||
primary: '#409EFF',
|
||||
success: '#67C23A',
|
||||
warning: '#E6A23C',
|
||||
danger: '#F56C6C',
|
||||
info: '#909399',
|
||||
white: '#FFFFFF',
|
||||
black: '#000000',
|
||||
textPrimary: '#303133',
|
||||
textRegular: '#606266',
|
||||
textSecondary: '#909399',
|
||||
textPlaceholder: '#C0C4CC',
|
||||
borderBase: '#DCDFE6',
|
||||
borderLight: '#E4E7ED',
|
||||
borderLighter: '#EBEEF5',
|
||||
borderExtraLight: '#F2F6FC'
|
||||
}
|
||||
export default {
|
||||
created() {
|
||||
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
|
||||
},
|
||||
mounted() {
|
||||
this.setGlobal();
|
||||
},
|
||||
methods: {
|
||||
tintColor(color, tint) {
|
||||
return tintColor(color, tint);
|
||||
},
|
||||
setGlobal() {
|
||||
if (window.userThemeConfig) {
|
||||
this.global = window.userThemeConfig.global;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
global: {},
|
||||
primary: '',
|
||||
success: '',
|
||||
warning: '',
|
||||
danger: '',
|
||||
info: '',
|
||||
white: '',
|
||||
black: '',
|
||||
textPrimary: '',
|
||||
textRegular: '',
|
||||
textSecondary: '',
|
||||
textPlaceholder: '',
|
||||
borderBase: '',
|
||||
borderLight: '',
|
||||
borderLighter: '',
|
||||
borderExtraLight: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
global: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
Object.keys(original).forEach((o) => {
|
||||
if (value[varMap[o]]) {
|
||||
this[o] = value[varMap[o]]
|
||||
} else {
|
||||
this[o] = original[o]
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
## Color 色彩
|
||||
|
||||
Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
|
||||
|
||||
### 主色
|
||||
|
||||
Element 主要品牌颜色是鲜艳、友好的蓝色。
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="10" :xs="{span: 12}">
|
||||
<div class="demo-color-box" :style="{ background: primary }">Brand Color
|
||||
<div class="value">#409EFF</div>
|
||||
<div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
|
||||
<div
|
||||
class="bg-blue-sub-item"
|
||||
v-for="(item, key) in Array(8)"
|
||||
:key="key"
|
||||
:style="{ background: tintColor(primary, (key + 1) / 10) }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### 辅助色
|
||||
|
||||
除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box"
|
||||
:style="{ background: success }"
|
||||
>Success<div class="value">#67C23A</div>
|
||||
<div
|
||||
class="bg-color-sub"
|
||||
>
|
||||
<div
|
||||
class="bg-success-sub-item"
|
||||
v-for="(item, key) in Array(2)"
|
||||
:key="key"
|
||||
:style="{ background: tintColor(success, (key + 8) / 10) }"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box"
|
||||
:style="{ background: warning }"
|
||||
>Warning<div class="value">#E6A23C</div>
|
||||
<div
|
||||
class="bg-color-sub"
|
||||
>
|
||||
<div
|
||||
class="bg-success-sub-item"
|
||||
v-for="(item, key) in Array(2)"
|
||||
:key="key"
|
||||
:style="{ background: tintColor(warning, (key + 8) / 10) }"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box"
|
||||
:style="{ background: danger }"
|
||||
>Danger<div class="value">#F56C6C</div>
|
||||
<div
|
||||
class="bg-color-sub"
|
||||
>
|
||||
<div
|
||||
class="bg-success-sub-item"
|
||||
v-for="(item, key) in Array(2)"
|
||||
:key="key"
|
||||
:style="{ background: tintColor(danger, (key + 8) / 10) }"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box"
|
||||
:style="{ background: info }"
|
||||
>Info<div class="value">#909399</div>
|
||||
<div
|
||||
class="bg-color-sub"
|
||||
>
|
||||
<div
|
||||
class="bg-success-sub-item"
|
||||
v-for="(item, key) in Array(2)"
|
||||
:key="key"
|
||||
:style="{ background: tintColor(info, (key + 8) / 10) }"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### 中性色
|
||||
|
||||
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: textPrimary }"
|
||||
>主要文字<div class="value">{{textPrimary}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: textRegular }"
|
||||
>
|
||||
常规文字<div class="value">{{textRegular}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: textSecondary }"
|
||||
>次要文字<div class="value">{{textSecondary}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: textPlaceholder }"
|
||||
>占位文字<div class="value">{{textPlaceholder}}</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
|
||||
:style="{ background: borderBase }"
|
||||
>一级边框<div class="value">{{borderBase}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
|
||||
:style="{ background: borderLight }"
|
||||
>二级边框<div class="value">{{borderLight}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
|
||||
:style="{ background: borderLighter }"
|
||||
>三级边框<div class="value">{{borderLighter}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
|
||||
:style="{ background: borderExtraLight }"
|
||||
>四级边框<div class="value">{{borderExtraLight}}</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="{span: 12}">
|
||||
<div class="demo-color-box-group">
|
||||
<div
|
||||
class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: black }"
|
||||
>基础黑色<div class="value">{{black}}</div></div>
|
||||
<div
|
||||
class="demo-color-box demo-color-box-other"
|
||||
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
|
||||
>基础白色<div class="value">{{white}}</div></div>
|
||||
<div class="demo-color-box demo-color-box-other bg-transparent">透明<div class="value">Transparent</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
240
examples/docs/zh-CN/container.md
Normal file
240
examples/docs/zh-CN/container.md
Normal file
@@ -0,0 +1,240 @@
|
||||
## Container 布局容器
|
||||
用于布局的容器组件，方便快速搭建页面的基本结构：
|
||||
|
||||
`<el-container>`：外层容器。当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列，否则会水平左右排列。
|
||||
|
||||
`<el-header>`：顶栏容器。
|
||||
|
||||
`<el-aside>`：侧边栏容器。
|
||||
|
||||
`<el-main>`：主要区域容器。
|
||||
|
||||
`<el-footer>`：底栏容器。
|
||||
|
||||
:::tip
|
||||
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`<el-container>` 的子元素只能是后四者，后四者的父元素也只能是 `<el-container>`。
|
||||
:::
|
||||
|
||||
### 常见页面布局
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 实例
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-container style="height: 500px; border: 1px solid #eee">
|
||||
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="3-1">选项1</el-menu-item>
|
||||
<el-menu-item index="3-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="3-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="3-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: right; font-size: 12px">
|
||||
<el-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>查看</el-dropdown-item>
|
||||
<el-dropdown-item>新增</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span>王小虎</span>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="date" label="日期" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
};
|
||||
return {
|
||||
tableData: Array(20).fill(item)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Container Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------|----------|---------|-------------|--------|
|
||||
| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal |
|
||||
|
||||
### Header Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------|----------|---------|-------------|--------|
|
||||
| height | 顶栏高度 | string | — | 60px |
|
||||
|
||||
### Aside Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------|----------|---------|-------------|--------|
|
||||
| width | 侧边栏宽度 | string | — | 300px |
|
||||
|
||||
### Footer Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------|----------|---------|-------------|--------|
|
||||
| height | 底栏高度 | string | — | 60px |
|
||||
131
examples/docs/zh-CN/custom-theme.md
Normal file
131
examples/docs/zh-CN/custom-theme.md
Normal file
@@ -0,0 +1,131 @@
|
||||
## 自定义主题
|
||||
Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
|
||||
|
||||
### 主题编辑器
|
||||
使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。
|
||||
|
||||
也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，在任何使用 Element 开发的网站上配置并实时预览主题。
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### 仅替换主题色
|
||||
如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
|
||||
|
||||
使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
|
||||
|
||||
### 在项目中改变 SCSS 变量
|
||||
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
|
||||
```html
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import './element-variables.scss'
|
||||
|
||||
Vue.use(Element)
|
||||
```
|
||||
|
||||
:::tip
|
||||
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
|
||||
:::
|
||||
|
||||
### 命令行主题工具
|
||||
如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
|
||||
|
||||
#### <strong>安装工具</strong>
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
```shell
|
||||
# 从 npm
|
||||
npm i element-theme-chalk -D
|
||||
|
||||
# 从 GitHub
|
||||
npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>初始化变量文件</strong>
|
||||
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。
|
||||
|
||||
```shell
|
||||
et -i [可以自定义变量文件]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #e6a23c !default;
|
||||
$--color-danger: #f56c6c !default;
|
||||
$--color-info: #909399 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
#### <strong>修改变量</strong>
|
||||
直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>编译主题</strong>
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
### 使用自定义主题
|
||||
#### <strong>引入自定义主题</strong>
|
||||
和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。
|
||||
|
||||
```javascript
|
||||
import '../theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
#### <strong>搭配插件按需引入组件主题</strong>
|
||||
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
438
examples/docs/zh-CN/date-picker.md
Normal file
438
examples/docs/zh-CN/date-picker.md
Normal file
@@ -0,0 +1,438 @@
|
||||
|
||||
## DatePicker 日期选择器
|
||||
|
||||
用于选择或输入日期
|
||||
|
||||
### 选择日
|
||||
|
||||
以「日」为基本单位，基础的日期选择控件
|
||||
|
||||
:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`，禁用日期通过 `disabledDate` 设置，传入函数
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
align="right"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 其他日期单位
|
||||
|
||||
通过扩展基础的日期选择，可以选择周、月、年或多个日期
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="block">
|
||||
<span class="demonstration">周</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">月</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="month"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="block">
|
||||
<span class="demonstration">年</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="year"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">多个日期</span>
|
||||
<el-date-picker
|
||||
type="dates"
|
||||
v-model="value4"
|
||||
placeholder="选择一个或多个日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 选择日期范围
|
||||
|
||||
可在一个选择器中便捷地选择一个时间范围
|
||||
|
||||
:::demo 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用`unlink-panels`属性解除联动。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 选择月份范围
|
||||
|
||||
可在一个选择器中便捷地选择一个月份范围
|
||||
|
||||
:::demo 在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用`unlink-panels`属性解除联动。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '本月',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', [new Date(), new Date()]);
|
||||
}
|
||||
}, {
|
||||
text: '今年至今',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date(new Date().getFullYear(), 0);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近六个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setMonth(start.getMonth() - 6);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 日期格式
|
||||
|
||||
使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
|
||||
|
||||
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
|
||||
:::warning
|
||||
请注意大小写
|
||||
:::
|
||||
|
||||
| 格式 | 含义 | 备注 | 举例 |
|
||||
|------|------|------|------|------|
|
||||
| `yyyy` | 年 | | 2017 |
|
||||
| `M` | 月 | 不补0 | 1 |
|
||||
| `MM` | 月 | | 01 |
|
||||
| `W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
|
||||
| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
|
||||
| `d` | 日 | 不补0 | 2 |
|
||||
| `dd` | 日 | | 02 |
|
||||
| `H` | 小时 | 24小时制；不补0 | 3 |
|
||||
| `HH` | 小时 | 24小时制 | 03 |
|
||||
| `h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
|
||||
| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
|
||||
| `m` | 分钟 | 不补0 | 4 |
|
||||
| `mm` | 分钟 | | 04 |
|
||||
| `s` | 秒 | 不补0 | 5 |
|
||||
| `ss` | 秒 | | 05 |
|
||||
| `A` | AM/PM | 仅 `format` 可用，大写 | AM |
|
||||
| `a` | am/pm | 仅 `format` 可用，小写 | am |
|
||||
| `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |
|
||||
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认为 Date 对象</span>
|
||||
<div class="demonstration">值：{{ value1 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">使用 value-format</span>
|
||||
<div class="demonstration">值：{{ value2 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">时间戳</span>
|
||||
<div class="demonstration">值：{{ value3 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
value-format="timestamp">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 默认显示日期
|
||||
|
||||
在选择日期范围时，指定起始日期和结束日期的默认时刻。
|
||||
|
||||
:::demo 选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过`default-time`可以分别指定二者的具体时刻。`default-time`接受一个数组，其中的值为形如`12:00:00`的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<p>组件值：{{ value }}</p>
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | — | '-' |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
|
||||
|
||||
### Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
|
||||
| cellClassName | 设置日期的 className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | 标题文本 | string | — | — |
|
||||
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
|
||||
| blur | 当 input 失去焦点时触发 | 组件实例 |
|
||||
| focus | 当 input 获得焦点时触发 | 组件实例 |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
245
examples/docs/zh-CN/datetime-picker.md
Normal file
245
examples/docs/zh-CN/datetime-picker.md
Normal file
@@ -0,0 +1,245 @@
|
||||
## DateTimePicker 日期时间选择器
|
||||
|
||||
在同一个选择器里选择日期和时间
|
||||
|
||||
:::tip
|
||||
DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其他选项可以参照 DatePicker 和 TimePicker。
|
||||
:::
|
||||
|
||||
### 日期和时间点
|
||||
|
||||
:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
align="right"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">设置默认时间</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
default-time="12:00:00">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 日期和时间范围
|
||||
|
||||
:::demo 设置`type`为`datetimerange`即可选择日期和时间范围
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">带快捷选项</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 默认的起始与结束时刻
|
||||
|
||||
:::demo 使用`datetimerange`进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的`00:00:00`作为起始与结束的时刻；通过选项`default-time`可以控制选中起始与结束日期时所使用的具体时刻。`default-time`接受一个数组，数组每项值为字符串，形如`12:00:00`，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['12:00:00']">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['12:00:00', '08:00:00']">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| default-time | 选中日期后的默认具体时刻 | 非范围选择时：string / 范围选择时：string[] | 非范围选择时：形如`12:00:00`的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 `00:00:00` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||
|
||||
### Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
|
||||
| cellClassName | 设置日期的 className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | 标题文本 | string | — | — |
|
||||
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
|
||||
| blur | 当 input 失去焦点时触发 | 组件实例 |
|
||||
| focus | 当 input 获得焦点时触发 | 组件实例 |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
|
||||
### Slots
|
||||
| Name | 说明 |
|
||||
|---------|-------------|
|
||||
| range-separator | 自定义分隔符 |
|
||||
237
examples/docs/zh-CN/dialog.md
Normal file
237
examples/docs/zh-CN/dialog.md
Normal file
@@ -0,0 +1,237 @@
|
||||
## Dialog 对话框
|
||||
在保留当前页面状态的情况下，告知用户并承载相关操作。
|
||||
|
||||
### 基本用法
|
||||
|
||||
Dialog 弹出一个对话框，适合需要定制性更大的场景。
|
||||
|
||||
:::demo 需要设置`visible`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了`before-close`的用法。
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
`before-close` 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 `footer` 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 `before-close` 的相关逻辑。
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
|
||||
Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 嵌套的 Dialog
|
||||
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 `append-to-body` 属性。
|
||||
:::demo 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了`append-to-body`属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
|
||||
|
||||
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog
|
||||
width="30%"
|
||||
title="内层 Dialog"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
outerVisible: false,
|
||||
innerVisible: false
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 居中布局
|
||||
|
||||
标题和底部可水平居中
|
||||
|
||||
:::demo 将`center`设置为`true`即可使标题和底部居中。`center`仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="centerDialogVisible"
|
||||
width="30%"
|
||||
center>
|
||||
<span>需要注意的是内容是默认不居中的</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
centerDialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
|
||||
:::
|
||||
|
||||
:::tip
|
||||
如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Dialog 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| visible | 是否显示 Dialog，支持 .sync 修饰符 | boolean | — | false |
|
||||
| title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
|
||||
| width | Dialog 的宽度 | string | — | 50% |
|
||||
| fullscreen | 是否为全屏 Dialog | boolean | — | false |
|
||||
| top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
| modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true |
|
||||
| append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false |
|
||||
| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
|
||||
| custom-class | Dialog 的自定义类名 | string | — | — |
|
||||
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
|
||||
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
|
||||
| show-close | 是否显示关闭按钮 | boolean | — | true |
|
||||
| before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |
|
||||
| center | 是否对头部和底部采用居中布局 | boolean | — | false |
|
||||
| destroy-on-close | 关闭时销毁 Dialog 中的元素 | boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | Dialog 的内容 |
|
||||
| title | Dialog 标题区的内容 |
|
||||
| footer | Dialog 按钮操作区的内容 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| open | Dialog 打开的回调 | — |
|
||||
| opened | Dialog 打开动画结束时的回调 | — |
|
||||
| close | Dialog 关闭的回调 | — |
|
||||
| closed | Dialog 关闭动画结束时的回调 | — |
|
||||
61
examples/docs/zh-CN/divider.md
Normal file
61
examples/docs/zh-CN/divider.md
Normal file
@@ -0,0 +1,61 @@
|
||||
## Divider 分割线
|
||||
|
||||
区隔内容的分割线。
|
||||
|
||||
### 基础用法
|
||||
|
||||
对不同章节的文本段落进行分割。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
|
||||
<el-divider></el-divider>
|
||||
<span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 设置文案
|
||||
|
||||
可以在分割线上自定义文案内容。
|
||||
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<span>头上一片晴天，心中一个想念</span>
|
||||
<el-divider content-position="left">少年包青天</el-divider>
|
||||
<span>饿了别叫妈, 叫饿了么</span>
|
||||
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
|
||||
<span>为了无法计算的价值</span>
|
||||
<el-divider content-position="right">阿里云</el-divider>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 垂直分割
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<span>雨纷纷</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<span>旧故里</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<span>草木深</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Divider Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| direction | 设置分割线方向 | string | horizontal / vertical | horizontal |
|
||||
| content-position | 设置分割线文案的位置 | string | left / right / center | center |
|
||||
307
examples/docs/zh-CN/drawer.md
Normal file
307
examples/docs/zh-CN/drawer.md
Normal file
@@ -0,0 +1,307 @@
|
||||
## Drawer 抽屉
|
||||
|
||||
有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.
|
||||
|
||||
### 基本用法
|
||||
|
||||
呼出一个临时的侧边栏, 可以从多个方向呼出
|
||||
|
||||
:::demo 需要设置 `visible` 属性，它的**类型**是 `boolean`,当为 **true** 时显示 Drawer。Drawer 分为两个部分：`title` 和 `body`，`title` 需要具名为 **title** 的 `slot`, 也可以通过 `title` 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 `direction`, 详细请参考 `direction` 用法 最后，本例还展示了 `before-close` 的用法
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="direction">
|
||||
<el-radio label="ltr">从左往右开</el-radio>
|
||||
<el-radio label="rtl">从右往左开</el-radio>
|
||||
<el-radio label="ttb">从上往下开</el-radio>
|
||||
<el-radio label="btt">从下往上开</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是标题"
|
||||
:visible.sync="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
direction: 'rtl',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('确认关闭？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不添加 Title
|
||||
|
||||
当你不需要标题到时候, 你还可以去掉标题
|
||||
|
||||
:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
|
||||
|
||||
```html
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是标题"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义内容
|
||||
|
||||
和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
|
||||
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
|
||||
<el-drawer
|
||||
title="我嵌套了表格!"
|
||||
:visible.sync="table"
|
||||
direction="rtl"
|
||||
size="50%">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer
|
||||
title="我嵌套了 Form !"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="dialog"
|
||||
direction="ltr"
|
||||
custom-class="demo-drawer"
|
||||
ref="drawer"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
table: false,
|
||||
dialog: false,
|
||||
loading: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要提交表单吗？')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 多层嵌套
|
||||
|
||||
`Drawer` 组件也拥有多层嵌套的方法
|
||||
|
||||
:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
|
||||
|
||||
```html
|
||||
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是外面的 Drawer"
|
||||
:visible.sync="drawer"
|
||||
size="50%">
|
||||
<div>
|
||||
<el-button @click="innerDrawer = true">打开里面的!</el-button>
|
||||
<el-drawer
|
||||
title="我是里面的"
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="innerDrawer">
|
||||
<p>_(:зゝ∠)_</p>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
innerDrawer: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('还有未保存的工作哦确定关闭吗？')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Drawer 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
|
||||
|
||||
:::
|
||||
|
||||
### Drawer Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | — | false |
|
||||
| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
|
||||
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean | — | true |
|
||||
| custom-class | Drawer 的自定义类名 | string | — | — |
|
||||
| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
| modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上 | boolean | — | true |
|
||||
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | 是否显示关闭按钮 | boolean | — | true |
|
||||
| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
|
||||
| title | Drawer 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
|
||||
| visible | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false |
|
||||
| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
|
||||
| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | Drawer 的内容 |
|
||||
| title | Drawer 标题区的内容 |
|
||||
|
||||
### Drawer Methods
|
||||
|
||||
| name | 说明 |
|
||||
| ---- | --- |
|
||||
| closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
|
||||
|
||||
### Drawer Events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| open | Drawer 打开的回调 | — |
|
||||
| opened | Drawer 打开动画结束时的回调 | — |
|
||||
| close | Drawer 关闭的回调 | — |
|
||||
| closed | Drawer 关闭动画结束时的回调 | — |
|
||||
307
examples/docs/zh-CN/dropdown.md
Normal file
307
examples/docs/zh-CN/dropdown.md
Normal file
@@ -0,0 +1,307 @@
|
||||
## Dropdown 下拉菜单
|
||||
|
||||
将动作或菜单折叠到下拉菜单中。
|
||||
|
||||
### 基础用法
|
||||
|
||||
移动到下拉菜单上，展开更多操作。
|
||||
|
||||
:::demo 通过组件`slot`来设置下拉触发的元素以及需要通过具名`slot`为`dropdown` 来设置下拉菜单。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 触发对象
|
||||
|
||||
可使用按钮触发下拉菜单。
|
||||
|
||||
:::demo 设置`split-button`属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为`true`即可。
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown split-button type="primary" @click="handleClick">
|
||||
更多菜单
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
}
|
||||
.el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 触发方式
|
||||
|
||||
可以配置 click 激活或者 hover 激活。
|
||||
|
||||
:::demo 在`trigger`属性设置为`click`即可。
|
||||
```html
|
||||
<el-row class="block-col-2">
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">hover 激活</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">click 激活</span>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 菜单隐藏方式
|
||||
|
||||
可以`hide-on-click`属性来配置。
|
||||
|
||||
:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。
|
||||
```html
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 指令事件
|
||||
|
||||
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="a">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item command="b">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
|
||||
|
||||
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<el-dropdown split-button type="primary">
|
||||
默认尺寸
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="medium" split-button type="primary">
|
||||
中等尺寸
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="small" split-button type="primary">
|
||||
小型尺寸
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="mini" split-button type="primary">
|
||||
超小尺寸
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
### Dropdown Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
|
||||
| size | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效 | string | medium / small / mini | — |
|
||||
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
|
||||
| placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | 触发下拉的行为 | string | hover, click | hover |
|
||||
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true |
|
||||
| show-timeout | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 250 |
|
||||
| hide-timeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 150 |
|
||||
| tabindex | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| — | 触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件 |
|
||||
| dropdown | 下拉列表，通常是 `<el-dropdown-menu>` 组件 |
|
||||
|
||||
### Dropdown Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| click | `split-button` 为 true 时，点击左侧按钮的回调 | — |
|
||||
| command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
|
||||
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
|
||||
|
||||
### Dropdown Menu Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| command | 指令 | string/number/object | — | — |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| divided | 显示分割线 | boolean | — | false |
|
||||
| icon | 图标类名 | string | — | — |
|
||||
645
examples/docs/zh-CN/form.md
Normal file
645
examples/docs/zh-CN/form.md
Normal file
@@ -0,0 +1,645 @@
|
||||
## Form 表单
|
||||
|
||||
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
|
||||
|
||||
### 典型表单
|
||||
|
||||
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
|
||||
|
||||
:::demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：
|
||||
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
|
||||
|
||||
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。
|
||||
:::
|
||||
|
||||
### 行内表单
|
||||
|
||||
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
|
||||
|
||||
:::demo 设置 `inline` 属性可以让表单域变为行内的表单域
|
||||
```html
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="审批人">
|
||||
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 对齐方式
|
||||
|
||||
根据具体目标和制约因素，选择最佳的标签对齐方式。
|
||||
|
||||
:::demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
|
||||
```html
|
||||
<el-radio-group v-model="labelPosition" size="small">
|
||||
<el-radio-button label="left">左对齐</el-radio-button>
|
||||
<el-radio-button label="right">右对齐</el-radio-button>
|
||||
<el-radio-button label="top">顶部对齐</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 20px;"></div>
|
||||
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-input v-model="formLabelAlign.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 表单验证
|
||||
|
||||
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
|
||||
|
||||
:::demo Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并将 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
|
||||
```html
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式" prop="desc">
|
||||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: '请选择活动资源', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请填写活动形式', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义校验规则
|
||||
|
||||
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
|
||||
|
||||
:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
|
||||
```html
|
||||
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="密码" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input v-model.number="ruleForm.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('年龄不能为空'));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('请输入数字值'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('必须年满18岁'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else {
|
||||
if (this.ruleForm.checkPass !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm.pass) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
checkPass: [
|
||||
{ validator: validatePass2, trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ validator: checkAge, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
自定义校验 callback 必须被调用。 更多高级用法可参考 [async-validator](https://github.com/yiminghe/async-validator)。
|
||||
:::
|
||||
|
||||
### 动态增减表单项
|
||||
|
||||
:::demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
|
||||
```html
|
||||
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
|
||||
<el-form-item
|
||||
prop="email"
|
||||
label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in dynamicValidateForm.domains"
|
||||
:label="'域名' + index"
|
||||
:key="domain.key"
|
||||
:prop="'domains.' + index + '.value'"
|
||||
:rules="{
|
||||
required: true, message: '域名不能为空', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
|
||||
<el-button @click="addDomain">新增域名</el-button>
|
||||
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicValidateForm: {
|
||||
domains: [{
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicValidateForm.domains.indexOf(item)
|
||||
if (index !== -1) {
|
||||
this.dynamicValidateForm.domains.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicValidateForm.domains.push({
|
||||
value: '',
|
||||
key: Date.now()
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 数字类型验证
|
||||
|
||||
:::demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
|
||||
```html
|
||||
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
label="年龄"
|
||||
prop="age"
|
||||
:rules="[
|
||||
{ required: true, message: '年龄不能为空'},
|
||||
{ type: 'number', message: '年龄必须为数字值'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
numberValidateForm: {
|
||||
age: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。
|
||||
:::
|
||||
|
||||
### 表单内组件尺寸控制
|
||||
|
||||
通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
|
||||
|
||||
:::demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
|
||||
```html
|
||||
<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="sizeForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="线上品牌商赞助"></el-radio>
|
||||
<el-radio border label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model | 表单数据对象 | object | — | — |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| inline | 行内表单模式 | boolean | — | false |
|
||||
| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string | right/left/top | right |
|
||||
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
|
||||
| label-suffix | 表单域标签的后缀 | string | — | — |
|
||||
| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
|
||||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
| inline-message | 是否以行内形式展示校验信息 | boolean | — | false |
|
||||
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
|
||||
| validate-on-rule-change | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |
|
||||
| size | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
|
||||
|
||||
### Form Methods
|
||||
|
||||
| 方法名 | 说明 | 参数
|
||||
|---------- |-------------- | --------------
|
||||
| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))
|
||||
| validateField | 对部分表单字段进行校验的方法 | Function(props: array \| string, callback: Function(errorMessage: string))
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —
|
||||
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array \| string)
|
||||
|
||||
### Form Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|--------- |-------- |---------- |
|
||||
| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在） |
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 `model` 中的字段 | — |
|
||||
| label | 标签文本 | string | — | — |
|
||||
| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string | — | — |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
|
||||
| show-message | 是否显示校验错误信息 | boolean | — | true |
|
||||
| inline-message | 以行内形式展示校验信息 | boolean | — | false |
|
||||
| size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | Form Item 的内容 |
|
||||
| label | 标签文本的内容 |
|
||||
|
||||
### Form-Item Scoped Slot
|
||||
| name | 说明 |
|
||||
|--------|--------|
|
||||
| error | 自定义表单校验信息的显示方式，参数为 { error } |
|
||||
|
||||
### Form-Item Methods
|
||||
|
||||
| 方法名 | 说明 | 参数
|
||||
|---------- |-------------- | --------------
|
||||
| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -
|
||||
| clearValidate | 移除该表单项的校验结果 | -
|
||||
228
examples/docs/zh-CN/i18n.md
Normal file
228
examples/docs/zh-CN/i18n.md
Normal file
@@ -0,0 +1,228 @@
|
||||
## 国际化
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
|
||||
```javascript
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```javascript
|
||||
// 按需引入 Element
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// 设置语言
|
||||
locale.use(lang)
|
||||
|
||||
// 引入组件
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
|
||||
|
||||
**webpack.config.js**
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 兼容 `vue-i18n@5.x`
|
||||
|
||||
Element 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(Element)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## 兼容其他 i18n 插件
|
||||
如果不使用 `vue-i18n@5.x`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 兼容 `vue-i18n@6.x`
|
||||
|
||||
默认不支持 6.x 的 `vue-i18n`，你需要手动处理。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
```
|
||||
|
||||
## 按需加载里定制 i18n
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import ElementLocale from 'element-ui/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
```
|
||||
|
||||
## 通过 CDN 的方式加载语言文件
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
ELEMENT.locale(ELEMENT.lang.en)
|
||||
</script>
|
||||
```
|
||||
|
||||
搭配 `vue-i18n` 使用
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
</script>
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
<ul class="language-list">
|
||||
<li>简体中文（zh-CN）</li>
|
||||
<li>英语（en）</li>
|
||||
<li>德语（de）</li>
|
||||
<li>葡萄牙语（pt）</li>
|
||||
<li>西班牙语（es）</li>
|
||||
<li>丹麦语（da）</li>
|
||||
<li>法语（fr）</li>
|
||||
<li>挪威语（nb-NO）</li>
|
||||
<li>繁体中文（zh-TW）</li>
|
||||
<li>意大利语（it）</li>
|
||||
<li>韩语（ko）</li>
|
||||
<li>日语（ja）</li>
|
||||
<li>荷兰语（nl）</li>
|
||||
<li>越南语（vi）</li>
|
||||
<li>俄语（ru-RU）</li>
|
||||
<li>土耳其语（tr-TR）</li>
|
||||
<li>巴西葡萄牙语（pt-br）</li>
|
||||
<li>波斯语（fa）</li>
|
||||
<li>泰语（th）</li>
|
||||
<li>印尼语（id）</li>
|
||||
<li>保加利亚语（bg）</li>
|
||||
<li>波兰语（pl）</li>
|
||||
<li>芬兰语（fi）</li>
|
||||
<li>瑞典语（sv-SE）</li>
|
||||
<li>希腊语（el）</li>
|
||||
<li>斯洛伐克语（sk）</li>
|
||||
<li>加泰罗尼亚语（ca）</li>
|
||||
<li>捷克语（cs-CZ）</li>
|
||||
<li>乌克兰语（ua）</li>
|
||||
<li>土库曼语（tk）</li>
|
||||
<li>泰米尔语（ta）</li>
|
||||
<li>拉脱维亚语（lv）</li>
|
||||
<li>南非荷兰语（af-ZA）</li>
|
||||
<li>爱沙尼亚语（ee）</li>
|
||||
<li>斯洛文尼亚语（sl）</li>
|
||||
<li>阿拉伯语（ar）</li>
|
||||
<li>希伯来语（he）</li>
|
||||
<li>立陶宛语（lt）</li>
|
||||
<li>蒙古语（mn）</li>
|
||||
<li>哈萨克斯坦语（kz）</li>
|
||||
<li>匈牙利语（hu）</li>
|
||||
<li>罗马尼亚语（ro）</li>
|
||||
<li>库尔德语（ku）</li>
|
||||
<li>维吾尔语（ug-CN）</li>
|
||||
<li>高棉语（km）</li>
|
||||
<li>塞尔维亚语（sr）</li>
|
||||
<li>巴斯克语（eu）</li>
|
||||
<li>吉尔吉斯语（kg）</li>
|
||||
<li>亚美尼亚语 (hy)</li>
|
||||
<li>克罗地亚 (hr)</li>
|
||||
<li>世界语 (eo)</li>
|
||||
</ul>
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
|
||||
28
examples/docs/zh-CN/icon.md
Normal file
28
examples/docs/zh-CN/icon.md
Normal file
@@ -0,0 +1,28 @@
|
||||
## Icon 图标
|
||||
|
||||
提供了一套常用的图标集合。
|
||||
|
||||
### 使用方法
|
||||
|
||||
直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 图标集合
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in $icon" :key="name">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
<span class="icon-name">{{'el-icon-' + name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
163
examples/docs/zh-CN/image.md
Normal file
163
examples/docs/zh-CN/image.md
Normal file
@@ -0,0 +1,163 @@
|
||||
## Image 图片
|
||||
图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 可通过`fit`确定图片如何适应到容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
|
||||
```html
|
||||
<div class="demo-image">
|
||||
<div class="block" v-for="fit in fits" :key="fit">
|
||||
<span class="demonstration">{{ fit }}</span>
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="url"
|
||||
:fit="fit"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 占位内容
|
||||
|
||||
:::demo 可通过`slot = placeholder`可自定义占位内容
|
||||
```html
|
||||
<div class="demo-image__placeholder">
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-image :src="src"></el-image>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">自定义</span>
|
||||
<el-image :src="src">
|
||||
<div slot="placeholder" class="image-slot">
|
||||
加载中<span class="dot">...</span>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 加载失败
|
||||
|
||||
:::demo 可通过`slot = error`可自定义加载失败内容
|
||||
```html
|
||||
<div class="demo-image__error">
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-image></el-image>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">自定义</span>
|
||||
<el-image>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 懒加载
|
||||
|
||||
:::demo 可通过`lazy`开启懒加载功能，当图片滚动到可视范围内才会加载。可通过`scroll-container`来设置滚动容器，若未定义，则为最近一个`overflow`值为`auto`或`scroll`的父元素。
|
||||
```html
|
||||
<div class="demo-image__lazy">
|
||||
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urls: [
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 大图预览
|
||||
|
||||
:::demo 可通过 `previewSrcList` 开启预览大图的功能。
|
||||
```html
|
||||
<div class="demo-image__preview">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="url"
|
||||
:preview-src-list="srcList">
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
srcList: [
|
||||
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| src | 图片源，同原生 | string | — | - |
|
||||
| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
|
||||
| alt | 原生 alt | string | - | - |
|
||||
| referrer-policy | 原生 referrerPolicy | string | - | - |
|
||||
| lazy | 是否开启懒加载 | boolean | — | false |
|
||||
| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
|
||||
| preview-src-list | 开启图片预览功能 | Array | — | - |
|
||||
| z-index | 设置图片预览的 z-index | Number | — | 2000 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| load | 图片加载成功触发 | (e: Event) |
|
||||
| error | 图片加载失败触发 | (e: Error) |
|
||||
|
||||
### Slots
|
||||
| 名称 | 说明 |
|
||||
|---------|-------------|
|
||||
| placeholder | 图片未加载的占位内容 |
|
||||
| error | 加载失败的内容 |
|
||||
|
||||
|
||||
87
examples/docs/zh-CN/infiniteScroll.md
Normal file
87
examples/docs/zh-CN/infiniteScroll.md
Normal file
@@ -0,0 +1,87 @@
|
||||
## InfiniteScroll 无限滚动
|
||||
|
||||
滚动至底部时，加载更多数据。
|
||||
|
||||
### 基础用法
|
||||
在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
|
||||
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
count: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
this.count += 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用加载
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="infinite-list-wrapper" style="overflow:auto">
|
||||
<ul
|
||||
class="list"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled">
|
||||
<li v-for="i in count" class="list-item">{{ i }}</li>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">没有更多了</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
count: 10,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
noMore () {
|
||||
return this.count >= 20
|
||||
},
|
||||
disabled () {
|
||||
return this.loading || this.noMore
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.count += 2
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
|
||||
| infinite-scroll-disabled | 是否禁用 | boolean | - |false |
|
||||
| infinite-scroll-delay | 节流时延，单位为ms | number | - |200 |
|
||||
| infinite-scroll-distance| 触发加载的距离阈值，单位为px | number |- |0 |
|
||||
| infinite-scroll-immediate | 是否立即执行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true |
|
||||
196
examples/docs/zh-CN/input-number.md
Normal file
196
examples/docs/zh-CN/input-number.md
Normal file
@@ -0,0 +1,196 @@
|
||||
## InputNumber 计数器
|
||||
|
||||
仅允许输入标准的数字值，可定义范围
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo `disabled`属性接受一个`Boolean`，设置为`true`即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置`min`属性和`max`属性，不设置`min`和`max`时，最小值为 0。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" :disabled="true"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 步数
|
||||
|
||||
允许定义递增递减的步数控制
|
||||
|
||||
:::demo 设置`step`属性可以控制步长，接受一个`Number`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" :step="2"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 严格步数
|
||||
|
||||
:::demo `step-strictly`属性接受一个`Boolean`。如果这个属性被设置为`true`，则只能输入步数的倍数。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 2
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 精度
|
||||
|
||||
:::demo 设置 `precision` 属性可以控制数值精度，接收一个 `Number`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
`precision` 的值必须是一个非负整数，并且不能小于 `step` 的小数位数。
|
||||
:::
|
||||
|
||||
### 尺寸
|
||||
|
||||
额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
<el-input-number size="medium" v-model="num2"></el-input-number>
|
||||
<el-input-number size="small" v-model="num3"></el-input-number>
|
||||
<el-input-number size="mini" v-model="num4"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1,
|
||||
num3: 1,
|
||||
num4: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮位置
|
||||
|
||||
:::demo 设置 `controls-position` 属性可以控制按钮位置。
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||
| step | 计数器步长 | number | — | 1 |
|
||||
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
|
||||
| precision| 数值精度 | number | — | — |
|
||||
| size | 计数器尺寸 | string | large, small | — |
|
||||
| disabled | 是否禁用计数器 | boolean | — | false |
|
||||
| controls | 是否使用控制按钮 | boolean | — | true |
|
||||
| controls-position | 控制按钮位置 | string | right | - |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| label | 输入框关联的label文字 | string | — | — |
|
||||
| placeholder | 输入框默认 placeholder | string | - | - |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 绑定值被改变时触发 | currentValue, oldValue |
|
||||
| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在组件 Input 获得焦点时触发 | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| select | 选中 input 中的文字 | — |
|
||||
777
examples/docs/zh-CN/input.md
Normal file
777
examples/docs/zh-CN/input.md
Normal file
@@ -0,0 +1,777 @@
|
||||
## Input 输入框
|
||||
|
||||
通过鼠标或键盘输入字符
|
||||
|
||||
:::warning
|
||||
Input 为受控组件，它**总会显示 Vue 绑定值**。
|
||||
|
||||
通常情况下，应当处理 `input` 事件，并更新组件的绑定值（或使用`v-model`）。否则，输入框内显示的值将不会改变。
|
||||
|
||||
不支持 `v-model` 修饰符。
|
||||
:::
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 通过 `disabled` 属性指定是否禁用 input 组件
|
||||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可清空
|
||||
|
||||
:::demo 使用`clearable`属性即可得到一个可清空的输入框
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 密码框
|
||||
|
||||
:::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框
|
||||
|
||||
```html
|
||||
<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带 icon 的输入框
|
||||
|
||||
带有图标标记输入类型
|
||||
|
||||
:::demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
|
||||
```html
|
||||
<div class="demo-input-suffix">
|
||||
属性方式：
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
slot 方式：
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
v-model="input3">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input4">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文本域
|
||||
|
||||
用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。
|
||||
|
||||
:::demo 文本域高度可通过 `rows` 属性控制
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可自适应文本高度的文本域
|
||||
|
||||
通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea1">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea1: '',
|
||||
textarea2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 复合型输入框
|
||||
|
||||
可前置或后置元素，一般为标签或按钮
|
||||
|
||||
:::demo 可通过 slot 来指定在 input 中前置或者后置内容。
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="请输入内容" v-model="input1">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input2">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 尺寸
|
||||
|
||||
:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input1">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input3">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带输入建议
|
||||
|
||||
根据输入内容提供对应的输入建议
|
||||
|
||||
:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
|
||||
```html
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">激活即列出输入建议</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">输入后匹配输入建议</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state1: '',
|
||||
state2: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var restaurants = this.restaurants;
|
||||
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
|
||||
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
|
||||
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
|
||||
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
|
||||
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
|
||||
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
|
||||
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
|
||||
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
|
||||
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
|
||||
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
|
||||
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
|
||||
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
|
||||
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
|
||||
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
|
||||
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
|
||||
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
|
||||
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
|
||||
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
|
||||
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
|
||||
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
|
||||
{ "value": "钱记", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
|
||||
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
|
||||
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
|
||||
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
|
||||
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
|
||||
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
|
||||
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
|
||||
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
|
||||
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
|
||||
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
|
||||
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
|
||||
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
|
||||
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
|
||||
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
|
||||
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
|
||||
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
|
||||
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
|
||||
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
|
||||
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
|
||||
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
|
||||
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
|
||||
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义模板
|
||||
|
||||
可自定义输入建议的显示
|
||||
|
||||
:::demo 使用`scoped slot`自定义输入建议的模板。该 scope 的参数为`item`，表示当前输入建议对象。
|
||||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect">
|
||||
<i
|
||||
class="el-icon-edit el-input__icon"
|
||||
slot="suffix"
|
||||
@click="handleIconClick">
|
||||
</i>
|
||||
<template slot-scope="{ item }">
|
||||
<div class="name">{{ item.value }}</div>
|
||||
<span class="addr">{{ item.address }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
<style>
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var restaurants = this.restaurants;
|
||||
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
|
||||
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
|
||||
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
|
||||
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
|
||||
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
|
||||
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
|
||||
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
|
||||
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
|
||||
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
|
||||
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
|
||||
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
|
||||
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
|
||||
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
|
||||
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
|
||||
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
|
||||
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
|
||||
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
|
||||
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
|
||||
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
|
||||
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
|
||||
{ "value": "钱记", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
|
||||
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
|
||||
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
|
||||
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
|
||||
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
|
||||
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
|
||||
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
|
||||
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
|
||||
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
|
||||
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
|
||||
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
|
||||
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
|
||||
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
|
||||
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
|
||||
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
|
||||
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
|
||||
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
|
||||
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
|
||||
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
|
||||
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
|
||||
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
|
||||
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 远程搜索
|
||||
|
||||
从服务端搜索数据
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
restaurants: [],
|
||||
state: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
|
||||
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
|
||||
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
|
||||
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
|
||||
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
|
||||
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
|
||||
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
|
||||
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
|
||||
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
|
||||
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
|
||||
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
|
||||
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
|
||||
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
|
||||
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
|
||||
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
|
||||
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
|
||||
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
|
||||
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
|
||||
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
|
||||
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
|
||||
{ "value": "钱记", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
|
||||
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
|
||||
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
|
||||
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
|
||||
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
|
||||
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
|
||||
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
|
||||
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
|
||||
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
|
||||
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
|
||||
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
|
||||
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
|
||||
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
|
||||
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
|
||||
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
|
||||
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
|
||||
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
|
||||
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||||
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
|
||||
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
|
||||
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
|
||||
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
|
||||
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
|
||||
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
|
||||
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
|
||||
];
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var restaurants = this.restaurants;
|
||||
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.restaurants = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 输入长度限制
|
||||
|
||||
:::demo `maxlength` 和 `minlength` 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框，在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `show-word-limit` 属性来展示字数统计。
|
||||
```html
|
||||
<el-input
|
||||
type="text"
|
||||
placeholder="请输入内容"
|
||||
v-model="text"
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
maxlength="30"
|
||||
show-word-limit
|
||||
>
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | 类型 | string | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||||
| value / v-model | 绑定值 | string / number | — | — |
|
||||
| maxlength | 原生属性，最大输入长度 | number | — | — |
|
||||
| minlength | 原生属性，最小输入长度 | number | — | — |
|
||||
| show-word-limit | 是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效 | boolean | — | false |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| clearable | 是否可清空 | boolean | — | false |
|
||||
| show-password | 是否显示切换密码图标| boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | — |
|
||||
| prefix-icon | 输入框头部图标 | string | — | — |
|
||||
| suffix-icon | 输入框尾部图标 | string | — | — |
|
||||
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
|
||||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||||
| autocomplete | 原生属性，自动补全 | string | on, off | off |
|
||||
| auto-complete | 下个主版本弃用 | string | on, off | off |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| readonly | 原生属性，是否只读 | boolean | — | false |
|
||||
| max | 原生属性，设置最大值 | — | — | — |
|
||||
| min | 原生属性，设置最小值 | — | — | — |
|
||||
| step | 原生属性，设置输入字段的合法数字间隔 | — | — | — |
|
||||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
|
||||
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
|
||||
| form | 原生属性 | string | — | — |
|
||||
| label | 输入框关联的label文字 | string | — | — |
|
||||
| tabindex | 输入框的tabindex | string | - | - |
|
||||
| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
|
||||
|
||||
### Input Slots
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 输入框头部内容，只对 `type="text"` 有效 |
|
||||
| suffix | 输入框尾部内容，只对 `type="text"` 有效 |
|
||||
| prepend | 输入框前置内容，只对 `type="text"` 有效 |
|
||||
| append | 输入框后置内容，只对 `type="text"` 有效 |
|
||||
|
||||
### Input Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| blur | 在 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在 Input 获得焦点时触发 | (event: Event) |
|
||||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \| number) |
|
||||
| input | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
|
||||
|
||||
### Input Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
| blur | 使 input 失去焦点 | — |
|
||||
| select | 选中 input 中的文字 | — |
|
||||
|
||||
### Autocomplete Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| value-key | 输入建议对象中用于显示的键名 | string | — | value |
|
||||
| value | 必填值，输入绑定值 | string | — | — |
|
||||
| debounce | 获取输入建议的去抖延时 | number | — | 300 |
|
||||
| placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
|
||||
| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
|
||||
| popper-class | Autocomplete 下拉列表的类名 | string | — | — |
|
||||
| trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |
|
||||
| label | 输入框关联的label文字 | string | — | — |
|
||||
| prefix-icon | 输入框头部图标 | string | — | — |
|
||||
| suffix-icon | 输入框尾部图标 | string | — | — |
|
||||
| hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
|
||||
| popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
|
||||
| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
|
||||
|
||||
### Autocomplete Slots
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 输入框头部内容 |
|
||||
| suffix | 输入框尾部内容 |
|
||||
| prepend | 输入框前置内容 |
|
||||
| append | 输入框后置内容 |
|
||||
|
||||
### Autocomplete Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义输入建议，参数为 { item } |
|
||||
|
||||
### Autocomplete Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| select | 点击选中建议项时触发 | 选中建议项 |
|
||||
| change | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
|
||||
### Autocomplete Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
35
examples/docs/zh-CN/installation.md
Normal file
35
examples/docs/zh-CN/installation.md
Normal file
@@ -0,0 +1,35 @@
|
||||
## 安装
|
||||
|
||||
### npm 安装
|
||||
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
|
||||
354
examples/docs/zh-CN/layout.md
Normal file
354
examples/docs/zh-CN/layout.md
Normal file
@@ -0,0 +1,354 @@
|
||||
## Layout 布局
|
||||
|
||||
通过基础的 24 分栏，迅速简便地创建布局。
|
||||
|
||||
### 基础布局
|
||||
|
||||
使用单一分栏创建基础的栅格布局。
|
||||
|
||||
:::demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 分栏间隔
|
||||
|
||||
分栏之间存在间隔。
|
||||
|
||||
:::demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 混合布局
|
||||
|
||||
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 分栏偏移
|
||||
|
||||
支持偏移指定的栏数。
|
||||
|
||||
:::demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 对齐方式
|
||||
|
||||
通过 `flex` 布局来对分栏进行灵活的对齐。
|
||||
|
||||
:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 响应式布局
|
||||
|
||||
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 基于断点的隐藏类
|
||||
|
||||
Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
|
||||
|
||||
```js
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
```
|
||||
|
||||
包含的类名及其含义为：
|
||||
- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
|
||||
- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
|
||||
- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
|
||||
- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
|
||||
- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
|
||||
- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
|
||||
- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
|
||||
- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
|
||||
- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
|
||||
- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
|
||||
- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
|
||||
|
||||
### Row Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| gutter | 栅格间隔 | number | — | 0 |
|
||||
| type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
|
||||
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
|
||||
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
|
||||
| tag | 自定义元素标签 | string | * | div |
|
||||
|
||||
### Col Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| span | 栅格占据的列数 | number | — | 24 |
|
||||
| offset | 栅格左侧的间隔格数 | number | — | 0 |
|
||||
| push | 栅格向右移动格数 | number | — | 0 |
|
||||
| pull | 栅格向左移动格数 | number | — | 0 |
|
||||
| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
|
||||
| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
|
||||
| md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
|
||||
| lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
|
||||
| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
|
||||
| tag | 自定义元素标签 | string | * | div |
|
||||
66
examples/docs/zh-CN/link.md
Normal file
66
examples/docs/zh-CN/link.md
Normal file
@@ -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 | — | - |
|
||||
208
examples/docs/zh-CN/loading.md
Normal file
208
examples/docs/zh-CN/loading.md
Normal file
@@ -0,0 +1,208 @@
|
||||
## Loading 加载
|
||||
|
||||
加载数据时显示动效。
|
||||
|
||||
### 区域加载
|
||||
|
||||
在表格等容器中加载数据时显示。
|
||||
|
||||
:::demo Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义
|
||||
|
||||
可自定义加载文案、图标和背景色。
|
||||
|
||||
:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 整页加载
|
||||
|
||||
页面数据加载时显示。
|
||||
|
||||
:::demo 当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen1"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
指令方式
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
服务方式
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 服务
|
||||
Loading 还可以以服务的方式调用。引入 Loading 服务：
|
||||
```javascript
|
||||
import { Loading } from 'element-ui';
|
||||
```
|
||||
在需要调用时：
|
||||
```javascript
|
||||
Loading.service(options);
|
||||
```
|
||||
其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
|
||||
```javascript
|
||||
let loadingInstance = Loading.service(options);
|
||||
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
||||
loadingInstance.close();
|
||||
});
|
||||
```
|
||||
需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
|
||||
```javascript
|
||||
let loadingInstance1 = Loading.service({ fullscreen: true });
|
||||
let loadingInstance2 = Loading.service({ fullscreen: true });
|
||||
console.log(loadingInstance1 === loadingInstance2); // true
|
||||
```
|
||||
此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
|
||||
|
||||
如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
|
||||
|
||||
### Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
|
||||
| body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
|
||||
| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
|
||||
| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
|
||||
| text | 显示在加载图标下方的加载文案 | string | — | — |
|
||||
| spinner | 自定义加载图标类名 | string | — | — |
|
||||
| background | 遮罩背景色 | string | — | — |
|
||||
| customClass | Loading 的自定义类名 | string | — | — |
|
||||
294
examples/docs/zh-CN/menu.md
Normal file
294
examples/docs/zh-CN/menu.md
Normal file
@@ -0,0 +1,294 @@
|
||||
## NavMenu 导航菜单
|
||||
|
||||
为网站提供导航功能的菜单。
|
||||
|
||||
### 顶栏
|
||||
|
||||
适用广泛的基础用法。
|
||||
|
||||
:::demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
|
||||
|
||||
```html
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
:default-active="activeIndex2"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 侧栏
|
||||
|
||||
垂直菜单，可内嵌子菜单。
|
||||
|
||||
:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="12">
|
||||
<h5>默认颜色</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h5>自定义颜色</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 折叠
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
|
||||
<el-radio-button :label="false">展开</el-radio-button>
|
||||
<el-radio-button :label="true">收起</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span slot="title">导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<span slot="title">分组一</span>
|
||||
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<span slot="title">选项4</span>
|
||||
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Menu Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | 模式 | string | horizontal / vertical | vertical |
|
||||
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
|
||||
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
|
||||
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #303133 |
|
||||
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
|
||||
| default-active | 当前激活菜单的 index | string | — | — |
|
||||
| default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array | — | — |
|
||||
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
|
||||
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | hover / click | hover |
|
||||
| router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
|
||||
| collapse-transition | 是否开启折叠动画 | boolean | — | true |
|
||||
|
||||
### Menu Methods
|
||||
| 方法名称 | 说明 | 参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| open | 展开指定的 sub-menu | index: 需要打开的 sub-menu 的 index |
|
||||
| close | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |
|
||||
|
||||
### Menu Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| select | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path |
|
||||
| open | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path |
|
||||
| close | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path |
|
||||
|
||||
### SubMenu Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | 唯一标志 | string/null | — | null |
|
||||
| popper-class | 弹出菜单的自定义类名 | string | — | — |
|
||||
| show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
|
||||
| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false |
|
||||
|
||||
### Menu-Item Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | 唯一标志 | string | — | — |
|
||||
| route | Vue Router 路径对象 | Object | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
||||
### Menu-Group Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | 分组标题 | string | — | — |
|
||||
326
examples/docs/zh-CN/message-box.md
Normal file
326
examples/docs/zh-CN/message-box.md
Normal file
@@ -0,0 +1,326 @@
|
||||
## MessageBox 弹框
|
||||
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
|
||||
|
||||
:::tip
|
||||
从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm` 和 `prompt`，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
|
||||
:::
|
||||
|
||||
### 消息提示
|
||||
|
||||
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
|
||||
|
||||
:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('这是一段内容', '标题名称', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 确认消息
|
||||
|
||||
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
|
||||
|
||||
:::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 提交内容
|
||||
|
||||
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。
|
||||
|
||||
:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，返回`false`或字符串时均表示校验未通过，同时返回的字符串相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$prompt('请输入邮箱', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: '邮箱格式不正确'
|
||||
}).then(({ value }) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '你的邮箱是: ' + value
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '取消输入'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义
|
||||
|
||||
可自定义配置不同内容。
|
||||
|
||||
:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了`beforeClose`属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数：`action`、实例本身和`done`方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加`loading`状态等；此时若需要关闭实例，可以调用`done`方法（若在`beforeClose`中没有调用`done`，则实例不会关闭）。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = '执行中...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 [#8931](https://github.com/ElemeFE/element/issues/8931)。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考[这里](https://jsfiddle.net/zhiyang/ezmhq2ef/)。
|
||||
:::
|
||||
|
||||
### 使用 HTML 片段
|
||||
|
||||
`message` 属性支持传入 HTML 片段。
|
||||
|
||||
:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
|
||||
:::
|
||||
|
||||
### 区分取消与关闭
|
||||
|
||||
有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。
|
||||
|
||||
:::demo 默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和`callback`回调的参数均为 'cancel'。如果将`distinguishCancelAndClose`属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '放弃修改'
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '保存修改'
|
||||
});
|
||||
})
|
||||
.catch(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: action === 'cancel'
|
||||
? '放弃保存并离开页面'
|
||||
: '停留在当前页面'
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 居中布局
|
||||
内容支持居中布局
|
||||
|
||||
:::demo 将 `center` 设置为 `true` 即可开启居中布局
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">点击打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 全局方法
|
||||
|
||||
如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
|
||||
- `$msgbox(options)`
|
||||
- `$alert(message, title, options)` 或 `$alert(message, options)`
|
||||
- `$confirm(message, title, options)` 或 `$confirm(message, options)`
|
||||
- `$prompt(message, title, options)` 或 `$prompt(message, options)`
|
||||
|
||||
### 单独引用
|
||||
|
||||
如果单独引入 `MessageBox`：
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
```
|
||||
|
||||
那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | MessageBox 标题 | string | — | — |
|
||||
| message | MessageBox 消息正文内容 | string / VNode | — | — |
|
||||
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
|
||||
| type | 消息类型，用于显示图标 | string | success / info / warning / error | — |
|
||||
| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
|
||||
| customClass | MessageBox 的自定义类名 | string | — | — |
|
||||
| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
|
||||
| showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true |
|
||||
| beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |
|
||||
| distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | boolean | — | false |
|
||||
| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
|
||||
| showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
|
||||
| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
|
||||
| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
|
||||
| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
|
||||
| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
|
||||
| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
|
||||
| closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
|
||||
| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
|
||||
| closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true |
|
||||
| showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
|
||||
| inputPlaceholder | 输入框的占位符 | string | — | — |
|
||||
| inputType | 输入框的类型 | string | — | text |
|
||||
| inputValue | 输入框的初始文本 | string | — | — |
|
||||
| inputPattern | 输入框的校验表达式 | regexp | — | — |
|
||||
| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
|
||||
| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
|
||||
| center | 是否居中布局 | boolean | — | false |
|
||||
| roundButton | 是否使用圆角按钮 | boolean | — | false |
|
||||
219
examples/docs/zh-CN/message.md
Normal file
219
examples/docs/zh-CN/message.md
Normal file
@@ -0,0 +1,219 @@
|
||||
## Message 消息提示
|
||||
|
||||
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
|
||||
|
||||
### 基础用法
|
||||
|
||||
从顶部出现，3 秒后自动消失。
|
||||
|
||||
:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open">打开消息提示</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, '内容可以是 '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
])
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同状态
|
||||
|
||||
用来显示「成功、警告、消息、错误」类的操作反馈。
|
||||
|
||||
:::demo 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" @click="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$message('这是一条消息提示');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('错了哦，这是一条错误消息');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可关闭
|
||||
|
||||
可以添加关闭按钮。
|
||||
|
||||
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open1">消息</el-button>
|
||||
<el-button :plain="true" @click="open2">成功</el-button>
|
||||
<el-button :plain="true" @click="open3">警告</el-button>
|
||||
<el-button :plain="true" @click="open4">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '这是一条消息提示'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '警告哦，这是一条警告消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '错了哦，这是一条错误消息',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文字居中
|
||||
使用 `center` 属性让文字水平居中。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openCenter">文字居中</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: '居中的文字',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 使用 HTML 片段
|
||||
`message` 属性支持传入 HTML 片段
|
||||
|
||||
:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
|
||||
:::
|
||||
|
||||
### 全局方法
|
||||
|
||||
Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
|
||||
|
||||
### 单独引用
|
||||
|
||||
单独引入 `Message`：
|
||||
|
||||
```javascript
|
||||
import { Message } from 'element-ui';
|
||||
```
|
||||
|
||||
此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。
|
||||
|
||||
### Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| message | 消息文字 | string / VNode | — | — |
|
||||
| type | 主题 | string | success/warning/info/error | info |
|
||||
| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
|
||||
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
|
||||
| customClass | 自定义类名 | string | — | — |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
|
||||
| showClose | 是否显示关闭按钮 | boolean | — | false |
|
||||
| center | 文字是否居中 | boolean | — | false |
|
||||
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
|
||||
| offset | Message 距离窗口顶部的偏移量 | number | — | 20 |
|
||||
|
||||
### 方法
|
||||
调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
|
||||
| 方法名 | 说明 |
|
||||
| ---- | ---- |
|
||||
| close | 关闭当前的 Message |
|
||||
311
examples/docs/zh-CN/notification.md
Normal file
311
examples/docs/zh-CN/notification.md
Normal file
@@ -0,0 +1,311 @@
|
||||
## Notification 通知
|
||||
|
||||
悬浮出现在页面角落，显示全局的通知提醒消息。
|
||||
|
||||
### 基本用法
|
||||
|
||||
适用性广泛的通知栏
|
||||
|
||||
:::demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open1">
|
||||
可自动关闭
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open2">
|
||||
不会自动关闭
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有倾向性
|
||||
|
||||
带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
|
||||
|
||||
:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open1">
|
||||
成功
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open2">
|
||||
警告
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
消息
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
错误
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify.info({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义弹出位置
|
||||
|
||||
可以让 Notification 从屏幕四角中的任意一角弹出
|
||||
|
||||
:::demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open1">
|
||||
右上角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open2">
|
||||
右下角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
左下角
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
左上角
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open1() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右上角弹出的消息'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '右下角弹出的消息',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左下角弹出的消息',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '自定义位置',
|
||||
message: '左上角弹出的消息',
|
||||
position: 'top-left'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有偏移
|
||||
|
||||
让 Notification 偏移一些位置
|
||||
|
||||
:::demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
偏移的消息
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '偏移',
|
||||
message: '这是一条带有偏移的提示消息',
|
||||
offset: 100
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 使用 HTML 片段
|
||||
`message` 属性支持传入 HTML 片段
|
||||
|
||||
:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
使用 HTML 片段
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'HTML 片段',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>这是 <i>HTML</i> 片段</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
|
||||
:::
|
||||
|
||||
### 隐藏关闭按钮
|
||||
|
||||
可以不显示关闭按钮
|
||||
|
||||
:::demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
隐藏关闭按钮
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: '这是一条没有关闭按钮的消息',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 全局方法
|
||||
|
||||
Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
|
||||
|
||||
### 单独引用
|
||||
|
||||
单独引入 Notification：
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
```
|
||||
|
||||
此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。
|
||||
|
||||
### Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题 | string | — | — |
|
||||
| message | 说明文字 | string/Vue.VNode | — | — |
|
||||
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
|
||||
| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
|
||||
| iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
|
||||
| customClass | 自定义类名 | string | — | — |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
|
||||
| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
|
||||
| showClose | 是否显示关闭按钮 | boolean | — | true |
|
||||
| onClose | 关闭时的回调函数 | function | — | — |
|
||||
| onClick | 点击 Notification 时的回调函数 | function | — | — |
|
||||
| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
|
||||
|
||||
### 方法
|
||||
调用 `Notification` 或 `this.$notify` 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
|
||||
| 方法名 | 说明 |
|
||||
| ---- | ---- |
|
||||
| close | 关闭当前的 Notification |
|
||||
40
examples/docs/zh-CN/page-header.md
Normal file
40
examples/docs/zh-CN/page-header.md
Normal file
@@ -0,0 +1,40 @@
|
||||
## PageHeader 页头
|
||||
|
||||
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
|
||||
|
||||
### 基础
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-page-header @back="goBack" content="详情页面">
|
||||
</el-page-header>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack() {
|
||||
console.log('go back');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |------------------------------ | ------ |
|
||||
| title | 标题 | string | — | 返回 |
|
||||
| content | 内容 | string | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------------- |---------- |
|
||||
| back | 点击左侧区域触发 | — |
|
||||
|
||||
### Slots
|
||||
| 事件名称 | 说明 |
|
||||
|---------- |------------- |
|
||||
| title | 标题内容 |
|
||||
| content | 内容 |
|
||||
200
examples/docs/zh-CN/pagination.md
Normal file
200
examples/docs/zh-CN/pagination.md
Normal file
@@ -0,0 +1,200 @@
|
||||
## Pagination 分页
|
||||
|
||||
当数据量过多时，使用分页分解数据。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`size`用于设置每页显示的页码数量。
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">页数较少时的效果</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">大于 7 页时的效果</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 设置最大页码按钮数
|
||||
|
||||
:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。
|
||||
```html
|
||||
<el-pagination
|
||||
:page-size="20"
|
||||
:pager-count="11"
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有背景色的分页
|
||||
|
||||
:::demo 设置`background`属性可以为分页按钮添加背景色。
|
||||
```html
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### 小型分页
|
||||
|
||||
在空间有限的情况下，可以使用简单的小型分页。
|
||||
|
||||
:::demo 只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### 附加功能
|
||||
|
||||
根据场景需要，可以添加其他功能模块。
|
||||
|
||||
:::demo 此例是一个完整的用例，使用了`size-change`和`current-change`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">显示总数</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage1"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">调整每页显示条数</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage2"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">直接前往</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage3"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">完整功能</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 5,
|
||||
currentPage2: 5,
|
||||
currentPage3: 5,
|
||||
currentPage4: 4
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 当只有一页时隐藏分页
|
||||
|
||||
当只有一页时，通过设置 `hide-on-single-page` 属性来隐藏分页。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div>
|
||||
<el-switch v-model="value">
|
||||
</el-switch>
|
||||
<el-pagination
|
||||
:hide-on-single-page="value"
|
||||
:total="5"
|
||||
layout="prev, pager, next">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | 是否使用小型分页样式 | boolean | — | false |
|
||||
| background | 是否为分页按钮添加背景色 | boolean | — | false |
|
||||
| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
|
||||
| total | 总条目数 | number | — | — |
|
||||
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
|
||||
| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
|
||||
| current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 |
|
||||
| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
|
||||
| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
|
||||
| prev-text | 替代图标显示的上一页文字 | string | — | — |
|
||||
| next-text | 替代图标显示的下一页文字 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| size-change | pageSize 改变时会触发 | 每页条数 |
|
||||
| current-change | currentPage 改变时会触发 | 当前页 |
|
||||
| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
|
||||
| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
|
||||
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义内容，需要在 `layout` 中列出 `slot` |
|
||||
60
examples/docs/zh-CN/popconfirm.md
Normal file
60
examples/docs/zh-CN/popconfirm.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Popconfirm 气泡确认框
|
||||
|
||||
点击元素，弹出气泡确认框。
|
||||
|
||||
### 基础用法
|
||||
|
||||
Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
|
||||
:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### 自定义
|
||||
|
||||
可以在 Popconfirm 中自定义内容。
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirm-button-text='好的'
|
||||
cancel-button-text='不用了'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="这是一段内容确定删除吗？"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | 标题 | String | — | — |
|
||||
| confirm-button-text | 确认按钮文字 | String | — | — |
|
||||
| cancel-button-text | 取消按钮文字 | String | — | — |
|
||||
| confirm-button-type | 确认按钮类型 | String | — | Primary |
|
||||
| cancel-button-type | 取消按钮类型 | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| icon-color | Icon 颜色 | String | — | #f90 |
|
||||
| hide-icon | 是否隐藏 Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| reference | 触发 Popconfirm 显示的 HTML 元素 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| confirm | 点击确认按钮时触发 | — |
|
||||
| cancel | 点击取消按钮时触发 | — |
|
||||
167
examples/docs/zh-CN/popover.md
Normal file
167
examples/docs/zh-CN/popover.md
Normal file
@@ -0,0 +1,167 @@
|
||||
## Popover 弹出框
|
||||
|
||||
### 基础用法
|
||||
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
|
||||
|
||||
:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
|
||||
```html
|
||||
<template>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>focus 激活</el-button>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="manual"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 嵌套信息
|
||||
|
||||
可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。
|
||||
|
||||
:::demo 利用分发取代`content`属性
|
||||
```html
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 嵌套操作
|
||||
|
||||
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible = false">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popover>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | 触发方式 | String | click/focus/hover/manual | click |
|
||||
| title | 标题 | String | — | — |
|
||||
| content | 显示的内容，也可以通过 `slot` 传入 DOM | String | — | — |
|
||||
| width | 宽度 | String, Number | — | 最小宽度 150px |
|
||||
| placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | Popover 是否可用 | Boolean | — | false |
|
||||
| value / v-model | 状态是否可见 | Boolean | — | false |
|
||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | 为 popper 添加类名 | String | — | — |
|
||||
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
|
||||
| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
|
||||
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
|
||||
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| — | Popover 内嵌 HTML 文本 |
|
||||
| reference | 触发 Popover 显示的 HTML 元素 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| show | 显示时触发 | — |
|
||||
| after-enter | 显示动画播放完毕后触发 | — |
|
||||
| hide | 隐藏时触发 | — |
|
||||
| after-leave | 隐藏动画播放完毕后触发 | — |
|
||||
178
examples/docs/zh-CN/progress.md
Normal file
178
examples/docs/zh-CN/progress.md
Normal file
@@ -0,0 +1,178 @@
|
||||
## Progress 进度条
|
||||
|
||||
用于展示操作进度，告知用户当前状态和预期。
|
||||
|
||||
### 线形进度条
|
||||
|
||||
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
|
||||
|
||||
```html
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="100" :format="format"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="warning"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage === 100 ? '满' : `${percentage}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 百分比内显
|
||||
|
||||
百分比不占用额外控件，适用于文件上传等场景。
|
||||
|
||||
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
|
||||
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399';
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c';
|
||||
} else {
|
||||
return '#67c23a';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 环形进度条
|
||||
|
||||
Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### 仪表盘形进度条
|
||||
|
||||
:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
|
||||
|
||||
```html
|
||||
|
||||
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 10,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
|
||||
| type | 进度条类型 | string | line/circle/dashboard | line |
|
||||
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
|
||||
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
|
||||
| status | 进度条当前状态 | string | success/exception/warning | — |
|
||||
| color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
|
||||
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
|
||||
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
||||
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
|
||||
| format | 指定进度条文字内容 | function(percentage) | — | — |
|
||||
290
examples/docs/zh-CN/quickstart.md
Normal file
290
examples/docs/zh-CN/quickstart.md
Normal file
@@ -0,0 +1,290 @@
|
||||
## 快速上手
|
||||
|
||||
本节将介绍如何在项目中使用 Element。
|
||||
|
||||
### 使用 vue-cli@3
|
||||
|
||||
我们为新版的 vue-cli 准备了相应的 [Element 插件](https://github.com/ElementUI/vue-cli-plugin-element)，你可以用它们快速地搭建一个基于 Element 的项目。
|
||||
|
||||
### 使用 Starter Kit
|
||||
|
||||
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter)，同样可以直接下载使用。
|
||||
|
||||
如果不希望使用我们提供的模板，请继续阅读。
|
||||
|
||||
### 引入 Element
|
||||
|
||||
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
|
||||
|
||||
#### 完整引入
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
```
|
||||
|
||||
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
#### 按需引入
|
||||
|
||||
借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。
|
||||
|
||||
首先，安装 babel-plugin-component：
|
||||
|
||||
```bash
|
||||
npm install babel-plugin-component -D
|
||||
```
|
||||
|
||||
然后，将 .babelrc 修改为：
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": [["es2015", { "modules": false }]],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Select } from 'element-ui';
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Select.name, Select);
|
||||
/* 或写为
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
*/
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
```
|
||||
|
||||
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
Autocomplete,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Menu,
|
||||
Submenu,
|
||||
MenuItem,
|
||||
MenuItemGroup,
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Checkbox,
|
||||
CheckboxButton,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
TableColumn,
|
||||
DatePicker,
|
||||
TimeSelect,
|
||||
TimePicker,
|
||||
Popover,
|
||||
Tooltip,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Form,
|
||||
FormItem,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Tag,
|
||||
Tree,
|
||||
Alert,
|
||||
Slider,
|
||||
Icon,
|
||||
Row,
|
||||
Col,
|
||||
Upload,
|
||||
Progress,
|
||||
Spinner,
|
||||
Badge,
|
||||
Card,
|
||||
Rate,
|
||||
Steps,
|
||||
Step,
|
||||
Carousel,
|
||||
CarouselItem,
|
||||
Collapse,
|
||||
CollapseItem,
|
||||
Cascader,
|
||||
ColorPicker,
|
||||
Transfer,
|
||||
Container,
|
||||
Header,
|
||||
Aside,
|
||||
Main,
|
||||
Footer,
|
||||
Timeline,
|
||||
TimelineItem,
|
||||
Link,
|
||||
Divider,
|
||||
Image,
|
||||
Calendar,
|
||||
Backtop,
|
||||
PageHeader,
|
||||
CascaderPanel,
|
||||
Loading,
|
||||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui';
|
||||
|
||||
Vue.use(Pagination);
|
||||
Vue.use(Dialog);
|
||||
Vue.use(Autocomplete);
|
||||
Vue.use(Dropdown);
|
||||
Vue.use(DropdownMenu);
|
||||
Vue.use(DropdownItem);
|
||||
Vue.use(Menu);
|
||||
Vue.use(Submenu);
|
||||
Vue.use(MenuItem);
|
||||
Vue.use(MenuItemGroup);
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(RadioButton);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxButton);
|
||||
Vue.use(CheckboxGroup);
|
||||
Vue.use(Switch);
|
||||
Vue.use(Select);
|
||||
Vue.use(Option);
|
||||
Vue.use(OptionGroup);
|
||||
Vue.use(Button);
|
||||
Vue.use(ButtonGroup);
|
||||
Vue.use(Table);
|
||||
Vue.use(TableColumn);
|
||||
Vue.use(DatePicker);
|
||||
Vue.use(TimeSelect);
|
||||
Vue.use(TimePicker);
|
||||
Vue.use(Popover);
|
||||
Vue.use(Tooltip);
|
||||
Vue.use(Breadcrumb);
|
||||
Vue.use(BreadcrumbItem);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Tabs);
|
||||
Vue.use(TabPane);
|
||||
Vue.use(Tag);
|
||||
Vue.use(Tree);
|
||||
Vue.use(Alert);
|
||||
Vue.use(Slider);
|
||||
Vue.use(Icon);
|
||||
Vue.use(Row);
|
||||
Vue.use(Col);
|
||||
Vue.use(Upload);
|
||||
Vue.use(Progress);
|
||||
Vue.use(Spinner);
|
||||
Vue.use(Badge);
|
||||
Vue.use(Card);
|
||||
Vue.use(Rate);
|
||||
Vue.use(Steps);
|
||||
Vue.use(Step);
|
||||
Vue.use(Carousel);
|
||||
Vue.use(CarouselItem);
|
||||
Vue.use(Collapse);
|
||||
Vue.use(CollapseItem);
|
||||
Vue.use(Cascader);
|
||||
Vue.use(ColorPicker);
|
||||
Vue.use(Transfer);
|
||||
Vue.use(Container);
|
||||
Vue.use(Header);
|
||||
Vue.use(Aside);
|
||||
Vue.use(Main);
|
||||
Vue.use(Footer);
|
||||
Vue.use(Timeline);
|
||||
Vue.use(TimelineItem);
|
||||
Vue.use(Link);
|
||||
Vue.use(Divider);
|
||||
Vue.use(Image);
|
||||
Vue.use(Calendar);
|
||||
Vue.use(Backtop);
|
||||
Vue.use(PageHeader);
|
||||
Vue.use(CascaderPanel);
|
||||
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
```
|
||||
|
||||
### 全局配置
|
||||
|
||||
在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
|
||||
|
||||
完整引入 Element：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Element from 'element-ui';
|
||||
Vue.use(Element, { size: 'small', zIndex: 3000 });
|
||||
```
|
||||
|
||||
按需引入 Element：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'element-ui';
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
|
||||
|
||||
### 开始使用
|
||||
|
||||
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
|
||||
|
||||
### 使用 Nuxt.js
|
||||
|
||||
我们还可以使用 [Nuxt.js](https://nuxtjs.org)：
|
||||
|
||||
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
||||
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
||||
</div>
|
||||
|
||||
211
examples/docs/zh-CN/radio.md
Normal file
211
examples/docs/zh-CN/radio.md
Normal file
@@ -0,0 +1,211 @@
|
||||
## Radio 单选框
|
||||
|
||||
在一组备选项中进行单选
|
||||
|
||||
### 基础用法
|
||||
|
||||
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||||
|
||||
:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio v-model="radio" label="1">备选项</el-radio>
|
||||
<el-radio v-model="radio" label="2">备选项</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
单选框不可用的状态。
|
||||
|
||||
:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
|
||||
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: '选中且禁用'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 单选框组
|
||||
|
||||
适用于在多个互斥的选项中选择的场景
|
||||
|
||||
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio :label="3">备选项</el-radio>
|
||||
<el-radio :label="6">备选项</el-radio>
|
||||
<el-radio :label="9">备选项</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮样式
|
||||
|
||||
按钮样式的单选组合。
|
||||
|
||||
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio2" size="medium">
|
||||
<el-radio-button label="上海" ></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京" disabled ></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" disabled size="mini">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: '上海',
|
||||
radio2: '上海',
|
||||
radio3: '上海',
|
||||
radio4: '上海'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有边框
|
||||
|
||||
:::demo 设置`border`属性可以渲染为带有边框的单选框。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio1" label="1" border>备选项1</el-radio>
|
||||
<el-radio v-model="radio1" label="2" border>备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
|
||||
<el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio3" size="small">
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border disabled>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="mini" disabled>
|
||||
<el-radio label="1" border>备选项1</el-radio>
|
||||
<el-radio label="2" border>备选项2</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '1',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| label | Radio 的 value | string / number / boolean | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
| size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
|
||||
### Radio Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
|
||||
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |
|
||||
|
||||
### Radio-group Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
||||
|
||||
### Radio-button Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Radio 的 value | string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 原生 name 属性 | string | — | — |
|
||||
135
examples/docs/zh-CN/rate.md
Normal file
135
examples/docs/zh-CN/rate.md
Normal file
@@ -0,0 +1,135 @@
|
||||
## Rate 评分
|
||||
|
||||
评分组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">默认不区分颜色</span>
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">区分颜色</span>
|
||||
<el-rate
|
||||
v-model="value2"
|
||||
:colors="colors">
|
||||
</el-rate>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 辅助文字
|
||||
|
||||
用辅助文字直接地表达对应分数
|
||||
|
||||
:::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 其它 icon
|
||||
|
||||
当有多层评价时，可以用不同类型的 icon 区分评分层级
|
||||
|
||||
:::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value"
|
||||
:icon-classes="iconClasses"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 只读
|
||||
|
||||
只读的评分用来展示分数，允许出现半星
|
||||
|
||||
:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
|
||||
```html
|
||||
<el-rate
|
||||
v-model="value"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
score-template="{value}">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| max | 最大分值 | number | — | 5 |
|
||||
| disabled | 是否为只读 | boolean | — | false |
|
||||
| allow-half | 是否允许半选 | boolean | — | false |
|
||||
| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
|
||||
| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
|
||||
| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
|
||||
| void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
|
||||
| disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
|
||||
| icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
|
||||
| void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
|
||||
| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
|
||||
| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |
|
||||
| text-color | 辅助文字的颜色 | string | — | #1F2D3D |
|
||||
| texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| score-template | 分数显示模板 | string | — | {value} |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 分值改变时触发 | 改变后的分值 |
|
||||
|
||||
586
examples/docs/zh-CN/select.md
Normal file
586
examples/docs/zh-CN/select.md
Normal file
@@ -0,0 +1,586 @@
|
||||
## Select 选择器
|
||||
|
||||
当选项过多时，使用下拉菜单展示并选择内容。
|
||||
|
||||
### 基础用法
|
||||
|
||||
适用广泛的基础单选
|
||||
:::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 有禁用选项
|
||||
|
||||
:::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
选择器不可用状态
|
||||
|
||||
:::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" disabled placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可清空单选
|
||||
|
||||
包含清空按钮，可将选择器清空为初始状态
|
||||
|
||||
:::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 基础多选
|
||||
|
||||
适用性较广的基础多选，用 Tag 展示已选项
|
||||
|
||||
:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value1" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value1: [],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义模板
|
||||
|
||||
可以自定义备选项
|
||||
|
||||
:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: '南京'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 分组
|
||||
|
||||
备选项进行分组展示
|
||||
|
||||
:::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option-group
|
||||
v-for="group in options"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
label: '热门城市',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: '上海'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: '北京'
|
||||
}]
|
||||
}, {
|
||||
label: '城市名',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: '成都'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: '深圳'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: '广州'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: '大连'
|
||||
}]
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可搜索
|
||||
|
||||
可以利用搜索功能快速查找选项
|
||||
|
||||
:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '蚵仔煎'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '龙须面'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 远程搜索
|
||||
|
||||
从服务器搜索数据，输入关键字进行查找
|
||||
:::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
value: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 创建条目
|
||||
可以创建并选中选项中不存在的条目
|
||||
:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。本例还使用了`default-first-option`属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请选择文章标签">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
value: 'CSS',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。
|
||||
:::
|
||||
|
||||
### Select Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | boolean / string / number | — | — |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
|
||||
| size | 输入框尺寸 | string | medium/small/mini | — |
|
||||
| clearable | 是否可以清空选项 | boolean | — | false |
|
||||
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
|
||||
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
|
||||
| name | select input 的 name 属性 | string | — | — |
|
||||
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
|
||||
| auto-complete | 下个主版本弃用 | string | — | off |
|
||||
| placeholder | 占位符 | string | — | 请选择 |
|
||||
| filterable | 是否可搜索 | boolean | — | false |
|
||||
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
|
||||
| filter-method | 自定义搜索方法 | function | — | — |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| remote-method | 远程搜索方法 | function | — | — |
|
||||
| loading | 是否正在从远程获取数据 | boolean | — | false |
|
||||
| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
|
||||
| no-match-text | 搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无匹配数据 |
|
||||
| no-data-text | 选项为空时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无数据 |
|
||||
| popper-class | Select 下拉框的类名 | string | — | — |
|
||||
| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
|
||||
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
|
||||
| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
|
||||
| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
|
||||
|
||||
### Select Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 选中值发生变化时触发 | 目前的选中值 |
|
||||
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
|
||||
| remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
|
||||
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
|
||||
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 当 input 获得焦点时触发 | (event: Event) |
|
||||
|
||||
### Select Slots
|
||||
| name | 说明 |
|
||||
|---------|---------|
|
||||
| — | Option 组件列表 |
|
||||
| prefix | Select 组件头部内容 |
|
||||
| empty | 无选项时的列表 |
|
||||
|
||||
### Option Group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | 分组的组名 | string | — | — |
|
||||
| disabled | 是否将该分组下所有选项置为禁用 | boolean | — | false |
|
||||
|
||||
### Option Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 选项的值 | string/number/object | — | — |
|
||||
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
|
||||
| disabled | 是否禁用该选项 | boolean | — | false |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| blur | 使 input 失去焦点，并隐藏下拉框 | - |
|
||||
237
examples/docs/zh-CN/slider.md
Normal file
237
examples/docs/zh-CN/slider.md
Normal file
@@ -0,0 +1,237 @@
|
||||
## Slider 滑块
|
||||
|
||||
通过拖动滑块在一个固定区间内进行选择
|
||||
|
||||
### 基础用法
|
||||
|
||||
在拖动滑块时，显示当前值
|
||||
|
||||
:::demo 通过设置绑定值自定义滑块的初始值
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-slider v-model="value1"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">自定义初始值</span>
|
||||
<el-slider v-model="value2"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">隐藏 Tooltip</span>
|
||||
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">格式化 Tooltip</span>
|
||||
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">禁用</span>
|
||||
<el-slider v-model="value5" disabled></el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 36,
|
||||
value4: 48,
|
||||
value5: 42
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatTooltip(val) {
|
||||
return val / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 离散值
|
||||
|
||||
选项可以是离散的
|
||||
|
||||
:::demo 改变`step`的值可以改变步长，通过设置`show-stops`属性可以显示间断点
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">不显示间断点</span>
|
||||
<el-slider
|
||||
v-model="value1"
|
||||
:step="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">显示间断点</span>
|
||||
<el-slider
|
||||
v-model="value2"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有输入框
|
||||
|
||||
通过输入框设置精确数值
|
||||
|
||||
:::demo 设置`show-input`属性会在右侧显示一个输入框
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value"
|
||||
show-input>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 范围选择
|
||||
|
||||
支持选择某一数值范围
|
||||
|
||||
:::demo 设置`range`即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value"
|
||||
range
|
||||
show-stops
|
||||
:max="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [4, 8]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 竖向模式
|
||||
|
||||
:::demo 设置`vertical`可使 Slider 变成竖向模式，此时必须设置高度`height`属性
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value"
|
||||
vertical
|
||||
height="200px">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 展示标记
|
||||
|
||||
:::demo 设置 `marks` 属性可以展示标记
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value"
|
||||
range
|
||||
:marks="marks">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: [30, 60],
|
||||
marks: {
|
||||
0: '0°C',
|
||||
8: '8°C',
|
||||
37: '37°C',
|
||||
50: {
|
||||
style: {
|
||||
color: '#1989FA'
|
||||
},
|
||||
label: this.$createElement('strong', '50%')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| min | 最小值 | number | — | 0 |
|
||||
| max | 最大值 | number | — | 100 |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| step | 步长 | number | — | 1 |
|
||||
| show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false |
|
||||
| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true |
|
||||
| input-size | 输入框的尺寸 | string | large / medium / small / mini | small |
|
||||
| show-stops | 是否显示间断点 | boolean | — | false |
|
||||
| show-tooltip | 是否显示 tooltip | boolean | — | true |
|
||||
| format-tooltip | 格式化 tooltip message | function(value) | — | — |
|
||||
| range | 是否为范围选择 | boolean | — | false |
|
||||
| vertical | 是否竖向模式 | boolean | — | false |
|
||||
| height | Slider 高度，竖向模式时必填 | string | — | — |
|
||||
| label | 屏幕阅读器标签 | string | — | — |
|
||||
| debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
|
||||
| tooltip-class | tooltip 的自定义类名 | string | — | — |
|
||||
| marks | 标记， key 的类型必须为 number 且取值在闭区间 `[min, max]` 内，每个标记可以单独设置样式 | object | — | — |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |
|
||||
| input | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | 改变后的值 |
|
||||
154
examples/docs/zh-CN/steps.md
Normal file
154
examples/docs/zh-CN/steps.md
Normal file
@@ -0,0 +1,154 @@
|
||||
## Steps 步骤条
|
||||
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
|
||||
|
||||
### 基础用法
|
||||
|
||||
简单的步骤条。
|
||||
|
||||
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Number`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 含状态步骤条
|
||||
|
||||
每一步骤显示出该步骤的状态。
|
||||
|
||||
:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
|
||||
```html
|
||||
<el-steps :space="200" :active="1" finish-status="success">
|
||||
<el-step title="已完成"></el-step>
|
||||
<el-step title="进行中"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 有描述的步骤条
|
||||
|
||||
每个步骤有其对应的步骤状态描述。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 居中的步骤条
|
||||
|
||||
标题和描述都将居中。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="2" align-center>
|
||||
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标的步骤条
|
||||
步骤条内可以启用各种自定义的图标。
|
||||
|
||||
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
|
||||
```html
|
||||
|
||||
<el-steps :active="1">
|
||||
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 竖式步骤条
|
||||
|
||||
竖直方向的步骤条。
|
||||
|
||||
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
|
||||
```html
|
||||
<div style="height: 300px;">
|
||||
<el-steps direction="vertical" :active="1">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 简洁风格的步骤条
|
||||
设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<el-steps :active="1" simple>
|
||||
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
|
||||
<el-step title="步骤 1" ></el-step>
|
||||
<el-step title="步骤 2" ></el-step>
|
||||
<el-step title="步骤 3" ></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |
|
||||
| direction | 显示方向 | string | vertical/horizontal | horizontal |
|
||||
| active | 设置当前激活步骤 | number | — | 0 |
|
||||
| process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |
|
||||
| finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |
|
||||
| align-center | 进行居中对齐 | boolean | - | false |
|
||||
| simple | 是否应用简洁风格 | boolean | - | false |
|
||||
|
||||
### Step Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | 标题 | string | — | — |
|
||||
| description | 描述性文字 | string | — | — |
|
||||
| icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |
|
||||
| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |
|
||||
|
||||
### Step Slot
|
||||
| name | 说明 |
|
||||
|----|----|
|
||||
| icon | 自定义图标 |
|
||||
| title | 自定义标题 |
|
||||
| description | 自定义描述性文字 |
|
||||
142
examples/docs/zh-CN/switch.md
Normal file
142
examples/docs/zh-CN/switch.md
Normal file
@@ -0,0 +1,142 @@
|
||||
## Switch 开关
|
||||
|
||||
表示两种相互对立的状态间的切换，多用于触发「开/关」。
|
||||
|
||||
### 基本用法
|
||||
|
||||
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文字描述
|
||||
|
||||
:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
active-text="按月付费"
|
||||
inactive-text="按年付费">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="按月付费"
|
||||
inactive-text="按年付费">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 扩展的 value 类型
|
||||
|
||||
:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value" placement="top">
|
||||
<el-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
|
||||
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | boolean / string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| width | switch 的宽度（像素） | number | — | 40 |
|
||||
| active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `active-text` | string | — | — |
|
||||
| inactive-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text` | string | — | — |
|
||||
| active-text | switch 打开时的文字描述 | string | — | — |
|
||||
| inactive-text | switch 关闭时的文字描述 | string | — | — |
|
||||
| active-value | switch 打开时的值 | boolean / string / number | — | true |
|
||||
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
| active-color | switch 打开时的背景色 | string | — | #409EFF |
|
||||
| inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
| validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | - | true |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | switch 状态发生变化时的回调函数 | 新状态的值 |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 Switch 获取焦点 | - |
|
||||
1962
examples/docs/zh-CN/table.md
Normal file
1962
examples/docs/zh-CN/table.md
Normal file
File diff suppressed because it is too large
Load Diff
303
examples/docs/zh-CN/tabs.md
Normal file
303
examples/docs/zh-CN/tabs.md
Normal file
@@ -0,0 +1,303 @@
|
||||
## Tabs 标签页
|
||||
|
||||
分隔内容上有关联但属于不同类别的数据集合。
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础的、简洁的标签页。
|
||||
|
||||
:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 选项卡样式
|
||||
|
||||
选项卡样式的标签页。
|
||||
|
||||
:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 卡片化
|
||||
|
||||
卡片化的标签页。
|
||||
|
||||
:::demo 将`type`设置为`border-card`。
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### 位置
|
||||
|
||||
可以通过 `tab-position` 设置标签的位置
|
||||
|
||||
:::demo 标签一共有四个方向的设置 `tabPosition="left|right|top|bottom"`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
|
||||
<el-radio-button label="top">top</el-radio-button>
|
||||
<el-radio-button label="right">right</el-radio-button>
|
||||
<el-radio-button label="bottom">bottom</el-radio-button>
|
||||
<el-radio-button label="left">left</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-tabs :tab-position="tabPosition" style="height: 200px;">
|
||||
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 'left'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义标签页
|
||||
|
||||
可以通过具名 `slot` 来实现自定义标签页的内容
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
|
||||
我的行程
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
|
||||
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### 动态增减标签页
|
||||
|
||||
增减标签页按钮只能在选项卡样式的标签页下使用
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
:key="item.name"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabsEdit(targetName, action) {
|
||||
if (action === 'add') {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
}
|
||||
if (action === 'remove') {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义增加标签页触发器
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
| type | 风格类型 | string | card/border-card | — |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| addable | 标签是否可增加 | boolean | — | false |
|
||||
| editable | 标签是否同时可增加和关闭 | boolean | — | false |
|
||||
| tab-position | 选项卡所在位置 | string | top/right/bottom/left | top |
|
||||
| stretch | 标签的宽度是否自撑开 | boolean | - | false |
|
||||
| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |
|
||||
|
||||
### Tabs Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| tab-click | tab 被选中时触发 | 被选中的标签 tab 实例 |
|
||||
| tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name |
|
||||
| tab-add | 点击 tabs 的新增按钮后触发 | — |
|
||||
| edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) |
|
||||
|
||||
### Tab-pane Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| lazy | 标签是否延迟渲染 | boolean | — | false |
|
||||
203
examples/docs/zh-CN/tag.md
Normal file
203
examples/docs/zh-CN/tag.md
Normal file
@@ -0,0 +1,203 @@
|
||||
## Tag 标签
|
||||
|
||||
用于标记和选择。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。
|
||||
|
||||
```html
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="success">标签二</el-tag>
|
||||
<el-tag type="info">标签三</el-tag>
|
||||
<el-tag type="warning">标签四</el-tag>
|
||||
<el-tag type="danger">标签五</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可移除标签
|
||||
|
||||
:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
closable
|
||||
:type="tag.type">
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ name: '标签一', type: '' },
|
||||
{ name: '标签二', type: 'success' },
|
||||
{ name: '标签三', type: 'info' },
|
||||
{ name: '标签四', type: 'warning' },
|
||||
{ name: '标签五', type: 'danger' }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 动态编辑标签
|
||||
|
||||
动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
||||
|
||||
<style>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicTags: ['标签一', '标签二', '标签三'],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
||||
},
|
||||
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if (inputValue) {
|
||||
this.dynamicTags.push(inputValue);
|
||||
}
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
|
||||
|
||||
```html
|
||||
<el-tag closable>默认标签</el-tag>
|
||||
<el-tag size="medium" closable>中等标签</el-tag>
|
||||
<el-tag size="small" closable>小型标签</el-tag>
|
||||
<el-tag size="mini" closable>超小标签</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同主题
|
||||
|
||||
Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
|
||||
|
||||
:::demo 通过设置`effect`属性来改变主题，默认为 `light`
|
||||
```html
|
||||
<div class="tag-group">
|
||||
<span class="tag-group__title">Dark</span>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
effect="dark">
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="tag-group">
|
||||
<span class="tag-group__title">Plain</span>
|
||||
<el-tag
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
effect="plain">
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ type: '', label: '标签一' },
|
||||
{ type: 'success', label: '标签二' },
|
||||
{ type: 'info', label: '标签三' },
|
||||
{ type: 'danger', label: '标签四' },
|
||||
{ type: 'warning', label: '标签五' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 类型 | string | success/info/warning/danger | — |
|
||||
| closable | 是否可关闭 | boolean | — | false |
|
||||
| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
|
||||
| hit | 是否有边框描边 | boolean | — | false |
|
||||
| color | 背景色 | string | — | — |
|
||||
| size | 尺寸 | string | medium / small / mini | — |
|
||||
| effect | 主题 | string | dark / light / plain | light |
|
||||
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| click | 点击 Tag 时触发的事件 | — |
|
||||
| close | 关闭 Tag 时触发的事件 | — |
|
||||
199
examples/docs/zh-CN/time-picker.md
Normal file
199
examples/docs/zh-CN/time-picker.md
Normal file
@@ -0,0 +1,199 @@
|
||||
## TimePicker 时间选择器
|
||||
|
||||
用于选择或输入日期
|
||||
|
||||
### 固定时间点
|
||||
|
||||
提供几个固定的时间点供用户选择
|
||||
|
||||
:::demo 使用 el-time-select 标签，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="选择时间">
|
||||
</el-time-select>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 任意时间点
|
||||
|
||||
可以选择任意时间
|
||||
|
||||
:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: new Date(2016, 9, 10, 18, 40),
|
||||
value2: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 固定时间范围
|
||||
|
||||
若先选择开始时间，则结束时间内备选项的状态会随之改变
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 任意时间范围
|
||||
|
||||
可选择任意的时间范围
|
||||
|
||||
:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value1"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value2"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | medium / small / mini | — |
|
||||
| placeholder | 非范围选择时的占位内容 | string | — | — |
|
||||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
|
||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||
|
||||
### Time Select Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| start | 开始时间 | string | — | 09:00 |
|
||||
| end | 结束时间 | string | — | 18:00 |
|
||||
| step | 间隔时间 | string | — | 00:30 |
|
||||
| minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
|
||||
| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
|
||||
|
||||
### Time Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||||
| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |
|
||||
|
||||
### Events
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 用户确认选定的值时触发 | 组件绑定值 |
|
||||
| blur | 当 input 失去焦点时触发 | 组件实例 |
|
||||
| focus | 当 input 获得焦点时触发 | 组件实例 |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
153
examples/docs/zh-CN/timeline.md
Normal file
153
examples/docs/zh-CN/timeline.md
Normal file
@@ -0,0 +1,153 @@
|
||||
## Timeline 时间线
|
||||
|
||||
可视化地呈现时间流信息。
|
||||
|
||||
### 基础用法
|
||||
|
||||
Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="block">
|
||||
<div class="radio">
|
||||
排序：
|
||||
<el-radio-group v-model="reverse">
|
||||
<el-radio :label="true">倒序</el-radio>
|
||||
<el-radio :label="false">正序</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<el-timeline :reverse="reverse">
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:timestamp="activity.timestamp">
|
||||
{{activity.content}}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
reverse: true,
|
||||
activities: [{
|
||||
content: '活动按期开始',
|
||||
timestamp: '2018-04-15'
|
||||
}, {
|
||||
content: '通过审核',
|
||||
timestamp: '2018-04-13'
|
||||
}, {
|
||||
content: '创建成功',
|
||||
timestamp: '2018-04-11'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### ⾃定义节点样式
|
||||
|
||||
可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:type="activity.type"
|
||||
:color="activity.color"
|
||||
:size="activity.size"
|
||||
:timestamp="activity.timestamp">
|
||||
{{activity.content}}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activities: [{
|
||||
content: '支持使用图标',
|
||||
timestamp: '2018-04-12 20:46',
|
||||
size: 'large',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-more'
|
||||
}, {
|
||||
content: '支持自定义颜色',
|
||||
timestamp: '2018-04-03 20:46',
|
||||
color: '#0bbd87'
|
||||
}, {
|
||||
content: '支持自定义尺寸',
|
||||
timestamp: '2018-04-03 20:46',
|
||||
size: 'large'
|
||||
}, {
|
||||
content: '默认样式的节点',
|
||||
timestamp: '2018-04-03 20:46'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### ⾃定义时间戳
|
||||
|
||||
当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item timestamp="2018/4/12" placement="top">
|
||||
<el-card>
|
||||
<h4>更新 Github 模板</h4>
|
||||
<p>王小虎 提交于 2018/4/12 20:46</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item timestamp="2018/4/3" placement="top">
|
||||
<el-card>
|
||||
<h4>更新 Github 模板</h4>
|
||||
<p>王小虎 提交于 2018/4/3 20:46</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item timestamp="2018/4/2" placement="top">
|
||||
<el-card>
|
||||
<h4>更新 Github 模板</h4>
|
||||
<p>王小虎 提交于 2018/4/2 20:46</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Timeline Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| reverse | 指定节点排序方向，默认为正序 | boolean | — | false |
|
||||
|
||||
### Timeline-item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| timestamp | 时间戳 | string | - | — |
|
||||
| hide-timestamp | 是否隐藏时间戳 | boolean | — | false |
|
||||
| placement | 时间戳位置 | string | top / bottom | bottom |
|
||||
| type | 节点类型 | string | primary / success / warning / danger / info | - |
|
||||
| color | 节点颜色 | string | hsl / hsv / hex / rgb | - |
|
||||
| size | 节点尺寸 | string | normal / large | normal |
|
||||
| icon | 节点图标 | string | — | - |
|
||||
|
||||
### Timeline-Item Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | Timeline-Item 的内容 |
|
||||
| dot | 自定义节点 |
|
||||
177
examples/docs/zh-CN/tooltip.md
Normal file
177
examples/docs/zh-CN/tooltip.md
Normal file
@@ -0,0 +1,177 @@
|
||||
## Tooltip 文字提示
|
||||
|
||||
常用于展示鼠标 hover 时的提示信息。
|
||||
|
||||
### 基础用法
|
||||
|
||||
在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
|
||||
|
||||
:::demo 使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
|
||||
|
||||
```html
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
|
||||
<el-button>上左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
|
||||
<el-button>上边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
|
||||
<el-button>上右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
|
||||
<el-button>左上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
|
||||
<el-button>左边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
|
||||
<el-button>左下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
|
||||
<el-button>右上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
|
||||
<el-button>右边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
|
||||
<el-button>右下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<el-button>下左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
|
||||
<el-button>下边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<el-button>下右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 主题
|
||||
|
||||
Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
||||
|
||||
|
||||
:::demo 通过设置`effect`属性来改变主题，默认为`dark`。
|
||||
```html
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### 更多 Content
|
||||
|
||||
展示多行文本或者是设置文本内容的格式
|
||||
|
||||
:::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。
|
||||
```html
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">多行信息<br/>第二行信息</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级扩展
|
||||
|
||||
除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
|
||||
|
||||
`transition` 属性可以定制显隐的动画效果，默认为`fade-in-linear`。
|
||||
如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
|
||||
|
||||
事实上，这是基于 [Vue-popper](https://github.com/element-component/vue-popper) 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。
|
||||
当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
tooltip 内不支持 `router-link` 组件，请使用 `vm.$router.push` 代替。
|
||||
|
||||
tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter)，请在 disabled form 元素外层添加一层包裹元素。
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| effect | 默认提供的主题 | String | dark/light | dark |
|
||||
| content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | — |
|
||||
| placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value / v-model | 状态是否可见 | Boolean | — | false |
|
||||
| disabled | Tooltip 是否可用 | Boolean | — | false |
|
||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | el-fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
|
||||
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
|
||||
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
|
||||
| enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
|
||||
| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
|
||||
| tabindex | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
|
||||
249
examples/docs/zh-CN/transfer.md
Normal file
249
examples/docs/zh-CN/transfer.md
Normal file
@@ -0,0 +1,249 @@
|
||||
## Transfer 穿梭框
|
||||
|
||||
### 基础用法
|
||||
:::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
|
||||
```html
|
||||
<template>
|
||||
<el-transfer v-model="value" :data="data"></el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可搜索
|
||||
|
||||
在数据很多的情况下，可以对数据进行搜索和过滤。
|
||||
|
||||
:::demo 设置 `filterable` 为 `true` 即可开启搜索模式。默认情况下，若数据项的 `label` 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 `filter-method` 定义自己的搜索逻辑。`filter-method` 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 `true`，则会在搜索结果中显示对应的数据项。
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
|
||||
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
|
||||
cities.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
pinyin: pinyin[index]
|
||||
});
|
||||
});
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [],
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可自定义
|
||||
|
||||
可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。
|
||||
|
||||
:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 `scoped-slot` 进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 `render-content` 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
|
||||
```html
|
||||
<template>
|
||||
<p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:render-content="renderFunc"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</el-transfer>
|
||||
</div>
|
||||
<p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 数据项属性别名
|
||||
|
||||
默认情况下，Transfer 仅能识别数据项中的 `key`、`label` 和 `disabled` 字段。如果你的数据的字段名不同，可以使用 `props` 属性为它们设置别名。
|
||||
:::demo 本例中的数据源没有 `key` 和 `label` 字段，在功能上与它们相同的字段名为 `value` 和 `desc`。因此可以使用`props` 属性为 `key` 和 `label` 设置别名。
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
value: i,
|
||||
desc: `备选项 ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | array | — | — |
|
||||
| data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | 是否可搜索 | boolean | — | false |
|
||||
| filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
|
||||
| filter-method | 自定义搜索方法 | function | — | — |
|
||||
| target-order | 右侧列表元素的排序策略：若为 `original`，则保持与数据源相同的顺序；若为 `push`，则新加入的元素排在最后；若为 `unshift`，则新加入的元素排在最前 | string | original / push / unshift | original |
|
||||
| titles | 自定义列表标题 | array | — | ['列表 1', '列表 2'] |
|
||||
| button-texts | 自定义按钮文案 | array | — | [ ] |
|
||||
| render-content | 自定义数据项渲染函数 | function(h, option) | — | — |
|
||||
| format | 列表顶部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
|
||||
| props | 数据源的字段别名 | object{key, label, disabled} | — | — |
|
||||
| left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] |
|
||||
| right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] |
|
||||
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| left-footer | 左侧列表底部的内容 |
|
||||
| right-footer | 右侧列表底部的内容 |
|
||||
|
||||
### Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义数据项的内容，参数为 { option } |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right'，指定需要清空的面板 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 右侧列表元素变化时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组 |
|
||||
| left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
|
||||
| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
|
||||
155
examples/docs/zh-CN/transition.md
Normal file
155
examples/docs/zh-CN/transition.md
Normal file
@@ -0,0 +1,155 @@
|
||||
## 内置过渡动画
|
||||
|
||||
Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 [transition 组件文档](https://cn.vuejs.org/v2/api/#transition) 。
|
||||
|
||||
### fade 淡入淡出
|
||||
|
||||
:::demo 提供 `el-fade-in-linear` 和 `el-fade-in` 两种效果。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show = !show">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-fade-in-linear">
|
||||
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
|
||||
</transition>
|
||||
<transition name="el-fade-in">
|
||||
<div v-show="show" class="transition-box">.el-fade-in</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### zoom 缩放
|
||||
|
||||
:::demo 提供 `el-zoom-in-center`，`el-zoom-in-top` 和 `el-zoom-in-bottom` 三种效果。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show2 = !show2">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show2: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### collapse 展开折叠
|
||||
|
||||
使用 `el-collapse-transition` 组件实现折叠展开效果。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show3 = !show3">Click Me</el-button>
|
||||
|
||||
<div style="margin-top: 20px; height: 200px;">
|
||||
<el-collapse-transition>
|
||||
<div v-show="show3">
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按需引入
|
||||
|
||||
```js
|
||||
// fade/zoom 等
|
||||
import 'element-ui/lib/theme-chalk/base.css';
|
||||
// collapse 展开折叠
|
||||
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.component(CollapseTransition.name, CollapseTransition)
|
||||
```
|
||||
877
examples/docs/zh-CN/tree.md
Normal file
877
examples/docs/zh-CN/tree.md
Normal file
@@ -0,0 +1,877 @@
|
||||
## Tree 树形控件
|
||||
|
||||
用清晰的层级结构展示信息，可展开或折叠。
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础的树形结构展示。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可选择
|
||||
|
||||
适用于需要选择层级时使用。
|
||||
|
||||
:::demo 本例还展示了动态加载节点数据的方法。
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
},
|
||||
count: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region1' }, { name: 'region2' }]);
|
||||
}
|
||||
if (node.level > 3) return resolve([]);
|
||||
|
||||
var hasChild;
|
||||
if (node.data.name === 'region1') {
|
||||
hasChild = true;
|
||||
} else if (node.data.name === 'region2') {
|
||||
hasChild = false;
|
||||
} else {
|
||||
hasChild = Math.random() > 0.5;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
var data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + this.count++
|
||||
}, {
|
||||
name: 'zone' + this.count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 懒加载自定义叶子节点
|
||||
|
||||
:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 默认展开和默认选中
|
||||
可将 Tree 的某些节点设置为默认展开或默认选中
|
||||
|
||||
:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
:default-checked-keys="[5]"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
可将 Tree 的某些节点设置为禁用状态
|
||||
|
||||
:::demo 通过`disabled`设置禁用状态。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
:default-checked-keys="[5]">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 3,
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '三级 3-1-1'
|
||||
}, {
|
||||
id: 5,
|
||||
label: '三级 3-1-2',
|
||||
disabled: true
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '二级 2-2',
|
||||
disabled: true,
|
||||
children: [{
|
||||
id: 6,
|
||||
label: '三级 3-2-1'
|
||||
}, {
|
||||
id: 7,
|
||||
label: '三级 3-2-2',
|
||||
disabled: true
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 树节点的选择
|
||||
|
||||
:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<div class="buttons">
|
||||
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
|
||||
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
|
||||
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
|
||||
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
|
||||
<el-button @click="resetChecked">清空</el-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes());
|
||||
},
|
||||
getCheckedKeys() {
|
||||
console.log(this.$refs.tree.getCheckedKeys());
|
||||
},
|
||||
setCheckedNodes() {
|
||||
this.$refs.tree.setCheckedNodes([{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}]);
|
||||
},
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([3]);
|
||||
},
|
||||
resetChecked() {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义节点内容
|
||||
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
|
||||
|
||||
:::demo 可以通过两种方法进行树节点内容的自定义：`render-content`和 scoped slot。使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数`node`和`data`，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以`render-content`示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
|
||||
```html
|
||||
<div class="custom-tree-container">
|
||||
<div class="block">
|
||||
<p>使用 render-content</p>
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:render-content="renderContent">
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="block">
|
||||
<p>使用 scoped slot</p>
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="() => append(data)">
|
||||
Append
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="() => remove(node, data)">
|
||||
Delete
|
||||
</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let id = 1000;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const data = [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}];
|
||||
return {
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
data: JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
append(data) {
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(node, data) {
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data;
|
||||
const index = children.findIndex(d => d.id === data.id);
|
||||
children.splice(index, 1);
|
||||
},
|
||||
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
<span>
|
||||
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### 节点过滤
|
||||
通过关键字过滤树节点
|
||||
|
||||
:::demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
|
||||
```html
|
||||
<el-input
|
||||
placeholder="输入关键字进行过滤"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 手风琴模式
|
||||
|
||||
对于同一级的节点，每次只能展开一个
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
accordion
|
||||
@node-click="handleNodeClick">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可拖拽节点
|
||||
|
||||
通过 draggable 属性可让节点变为可拖拽。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
@node-drag-enter="handleDragEnter"
|
||||
@node-drag-leave="handleDragLeave"
|
||||
@node-drag-over="handleDragOver"
|
||||
@node-drag-end="handleDragEnd"
|
||||
@node-drop="handleDrop"
|
||||
draggable
|
||||
:allow-drop="allowDrop"
|
||||
:allow-drag="allowDrag">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
id: 11,
|
||||
label: '三级 3-2-1'
|
||||
}, {
|
||||
id: 12,
|
||||
label: '三级 3-2-2'
|
||||
}, {
|
||||
id: 13,
|
||||
label: '三级 3-2-3'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDragStart(node, ev) {
|
||||
console.log('drag start', node);
|
||||
},
|
||||
handleDragEnter(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag enter: ', dropNode.label);
|
||||
},
|
||||
handleDragLeave(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag leave: ', dropNode.label);
|
||||
},
|
||||
handleDragOver(draggingNode, dropNode, ev) {
|
||||
console.log('tree drag over: ', dropNode.label);
|
||||
},
|
||||
handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
||||
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
|
||||
},
|
||||
handleDrop(draggingNode, dropNode, dropType, ev) {
|
||||
console.log('tree drop: ', dropNode.label, dropType);
|
||||
},
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
if (dropNode.data.label === '二级 3-1') {
|
||||
return type !== 'inner';
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
allowDrag(draggingNode) {
|
||||
return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |
|
||||
| data | 展示数据 | array | — | — |
|
||||
| empty-text | 内容为空的时候展示的文本 | String | — | — |
|
||||
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | — | — |
|
||||
| props | 配置选项，具体看下表 | object | — | — |
|
||||
| render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | — | true |
|
||||
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | function(node, resolve) | — | — |
|
||||
| render-content | 树节点的内容区的渲染 Function | Function(h, { node, data, store } | — | — |
|
||||
| highlight-current | 是否高亮当前选中节点，默认值是 false。 | boolean | — | false |
|
||||
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
|
||||
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true |
|
||||
| check-on-click-node | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean | — | false |
|
||||
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
||||
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
|
||||
| show-checkbox | 节点是否可被选择 | boolean | — | false |
|
||||
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false |
|
||||
| default-checked-keys | 默认勾选的节点的 key 的数组 | array | — | — |
|
||||
| current-node-key | 当前选中的节点 | string, number | — | — |
|
||||
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
|
||||
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
|
||||
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
|
||||
| icon-class | 自定义树节点的图标 | string | - | - |
|
||||
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
|
||||
| draggable | 是否开启拖拽节点功能 | boolean | — | false |
|
||||
| allow-drag | 判断节点能否被拖拽 | Function(node) | — | — |
|
||||
| allow-drop | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type) | — | — |
|
||||
|
||||
### props
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| -------- | ----------------- | ------ | ---- | ---- |
|
||||
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
|
||||
| children | 指定子树为节点对象的某个属性值 | string | — | — |
|
||||
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | — | — |
|
||||
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | — | — |
|
||||
|
||||
### 方法
|
||||
`Tree` 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。
|
||||
`Tree` 拥有如下方法：
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| --------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| filter | 对树节点进行筛选操作 | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
|
||||
| updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组 |
|
||||
| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 `false` 2. 是否包含半选节点，默认值为 `false` |
|
||||
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (nodes) 接收勾选节点数据的数组 |
|
||||
| getCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |
|
||||
| setCheckedKeys | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false` |
|
||||
| setChecked | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
|
||||
| getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组 | - |
|
||||
| getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |
|
||||
| getCurrentKey | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |
|
||||
| getCurrentNode | 获取当前被选中节点的 data，若没有节点被选中则返回 null | — |
|
||||
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
|
||||
| setCurrentNode | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
|
||||
| getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |
|
||||
| remove | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性 | (data) 要删除的节点的 data 或者 node |
|
||||
| append | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node |
|
||||
| insertBefore | 为 Tree 的一个节点的前面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node |
|
||||
| insertAfter | 为 Tree 的一个节点的后面增加一个节点 | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| -------------- | -------------- | ---------------------------------------- |
|
||||
| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
|
||||
| check-change | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
|
||||
| check | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
|
||||
| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
|
||||
| node-expand | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
|
||||
| node-collapse | 节点被关闭时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
|
||||
| node-drag-start | 节点开始拖拽时触发的事件 | 共两个参数，依次为：被拖拽节点对应的 Node、event |
|
||||
| node-drag-enter | 拖拽进入其他节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event |
|
||||
| node-drag-leave | 拖拽离开某个节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event |
|
||||
| node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event |
|
||||
| node-drag-end | 拖拽结束时（可能未成功）触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event |
|
||||
| node-drop | 拖拽成功完成时触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event |
|
||||
|
||||
### Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义树节点的内容，参数为 { node, data } |
|
||||
151
examples/docs/zh-CN/typography.md
Normal file
151
examples/docs/zh-CN/typography.md
Normal file
@@ -0,0 +1,151 @@
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
|
||||
const varMap = [
|
||||
'$--font-size-extra-large',
|
||||
'$--font-size-large',
|
||||
'$--font-size-medium',
|
||||
'$--font-size-base',
|
||||
'$--font-size-small',
|
||||
'$--font-size-extra-small'
|
||||
];
|
||||
const original = {
|
||||
'font_size_extra_large': '20px',
|
||||
'font_size_large': '18px',
|
||||
'font_size_medium': '16px',
|
||||
'font_size_base': '14px',
|
||||
'font_size_small': '13px',
|
||||
'font_size_extra_small': '12px'
|
||||
}
|
||||
export default {
|
||||
created() {
|
||||
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
|
||||
},
|
||||
mounted() {
|
||||
this.setGlobal();
|
||||
},
|
||||
methods: {
|
||||
tintColor(color, tint) {
|
||||
return tintColor(color, tint);
|
||||
},
|
||||
setGlobal() {
|
||||
if (window.userThemeConfig) {
|
||||
this.global = window.userThemeConfig.global;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
global: {},
|
||||
'font_size_extra_large': '',
|
||||
'font_size_large': '',
|
||||
'font_size_medium': '',
|
||||
'font_size_base': '',
|
||||
'font_size_small': '',
|
||||
'font_size_extra_small': ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
global: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
varMap.forEach((v) => {
|
||||
const key = v.replace('$--', '').replace(/-/g, '_')
|
||||
if (value[v]) {
|
||||
this[key] = value[v]
|
||||
} else {
|
||||
this[key] = original[key]
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
## Typography 字体
|
||||
|
||||
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
|
||||
|
||||
### 字体
|
||||
<div class="demo-term-box">
|
||||
<img src="../../assets/images/term-pingfang.png" alt="">
|
||||
<img src="../../assets/images/term-hiragino.png" alt="">
|
||||
<img src="../../assets/images/term-microsoft.png" alt="">
|
||||
<img src="../../assets/images/term-sf.png" alt="">
|
||||
<img src="../../assets/images/term-helvetica.png" alt="">
|
||||
<img src="../../assets/images/term-arial.png" alt="">
|
||||
</div>
|
||||
|
||||
### 字号
|
||||
|
||||
<table class="demo-typo-size">
|
||||
<tbody>
|
||||
<tr
|
||||
>
|
||||
<td>层级</td>
|
||||
<td>字体大小</td>
|
||||
<td class="color-dark-light">举例</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_extra_small }"
|
||||
>
|
||||
<td>辅助文字</td>
|
||||
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_small }"
|
||||
>
|
||||
<td>正文（小）</td>
|
||||
<td class="color-dark-light">{{font_size_small}} Small</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_base }"
|
||||
>
|
||||
<td>正文</td>
|
||||
<td class="color-dark-light">{{font_size_base}} Base</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_medium }"
|
||||
>
|
||||
<td>小标题</td>
|
||||
<td class="color-dark-light">{{font_size_medium}} Medium</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_large }"
|
||||
>
|
||||
<td>标题</td>
|
||||
<td class="color-dark-light">{{font_size_large}} large</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
<tr
|
||||
:style="{ fontSize: font_size_extra_large }"
|
||||
>
|
||||
<td>主标题</td>
|
||||
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
|
||||
<td>用 Element 快速搭建页面</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### 行高
|
||||
|
||||
<div>
|
||||
<img class="lineH-left" src="~examples/assets/images/typography.png" />
|
||||
<ul class="lineH-right">
|
||||
<li>line-height:1 <span>无行高</span></li>
|
||||
<li>line-height:1.3 <span>紧凑</span></li>
|
||||
<li>line-height:1.5 <span>常规</span></li>
|
||||
<li>line-height:1.7 <span>宽松</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
### Font-family 代码
|
||||
|
||||
```css
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
```
|
||||
391
examples/docs/zh-CN/upload.md
Normal file
391
examples/docs/zh-CN/upload.md
Normal file
@@ -0,0 +1,391 @@
|
||||
## Upload 上传
|
||||
|
||||
通过点击或者拖拽上传文件
|
||||
|
||||
### 点击上传
|
||||
|
||||
:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置`limit`和`on-exceed`来限制上传文件的个数和定义超出限制时的行为。可通过设置`before-remove`来阻止文件移除操作。
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 用户头像上传
|
||||
|
||||
使用 `before-upload` 限制用户上传的图片格式和大小。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 照片墙
|
||||
|
||||
使用 `list-type` 属性来设置文件列表的样式。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 文件缩略图
|
||||
|
||||
使用 `scoped-slot` 去设置缩略图模版。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:auto-upload="false">
|
||||
<i slot="default" class="el-icon-plus"></i>
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img
|
||||
class="el-upload-list__item-thumbnail"
|
||||
:src="file.url" alt=""
|
||||
>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleDownload(file)"
|
||||
>
|
||||
<i class="el-icon-download"></i>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图片列表缩略图
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 上传文件列表控制
|
||||
|
||||
通过 `on-change` 钩子函数来对列表进行控制
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(file, fileList) {
|
||||
this.fileList = fileList.slice(-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 拖拽上传
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
:::
|
||||
|
||||
### 手动上传
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| action | 必选参数，上传的地址 | string | — | — |
|
||||
| headers | 设置上传的请求头部 | object | — | — |
|
||||
| multiple | 是否支持多选文件 | boolean | — | — |
|
||||
| data | 上传时附带的额外参数 | object | — | — |
|
||||
| name | 上传的文件字段名 | string | — | file |
|
||||
| with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |
|
||||
| show-file-list | 是否显示已上传文件列表 | boolean | — | true |
|
||||
| drag | 是否启用拖拽上传 | boolean | — | false |
|
||||
| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |
|
||||
| on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | — |
|
||||
| on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
|
||||
| on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
|
||||
| on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
|
||||
| on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
|
||||
| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
|
||||
| before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
|
||||
| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。| function(file, fileList) | — | — |
|
||||
| list-type | 文件列表的类型 | string | text/picture/picture-card | text |
|
||||
| auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
|
||||
| file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
|
||||
| http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| limit | 最大允许上传个数 | number | — | — |
|
||||
| on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |
|
||||
|
||||
### Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| trigger | 触发文件选择框的内容 |
|
||||
| tip | 提示说明文字 |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|----------- |-------------- | -- |
|
||||
| clearFiles | 清空已上传的文件列表（该方法不支持在 before-upload 中调用） | — |
|
||||
| abort | 取消上传请求 | （ file: fileList 中的 file 对象 ） |
|
||||
| submit | 手动上传文件列表 | — |
|
||||
Reference in New Issue
Block a user