mirror of https://github.com/ElemeFE/element
Leon Zhang
GitHub
commit
173825f94b
|
|
@ -5,7 +5,11 @@
|
|||
<!--
|
||||
issue 仅用于提交 bug 或 feature 以及设计相关的内容，其它疑问请到 gitter 聊天室找社区里面的小伙伴聊一聊：https://gitter.im/ElemeFE/element
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
有问题请提供 Demo 或者 GitHub 仓库地址，节省大家时间
|
||||
-->
|
||||
|
||||
<!--
|
||||
Issues are exclusively for bug reports and feature requests. For other questions, please visit gitter: https://gitter.im/ElemeFE/element
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -1,18 +1,10 @@
|
|||
sudo: false
|
||||
language: node_js
|
||||
node_js: stable
|
||||
cache:
|
||||
directories:
|
||||
- $HOME/.npm
|
||||
- $HOME/.yarn-cache
|
||||
before_install:
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
- export PATH=$HOME/.yarn/bin:$PATH
|
||||
- export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
|
||||
- export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
|
||||
- export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
|
||||
install: yarn install
|
||||
script: yarn run test
|
||||
after_success:
|
||||
- sh build/deploy-ci.sh
|
||||
- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls
|
||||
|
|
|
|||
|
|
@ -1,5 +1,55 @@
|
|||
## Changelog
|
||||
|
||||
### 1.1.1
|
||||
|
||||
*2016-12-29*
|
||||
|
||||
- Fixed compatibility issue with latest Vue due to compilation
|
||||
|
||||
### 1.1.0 Helium
|
||||
|
||||
*2016-12-29*
|
||||
|
||||
New features:
|
||||
- Two brand new components: Carousel and Collapse
|
||||
- SSR supported
|
||||
- Scrollbars' style inside components is upgraded
|
||||
- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
|
||||
- Table now supports expandable rows
|
||||
- DatePicker now supports specifying the first day of week
|
||||
- TimeSelect now supports `maxTime`
|
||||
- Autocomplete now supports `popper-class`
|
||||
- To customize template of Tab-Pane, now you can use the `slot` named `label`
|
||||
|
||||
Fixes:
|
||||
- `change` event of DatePicker incorrectly triggering multiple times, #2070
|
||||
- Width shaking of tab-pane while initializing, #1883
|
||||
|
||||
Breaking changes:
|
||||
- Only compatible with Vue 2.1.6 and beyond
|
||||
- Parameters of Form validateField() methods are updated
|
||||
- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
|
||||
- The box models of Input and Select are updated from `block` to `inline-block`
|
||||
- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
|
||||
- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
|
||||
|
||||
### 1.0.9
|
||||
|
||||
*2016-12-27*
|
||||
|
||||
- Fixed DatePicker incorrectly triggering input event, #1834
|
||||
- Fixed Tree reporting `event is undefined` error in Firefox, #1945
|
||||
- Added `change` event for DatePicker, whose parameter is the formatted value, #1841
|
||||
- Added `header-align` attribute for Table, #1424
|
||||
- Fixed single select Table's highlight style not removing when data is removed, #1890
|
||||
- Fixed filterable Select lagging issue with more options, #1933
|
||||
- Fixed multiple disabled Select not disabling removing selected options issue, #2001
|
||||
- Fixed Col style not working in `xs`, #2011
|
||||
- Added `value` attribute for Tab, #2008
|
||||
- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999
|
||||
- Added `clearable` attribute for DatePicker, #1994
|
||||
- Fixed Form always passing validation in async mode, #1936
|
||||
|
||||
### 1.0.8
|
||||
|
||||
*2016-12-20*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,52 @@
|
|||
## 更新日志
|
||||
|
||||
### 1.1.1
|
||||
*2016-12-29*
|
||||
|
||||
- 修复由于编译而出现的不兼容新版 Vue 的问题
|
||||
|
||||
### 1.1.0 Helium
|
||||
*2016-12-29*
|
||||
|
||||
新特性：
|
||||
- 新增 Carousel、Collapse 组件
|
||||
- 支持 SSR
|
||||
- 组件内的滚动条样式优化
|
||||
- Table 支持通过 [Scoped Slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots) 传入模板；原来的 `inline-template` 仍然兼容，但是不再推荐使用，未来可能会被移除
|
||||
- Table 支持展开行功能(Expandable rows)
|
||||
- DatePicker 支持指定周起始日(first day of week)
|
||||
- TimeSelect 支持设置 `maxTime`
|
||||
- Autocomplete 新增 `popper-class`属性
|
||||
- Tab-Pane 新增 name 为 label 的具名 `slot`，用于实现自定义标签内容
|
||||
|
||||
修复：
|
||||
- DatePicker 的 `change` 事件错误地触发多次的问题，#2070
|
||||
- Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883
|
||||
|
||||
非兼容性更新：
|
||||
- 最低兼容 Vue 2.1.6
|
||||
- Form validateField() 方法回调的参数更新
|
||||
- Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入
|
||||
- Input 和 Select 盒模型从 `block` 修改为 `inline-block`
|
||||
- Tabs 盒模型从 `inline-block` 修改为 `block`，Tab-Pane 移除 `label-content` 属性
|
||||
- Autocomplete 下拉列表现在直接插入到 `<body>` 标签下，而不是 `<el-autocomplete>` 下
|
||||
|
||||
### 1.0.9
|
||||
*2016-12-27*
|
||||
|
||||
- 修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834
|
||||
- 修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945
|
||||
- 新增 DatePicker 的 `change` 事件，返回和输入框一致的格式化后的值，#1841
|
||||
- 新增 Table 的 `header-align` 属性，#1424
|
||||
- 修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890
|
||||
- 修复可搜索的 Select 在选项较多时的卡顿问题，#1933
|
||||
- 修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001
|
||||
- 修复 Col `xs` 分辨率下样式无效的问题，#2011
|
||||
- 新增 Tab 组件的 `value` 属性并支持 `v-model` 用法，#2008
|
||||
- 修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999
|
||||
- 新增 DatePicker 的 `clearable` 属性，#1994
|
||||
- 修复 Form 异步验证时某些条件下总是验证通过的问题，#1936
|
||||
|
||||
### 1.0.8
|
||||
*2016-12-20*
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export default ${ComponentName};`
|
|||
filename: 'cooking.conf.js',
|
||||
content: `var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
var config = require('../../build/config');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
|
|
@ -52,7 +53,7 @@ module.exports = cooking.resolve();`
|
|||
{
|
||||
filename: 'package.json',
|
||||
content: `{
|
||||
"name": "el-${componentname}",
|
||||
"name": "element-${componentname}",
|
||||
"version": "0.0.0",
|
||||
"description": "A ${componentname} component for Vue.js.",
|
||||
"keywords": [
|
||||
|
|
@ -75,7 +76,7 @@ module.exports = cooking.resolve();`
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'el-${componentname}'
|
||||
name: 'El${ComponentName}'
|
||||
};
|
||||
</script>`
|
||||
},
|
||||
|
|
@ -90,16 +91,16 @@ export default {
|
|||
{
|
||||
filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
|
||||
content: `import { createTest, destroyVM } from '../util';
|
||||
import Alert from 'packages/{{componentname}}';
|
||||
import ${ComponentName} from 'packages/${componentname}';
|
||||
|
||||
describe('{{ComponentName}}', () => {
|
||||
describe('${ComponentName}', () => {
|
||||
let vm;
|
||||
afterEach(() => {
|
||||
destroyVM(vm);
|
||||
});
|
||||
|
||||
it('create', () => {
|
||||
vm = createTest({{ComponentName}}, true);
|
||||
vm = createTest(${ComponentName}, true);
|
||||
expect(vm.$el).to.exist;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
var cooking = require('cooking');
|
||||
var config = require('./config');
|
||||
var md = require('markdown-it')();
|
||||
var CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
var striptags = require('./strip-tags');
|
||||
var slugify = require('transliteration').slugify;
|
||||
var isProd = process.env.NODE_ENV === 'production';
|
||||
|
|
@ -113,5 +114,8 @@ if (isProd) {
|
|||
cooking.add('externals.vue-router', 'VueRouter');
|
||||
}
|
||||
|
||||
cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([
|
||||
{ from: 'examples/versions.json' }
|
||||
]));
|
||||
cooking.add('vue.preserveWhitespace', false);
|
||||
module.exports = cooking.resolve();
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cooking.set({
|
|||
extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'],
|
||||
minimize: false,
|
||||
alias: Object.assign(config.alias, {
|
||||
'vue$': 'vue/dist/vue.js'
|
||||
'vue$': 'vue/dist/vue.common.js'
|
||||
}),
|
||||
postcss: function(webapck) {
|
||||
return [
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ if [ "$TRAVIS_TAG" ]; then
|
|||
export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
|
||||
echo $SUB_FOLDER
|
||||
|
||||
SUB_FOLDER='1.0'
|
||||
SUB_FOLDER='1.1'
|
||||
mkdir $SUB_FOLDER
|
||||
rm -rf *.js *.css *.map static
|
||||
rm -rf $SUB_FOLDER/**
|
||||
|
|
|
|||
|
|
@ -53,5 +53,10 @@
|
|||
"card": "./packages/card/index.js",
|
||||
"rate": "./packages/rate/index.js",
|
||||
"steps": "./packages/steps/index.js",
|
||||
"step": "./packages/step/index.js"
|
||||
"step": "./packages/step/index.js",
|
||||
"carousel": "./packages/carousel/index.js",
|
||||
"scrollbar": "./packages/scrollbar/index.js",
|
||||
"carousel-item": "./packages/carousel-item/index.js",
|
||||
"collapse": "./packages/collapse/index.js",
|
||||
"collapse-item": "./packages/collapse-item/index.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<p class="footer-main-title">Element 1.0 Hydrogen</p>
|
||||
<p class="footer-main-title">Element {{ version }} Helium</p>
|
||||
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
|
||||
<a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
|
||||
</div>
|
||||
|
|
@ -134,8 +134,15 @@
|
|||
|
||||
<script type="text/babel">
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.path.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -12,6 +12,42 @@
|
|||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
margin-bottom: 6px;
|
||||
width: 100%;
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
color: #5e6d82;
|
||||
line-height: 40px;
|
||||
transition: .2s;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
i {
|
||||
transition: .2s;
|
||||
font-size: 12px;
|
||||
color: #d3dce6;
|
||||
}
|
||||
@when active {
|
||||
span, i {
|
||||
color: #20a0ff;
|
||||
}
|
||||
i {
|
||||
transform: rotateZ(180deg) translateY(2px);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
span, i {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
|
|
@ -53,9 +89,37 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.nav-dropdown-list {
|
||||
width: 120px;
|
||||
margin-top: -8px;
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="side-nav" :style="navStyle">
|
||||
<el-dropdown
|
||||
v-show="isComponentPage"
|
||||
trigger="click"
|
||||
class="nav-dropdown"
|
||||
:class="{ 'is-active': dropdownVisible }">
|
||||
<span>
|
||||
{{ langConfig.dropdown }}{{ version }}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
:offset="-80"
|
||||
class="nav-dropdown-list"
|
||||
@input="handleDropdownToggle">
|
||||
<el-dropdown-item
|
||||
v-for="item in Object.keys(versions)"
|
||||
@click.native="switchVersion(item)">
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<ul>
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
|
||||
|
|
@ -99,6 +163,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
|
|
@ -111,7 +178,10 @@
|
|||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
isSmallScreen: false
|
||||
isSmallScreen: false,
|
||||
versions: [],
|
||||
version,
|
||||
dropdownVisible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -122,9 +192,19 @@
|
|||
computed: {
|
||||
navStyle() {
|
||||
return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
|
||||
},
|
||||
isComponentPage() {
|
||||
return /^component-/.test(this.$route.name);
|
||||
},
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchVersion(version) {
|
||||
if (version === this.version) return;
|
||||
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
|
||||
},
|
||||
handleResize() {
|
||||
this.isSmallScreen = document.documentElement.clientWidth < 768;
|
||||
this.handlePathChange();
|
||||
|
|
@ -160,8 +240,21 @@
|
|||
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
|
||||
this.hideAllMenu();
|
||||
event.currentTarget.nextElementSibling.style.height = 'auto';
|
||||
},
|
||||
handleDropdownToggle(visible) {
|
||||
this.dropdownVisible = visible;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = _ => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
this.versions = JSON.parse(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.open('GET', '/versions.json');
|
||||
xhr.send();
|
||||
},
|
||||
mounted() {
|
||||
this.handleResize();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
|
|
|
|||
|
|
@ -165,8 +165,7 @@ Description includes a message with more detailed information.
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| **title** | title **REQUIRED** | string | — | — |
|
||||
| type | component type | string | success/warning/info/error | info |
|
||||
| description | supportive text | string | — | — |
|
||||
| render-content | render function for content area, overrides `description` | function(h) | — | — |
|
||||
| description | descriptive text. Can also be passed with the default slot | string | — | — |
|
||||
| closable | if closable or not | boolean | — | true |
|
||||
| close-text | customized close button text | string | — | — |
|
||||
| show-icon | if a type icon is displayed | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -134,4 +134,5 @@ Use a red dot to mark content that needs to be noticed.
|
|||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | display value | string, number | — | — |
|
||||
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
|
||||
| is-dot | if a little dot is displayed | boolean | — | false |
|
||||
| is-dot | if a little dot is displayed | boolean | — | false |
|
||||
| hidden | hidden badge | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
import { addClass } from 'element-ui/src/utils/dom';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -78,7 +78,7 @@ Different colors represent different meanings.
|
|||
```
|
||||
:::
|
||||
|
||||
### Icon Button
|
||||
### Icon Button
|
||||
|
||||
Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,189 @@
|
|||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const demos = document.querySelectorAll('.source');
|
||||
demos[0].style.padding = '0';
|
||||
demos[0].className += ' small';
|
||||
demos[3].className += ' medium';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Carousel
|
||||
|
||||
Loop a series of images or texts in a limited space
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is hovered (default)</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is clicked</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<h3>{{ 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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Indicators
|
||||
|
||||
Indicators can be displayed outside the carousel
|
||||
|
||||
::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arrows
|
||||
|
||||
You can define when arrows are displayed
|
||||
|
||||
::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4">
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Card mode
|
||||
|
||||
When a page is wide enough but has limited height, you can activate card mode for carousels
|
||||
|
||||
::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6">
|
||||
<h3>{{ 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
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | height of the carousel | number | — | 300 |
|
||||
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
|
||||
| trigger | how indicators are triggered | string | click | — |
|
||||
| autoplay | whether automatically loop the slides | boolean | — | true |
|
||||
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
|
||||
| indicator-position | position of the indicators | string | outside/none | — |
|
||||
| arrow | when arrows are shown | string | always/hover/never | hover |
|
||||
| type | type of the Carousel | string | card | — |
|
||||
|
||||
### Carousel Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
|
||||
|
||||
### Carousel Methods
|
||||
| Method | Description | Parameters |
|
||||
|---------- |-------------- | -- |
|
||||
| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
|
||||
| prev | switch to the previous slide | — |
|
||||
| next | switch to the next slide | — |
|
||||
|
||||
### Carousel-Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | name of the item, can be used in `setActiveItem` | string | — | — |
|
||||
|
|
@ -40,7 +40,7 @@ Checkbox can be used alone to switch between two states.
|
|||
```
|
||||
:::
|
||||
|
||||
## Disabled State
|
||||
### Disabled State
|
||||
|
||||
Disabled state for checkbox.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
activeName: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Collapse
|
||||
|
||||
Use Collapse to store contents.
|
||||
|
||||
### Basic usage
|
||||
|
||||
You can expand multiple panels
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Accordion
|
||||
|
||||
In accordion mode, only one panel can be expanded at once
|
||||
|
||||
:::demo Activate accordion mode using the `accordion` attribute.
|
||||
```html
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom title
|
||||
|
||||
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item name="1">
|
||||
<template slot="title">
|
||||
Consistency<i class="header-icon el-icon-information"></i>
|
||||
</template>
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
```
|
||||
:::
|
||||
|
||||
### Collapse Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| accordion | whether to activate accordion mode | boolean | — | false |
|
||||
| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
|
||||
|
||||
### Collapse Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | unique identification of the panel | string/number | — | — |
|
||||
| title | title of the panel | string | — | — |
|
||||
|
|
@ -51,7 +51,7 @@ Just edit `element-variables.css`, e.g. changing the theme color to red:
|
|||
```
|
||||
|
||||
### Build theme
|
||||
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`:
|
||||
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
|
||||
```shell
|
||||
et
|
||||
|
||||
|
|
|
|||
|
|
@ -191,8 +191,7 @@ Picking a date range is supported.
|
|||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
placeholder="Pick a range"
|
||||
style="width: 220px">
|
||||
placeholder="Pick a range">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -202,8 +201,7 @@ Picking a date range is supported.
|
|||
type="daterange"
|
||||
align="right"
|
||||
placeholder="Pick a range"
|
||||
:picker-options="pickerOptions2"
|
||||
style="width: 220px">
|
||||
:picker-options="pickerOptions2">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -253,9 +251,10 @@ Picking a date range is supported.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | - | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| editable | whether the input is editable | boolean | - | true |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
|
|
@ -268,9 +267,16 @@ Picking a date range is supported.
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when input value changes | formatted value |
|
||||
|
|
|
|||
|
|
@ -147,8 +147,7 @@ Select date and time in one picker.
|
|||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetimerange"
|
||||
placeholder="Select time range"
|
||||
style="width:350px">
|
||||
placeholder="Select time range">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -158,8 +157,7 @@ Select date and time in one picker.
|
|||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="Select time range"
|
||||
align="right"
|
||||
style="width:350px">
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -195,7 +193,7 @@ Select date and time in one picker.
|
|||
}
|
||||
}]
|
||||
},
|
||||
value3: '',
|
||||
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
|
|
@ -208,8 +206,9 @@ Select date and time in one picker.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | - | false |
|
||||
| editable | whether the input is editable | boolean | - | true |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
|
|
@ -229,3 +228,10 @@ Select date and time in one picker.
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when input value changes | formatted value |
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
},
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,6 +129,36 @@ Use `hide-on-click` to define if menu closes on clicking.
|
|||
```
|
||||
:::
|
||||
|
||||
### Command event
|
||||
|
||||
Clicking each dropdown item fires an event whose parameter is assigned by each item.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="a">Action 1</el-dropdown-item>
|
||||
<el-dropdown-item command="b">Action 2</el-dropdown-item>
|
||||
<el-dropdown-item command="c">Action 3</el-dropdown-item>
|
||||
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Dropdown Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
@ -136,7 +169,7 @@ Use `hide-on-click` to define if menu closes on clicking.
|
|||
| size | component size, refer to `Button` component | string | large, small, mini | — |
|
||||
| menu-align | horizontal alignment | string | start/end | end |
|
||||
| trigger | how to trigger | string | hover/click | hover |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | boolean | - | true |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
|
||||
|
||||
### Dropdown Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:after,&:before {
|
||||
&:after, &:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -263,18 +263,12 @@
|
|||
.demo-ruleForm {
|
||||
width: 480px;
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
vertical-align: top;
|
||||
|
|
@ -809,11 +803,11 @@ Form component allows you to verify your data, helping you find and correct erro
|
|||
|
||||
### Form Methods
|
||||
|
||||
| Method | Description |
|
||||
| ---- | ---- |
|
||||
| validate(cb) | the method to validate the whole form |
|
||||
| validateField(prop, cb) | the method to validate a certain form item |
|
||||
| resetFields | reset all the fields and remove validation result |
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| validate | the method to validate the whole form | Function(callback: Function(boolean)) |
|
||||
| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | reset all the fields and remove validation result | — |
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,26 @@ webpack.config.js
|
|||
}
|
||||
```
|
||||
|
||||
## Compatible with `vue-i18n`
|
||||
|
||||
Element is compatible with [vue-i18n](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
|
||||
|
||||
```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)
|
||||
```
|
||||
|
||||
|
||||
Currently Element ships with the following languages:
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-CN)</li>
|
||||
|
|
|
|||
|
|
@ -83,68 +83,57 @@
|
|||
<style>
|
||||
.demo-input.demo-en-US {
|
||||
.el-select .el-input {
|
||||
width: 120px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
width: 110px;
|
||||
}
|
||||
.el-input {
|
||||
width: 180px;
|
||||
|
||||
& + .el-input,
|
||||
& + .el-textarea {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.el-textarea {
|
||||
width: 414px;
|
||||
}
|
||||
.el-input-group {
|
||||
min-width: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-group + .el-input-group {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.el-autocomplete {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-input {
|
||||
&.el-input {
|
||||
display: inline-block;
|
||||
.demo-input-size {
|
||||
.el-input {
|
||||
vertical-align: top;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
&.el-autocomplete {
|
||||
display: inline-block;
|
||||
margin: 10px 0 0;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
.tac {
|
||||
.demo-autocomplete {
|
||||
text-align: center;
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
|
||||
.el-autocomplete {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.el-row.border-grid {
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
}
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
}
|
||||
.el-autocomplete__suggestions.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -159,10 +148,7 @@ Input data using mouse or keyboard.
|
|||
::: demo
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input">
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input"></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -263,26 +249,26 @@ Prepend or append an element, generally a label or a button.
|
|||
::: demo Use `slot` to distribute elements that prepend or append to Input.
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
<el-option label="Tel" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="search"></el-button>
|
||||
</el-input>
|
||||
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<el-input placeholder="请输入内容" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input5">
|
||||
<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="search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -303,28 +289,24 @@ export default {
|
|||
|
||||
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||||
```html
|
||||
<div>
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="large"
|
||||
placeholder="Please input"
|
||||
placeholder="请输入内容"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
placeholder="Please input"
|
||||
placeholder="请输入内容"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="small"
|
||||
placeholder="Please input"
|
||||
placeholder="请输入内容"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="mini"
|
||||
placeholder="Please input"
|
||||
placeholder="请输入内容"
|
||||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
|
|
@ -344,30 +326,30 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### Auto complete
|
||||
### Autocomplete
|
||||
|
||||
You can get some recommended tips based on the current input.
|
||||
|
||||
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
||||
```html
|
||||
<el-row class="border-grid">
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">list suggestions when activated</div>
|
||||
<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="Please input"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">list suggestions on input</div>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">输入后匹配输入建议</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
placeholder="请输入内容"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
|
|
@ -424,7 +406,7 @@ Customize how suggestions are displayed.
|
|||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
class="my-autocomplete"
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
custom-item="my-item-en"
|
||||
|
|
@ -591,7 +573,10 @@ Search data from server-side.
|
|||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|click | triggers when the icon inside Input is clicked | event object |
|
||||
|click | triggers when the icon inside Input is clicked | (event: Event) |
|
||||
| blur | triggers when the icon inside Input is blur | (event: Event) |
|
||||
| focus | triggers when the icon inside Input is focus | (event: Event) |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
|
||||
### Autocomplete Attributes
|
||||
|
||||
|
|
@ -602,6 +587,7 @@ Attribute | Description | Type | Options | Default
|
|||
|value | binding value | string | — | — |
|
||||
|custom-item | component name of your customized suggestion list item | string | — | — |
|
||||
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
||||
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
||||
|
||||
### Autocomplete Events
|
||||
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ You can specify column offsets.
|
|||
|
||||
### Alignment
|
||||
|
||||
Flexible alignment of columns.
|
||||
Use the flex layout to make flexible alignment of columns.
|
||||
|
||||
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
||||
```html
|
||||
|
|
@ -276,6 +276,40 @@ Flexible alignment of columns.
|
|||
```
|
||||
:::
|
||||
|
||||
### Responsive Layout
|
||||
|
||||
Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3"><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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Row Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
## Pagination
|
||||
## Pagination
|
||||
|
||||
If you have too much data to display in one page, use pagination.
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ Add more modules based on your scenario.
|
|||
```
|
||||
:::
|
||||
<script>
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
import { addClass } from 'element-ui/src/utils/dom';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -228,5 +228,5 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
### Events
|
||||
| Event Name | Description | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| show | triggers when popover shows | - |
|
||||
| hide | triggers when popover hides | - |
|
||||
| show | triggers when popover shows | — |
|
||||
| hide | triggers when popover hides | — |
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Typical configurations for these config files are:
|
|||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.0.0",
|
||||
"vue": "^2.0.5"
|
||||
"vue": "^2.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -568,15 +568,13 @@ When there are too many columns, you can fix some of them.
|
|||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
:context="_self"
|
||||
fixed="right"
|
||||
label="Operations"
|
||||
width="120">
|
||||
<span>
|
||||
<template scope="scope">
|
||||
<el-button @click="handleClick" type="text" size="small">Detail</el-button>
|
||||
<el-button type="text" size="small">Edit</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -781,19 +779,17 @@ When the the data is dynamically changed, you might want the table to have a max
|
|||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
:context="_self"
|
||||
fixed="right"
|
||||
label="Operations"
|
||||
width="120">
|
||||
<span>
|
||||
<template scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow($index, tableData4)"
|
||||
@click.native.prevent="deleteRow(scope.$index, tableData4)"
|
||||
type="text"
|
||||
size="small">
|
||||
Remove
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1045,13 +1041,12 @@ Single row selection is supported.
|
|||
|
||||
You can also select multiple rows.
|
||||
|
||||
:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `inline-template` and `show-overflow-tooltip`: when the attribute `inline-template` is set, you can use custom template inside `el-table-column`, and access current row data via `row`; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
|
||||
:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
border
|
||||
selection-mode="multiple"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
|
|
@ -1059,10 +1054,9 @@ You can also select multiple rows.
|
|||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="Date"
|
||||
width="120">
|
||||
<div>{{ row.date }}</div>
|
||||
<template scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
|
|
@ -1219,9 +1213,12 @@ Filter the table to find desired data.
|
|||
label="Tag"
|
||||
width="100"
|
||||
:filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
|
||||
:filter-method="filterTag"
|
||||
inline-template>
|
||||
<el-tag :type="row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{row.tag}}</el-tag>
|
||||
:filter-method="filterTag">
|
||||
<template scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
|
||||
close-transition>{{scope.row.tag}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1269,7 +1266,7 @@ Filter the table to find desired data.
|
|||
### Custom column template
|
||||
|
||||
Customize table column so it can be integrated with other components.
|
||||
:::demo Activate custom column template by adding the `inline-template` attribute. By default, the context of `el-table-column` is the one where `el-table` lies, and you can customize it with the `context` attribute, e.g. `:context="_self"` refers to the current context. This is useful when sometimes Table is encapsulated into another component, and `table-column` is distributed by slots. In `el-column`, you have access to the following data: row, column, $index and store (state management of Table).
|
||||
:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended).
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
|
|
@ -1277,43 +1274,38 @@ Customize table column so it can be integrated with other components.
|
|||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="Date"
|
||||
width="180">
|
||||
<div>
|
||||
<template scope="scope">
|
||||
<el-icon name="time"></el-icon>
|
||||
<span style="margin-left: 10px">{{ row.date }}</span>
|
||||
</div>
|
||||
<span style="margin-left: 10px">{{ scope.row.date }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="Name"
|
||||
width="180">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>Name: {{ row.name }}</p>
|
||||
<p>Addr: {{ row.address }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag>{{ row.name }}</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
<template scope="scope">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>Name: {{ scope.row.name }}</p>
|
||||
<p>Addr: {{ scope.row.address }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag>{{ scope.row.name }}</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:context="_self"
|
||||
inline-template
|
||||
label="Operations">
|
||||
<div>
|
||||
<template scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="handleEdit($index, row)">
|
||||
Edit
|
||||
</el-button>
|
||||
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete($index, row)">
|
||||
Delete
|
||||
</el-button>
|
||||
</div>
|
||||
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1354,6 +1346,94 @@ Customize table column so it can be integrated with other components.
|
|||
```
|
||||
:::
|
||||
|
||||
### Expandable row
|
||||
|
||||
When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
|
||||
:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
style="width: 100%">
|
||||
<el-table-column type="expand">
|
||||
<template scope="props">
|
||||
<p>State: {{ props.row.state }}</p>
|
||||
<p>City: {{ props.row.city }}</p>
|
||||
<p>Address: {{ props.row.address }}</p>
|
||||
<p>Zip: {{ props.row.zip }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="Date"
|
||||
prop="date">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="Name"
|
||||
prop="name">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
|
|
@ -1363,13 +1443,16 @@ Customize table column so it can be integrated with other components.
|
|||
| stripe | whether table is striped | boolean | — | false |
|
||||
| border | whether table has vertical border | boolean | — | false |
|
||||
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||
| show-header | whether table header is visible | boolean | - | true |
|
||||
| show-header | whether table header is visible | boolean | — | true |
|
||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
||||
| current-row-key | key of current row, a set only prop | string,number | — | — |
|
||||
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
|
||||
| row-style | function that returns custom style for a row, or a string assigning custom style for every row | Function(row, index)/Object | — | — |
|
||||
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
|
||||
| context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | | - | No Data |
|
||||
| context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | — | current context where Table lies |
|
||||
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
|
||||
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
|
||||
| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
|
||||
|
||||
### Table Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
@ -1387,9 +1470,10 @@ Customize table column so it can be integrated with other components.
|
|||
| sort-change | triggers when Table's sorting changes | { column, prop, order } |
|
||||
| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
|
||||
| current-change | triggers when current row changes | currentRow, oldCurrentRow |
|
||||
| expand | triggers when user expands or collapses a row | row, expanded |
|
||||
|
||||
### Table Methods
|
||||
| Method | Description | Parameter |
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| clearSelection | clear selection, might be useful when `reserve-selection` is on | selection |
|
||||
| toggleRowSelection | toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
|
||||
|
|
@ -1397,9 +1481,9 @@ Customize table column so it can be integrated with other components.
|
|||
### Table-column Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1) | string | selection/index | — |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection/index/expand | — |
|
||||
| label | column label | string | — | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | - | - |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
|
||||
| prop | field name. You can also use its alias: `property` | string | — | — |
|
||||
| width | column width | string | — | — |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
|
||||
|
|
@ -1410,9 +1494,8 @@ Customize table column so it can be integrated with other components.
|
|||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
|
||||
| formatter | function that formats content | Function(row, column) | — | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
|
||||
| context | context of Table-column, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context | Object | - | current context where Table lies |
|
||||
| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), store (table store) }` | — | — |
|
||||
| align | alignment | string | left/center/right | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
|
||||
| class-name | class name of cells in the column | string | — | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -2,7 +2,18 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
activeName: 'first',
|
||||
activeName2: 'first',
|
||||
tabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -24,11 +35,11 @@ Divide data collections which are related yet belong to different types.
|
|||
|
||||
Basic and concise tabs.
|
||||
|
||||
:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal.
|
||||
:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs :active-name="activeName">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
||||
|
|
@ -41,6 +52,11 @@ Basic and concise tabs.
|
|||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -55,7 +71,7 @@ Tabs styled as cards.
|
|||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tabs type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
|
|
@ -64,10 +80,12 @@ Tabs styled as cards.
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
|
|
@ -81,7 +99,7 @@ Tabs styled as cards.
|
|||
|
||||
Closable tabs.
|
||||
|
||||
:::demo You can set `closable` attribute in `el-tabs`. It accept `Boolean` and Tab will be closable when the boolean is `true`.
|
||||
:::demo You can set the closable attribute in el-tabs to make all tabs closable. Also, closable can be set in a tab panel to make that specific tab closable.
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -125,12 +143,31 @@ Border card tabs.
|
|||
|
||||
:::
|
||||
|
||||
### Custom Tab
|
||||
|
||||
You can use named slot to customize the tab label content.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> Route</span>
|
||||
Route
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tabs Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | type of Tab | string | card/border-card | — |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
| active-name | name of the selected tab | string | — | name of first tab |
|
||||
| active-name(deprecated) | name of the selected tab | string | — | name of first tab |
|
||||
| value | name of the selected tab | string | — | name of first tab |
|
||||
|
||||
### Tabs Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
@ -142,6 +179,6 @@ Border card tabs.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | title of the tab | string | — | — |
|
||||
| label-content | render function for tab title | Function(h, tab:vueInstance) | - | - |
|
||||
| disabled | whether Tab is disabled | boolean | - | false |
|
||||
| disabled | whether Tab is disabled | boolean | — | false |
|
||||
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -144,9 +144,10 @@ Can pick an arbitrary time range.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | - | false |
|
||||
| editable | whether the input is editable | boolean | - | true |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
|
|
@ -161,8 +162,16 @@ Can pick an arbitrary time range.
|
|||
| end | end time | string | — | 18:00 |
|
||||
| step | time step | string | — | 00:30 |
|
||||
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
|
||||
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
|
||||
|
||||
### Time Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when input value changes | formatted value |
|
||||
|
||||
|
|
|
|||
|
|
@ -222,17 +222,17 @@ Used for node selection. In the following example, data for each layer is acquir
|
|||
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
|
||||
| props | configuration options, see the following table | object | — | — |
|
||||
| load | method for loading subtree data | function(node, resolve) | — | — |
|
||||
| render-content | render function for tree node | Function(h, { node } | - | - |
|
||||
| highlight-current | whether current node is highlighted | boolean | - | false |
|
||||
| current-node-key | key of current node, a set only prop | string, number | - | - |
|
||||
| default-expand-all | whether to expand all nodes by default | boolean | - | false |
|
||||
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | - | true |
|
||||
| render-content | render function for tree node | Function(h, { node } | — | — |
|
||||
| highlight-current | whether current node is highlighted | boolean | — | false |
|
||||
| current-node-key | key of current node, a set only prop | string, number | — | — |
|
||||
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
|
||||
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true |
|
||||
| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
|
||||
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
|
||||
| show-checkbox | whether node is selectable | boolean | — | false |
|
||||
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
|
||||
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
|
||||
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | - | - |
|
||||
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
|
||||
|
||||
### props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -169,8 +169,7 @@
|
|||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| **title** | 标题，**必选参数** | string | — | — |
|
||||
| type | 主题 | string | success/warning/info/error | info |
|
||||
| description | 辅助性文字 | string | — | — |
|
||||
| render-content | 内容区域的渲染函数，会覆盖 `description` | function(h) | — | — |
|
||||
| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
|
||||
| closable | 是否可关闭 | boolean | — | true |
|
||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||
| show-icon | 是否显示图标 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -137,3 +137,4 @@
|
|||
| value | 显示值 | string, number | — | — |
|
||||
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
|
||||
| is-dot | 小圆点 | boolean | — | false |
|
||||
| hidden | 隐藏 badge | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
import { addClass } from 'element-ui/src/utils/dom';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,238 @@
|
|||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const demos = document.querySelectorAll('.source');
|
||||
demos[0].style.padding = '0';
|
||||
demos[0].className += ' small';
|
||||
demos[3].className += ' medium';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-carousel .block {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
float: left;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-carousel .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-carousel .el-carousel__container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-carousel .el-carousel__item {
|
||||
h3 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
&:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-carousel .small h3 {
|
||||
font-size: 14px;
|
||||
line-height: 150px;
|
||||
}
|
||||
|
||||
.demo-carousel .medium h3 {
|
||||
font-size: 14px;
|
||||
line-height: 200px;
|
||||
}
|
||||
</style>
|
||||
## 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">
|
||||
<h3>{{ 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">
|
||||
<h3>{{ 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">
|
||||
<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">
|
||||
<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">
|
||||
<h3>{{ 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 | 走马灯的高度 | number | — | 300 |
|
||||
| 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 | — |
|
||||
|
||||
### Carousel Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 幻灯片切换时触发 | 目前激活的幻灯片的索引，原幻灯片的索引 |
|
||||
|
||||
### Carousel Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|---------- |-------------- | -- |
|
||||
| setActiveItem | 手动切换幻灯片 | 需要切换的幻灯片的索引，从 0 开始；或相应 `el-carousel-item` 的 `name` 属性值 |
|
||||
| prev | 切换至上一张幻灯片 | — |
|
||||
| next | 切换至下一张幻灯片 | — |
|
||||
|
||||
### Carousel-Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 幻灯片的名字，可用作 `setActiveItem` 的参数 | string | — | — |
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
### 禁用状态
|
||||
|
||||
多选框不可用状态。
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
activeName: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-collapse {
|
||||
.el-collapse-item__header {
|
||||
.header-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 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']
|
||||
};
|
||||
}
|
||||
}
|
||||
</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-information"></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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| accordion | 是否手风琴模式 | boolean | — | false |
|
||||
| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — |
|
||||
|
||||
### Collapse Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 唯一标志符 | string/number | — | — |
|
||||
| title | 面板标题 | string | — | — |
|
||||
|
|
@ -51,7 +51,7 @@ et -i [可以自定义变量文件]
|
|||
```
|
||||
|
||||
### 编译主题
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
|
||||
```shell
|
||||
et
|
||||
|
||||
|
|
|
|||
|
|
@ -226,8 +226,7 @@
|
|||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
style="width: 220px">
|
||||
placeholder="选择日期范围">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -237,8 +236,7 @@
|
|||
type="daterange"
|
||||
align="right"
|
||||
placeholder="选择日期范围"
|
||||
:picker-options="pickerOptions2"
|
||||
style="width: 220px">
|
||||
:picker-options="pickerOptions2">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -287,8 +285,9 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
|
|
@ -300,11 +299,18 @@
|
|||
### Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | 标题文本 | string | — | — |
|
||||
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 |
|
||||
|
||||
|
|
|
|||
|
|
@ -170,8 +170,7 @@
|
|||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetimerange"
|
||||
placeholder="选择时间范围"
|
||||
style="width:350px">
|
||||
placeholder="选择时间范围">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
|
|
@ -181,8 +180,7 @@
|
|||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="选择时间范围"
|
||||
align="right"
|
||||
style="width:350px">
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -218,7 +216,7 @@
|
|||
}
|
||||
}]
|
||||
},
|
||||
value3: '',
|
||||
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
|
|
@ -231,8 +229,9 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
|
|
@ -244,8 +243,8 @@
|
|||
### Picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
|
||||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
|
||||
|
||||
### Shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -254,3 +253,9 @@
|
|||
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@
|
|||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
},
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -168,6 +171,35 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 指令事件
|
||||
|
||||
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
下拉菜单<i class="el-icon-caret-bottom 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>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Dropdown Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -177,7 +209,7 @@
|
|||
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
|
||||
| menu-align | 菜单水平对齐方向 | string | start, end | end |
|
||||
| trigger | 触发下拉的行为 | string | hover, click | hover |
|
||||
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | - | true |
|
||||
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true |
|
||||
|
||||
### Dropdown Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:after,&:before {
|
||||
&:after, &:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -263,18 +263,12 @@
|
|||
.demo-ruleForm {
|
||||
width: 460px;
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
vertical-align: top;
|
||||
|
|
@ -799,11 +793,11 @@
|
|||
|
||||
### Form Methods
|
||||
|
||||
| 方法名 | 说明 |
|
||||
|---------- |-------------- |
|
||||
| validate(cb) | 对整个表单进行校验的方法 |
|
||||
| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
|
||||
| 方法名 | 说明 | 参数
|
||||
|---------- |-------------- | --------------
|
||||
| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean))
|
||||
| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | -
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -49,6 +49,25 @@ Vue.component(Select.name, Select)
|
|||
}
|
||||
```
|
||||
|
||||
## 兼容 `vue-i18n`
|
||||
|
||||
Element 兼容 [vue-i18n](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)
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
<ul class="language-list">
|
||||
<li>简体中文（zh-CN）</li>
|
||||
|
|
|
|||
|
|
@ -126,70 +126,55 @@
|
|||
.el-select .el-input {
|
||||
width: 110px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
.el-input {
|
||||
width: 180px;
|
||||
|
||||
& + .el-input,
|
||||
& + .el-textarea {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.el-textarea {
|
||||
width: 414px;
|
||||
}
|
||||
.el-input-group {
|
||||
min-width: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
.el-input-group + .el-input-group {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.el-autocomplete {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-input {
|
||||
&.el-input {
|
||||
display: inline-block;
|
||||
.demo-input-size {
|
||||
.el-input {
|
||||
vertical-align: top;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
&.el-autocomplete {
|
||||
display: inline-block;
|
||||
margin: 10px 0 0;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
.tac {
|
||||
.demo-autocomplete {
|
||||
text-align: center;
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
|
||||
.el-autocomplete {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.el-row.border-grid {
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
.el-autocomplete__suggestions.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -203,10 +188,7 @@
|
|||
|
||||
::: demo
|
||||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input">
|
||||
</el-input>
|
||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -304,14 +286,18 @@ export default {
|
|||
|
||||
::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-input placeholder="请输入内容" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input5">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
|
|
@ -319,14 +305,7 @@ export default {
|
|||
</el-select>
|
||||
<el-button slot="append" icon="search"></el-button>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -346,26 +325,22 @@ export default {
|
|||
|
||||
::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
|
||||
```html
|
||||
<div>
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="large"
|
||||
placeholder="请输入内容"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
placeholder="请输入内容"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
class="inline-input"
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
v-model="input9">
|
||||
|
|
@ -393,9 +368,9 @@ export default {
|
|||
|
||||
::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
|
||||
```html
|
||||
<el-row class="border-grid">
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">激活即列出输入建议</div>
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">激活即列出输入建议</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state1"
|
||||
|
|
@ -404,8 +379,8 @@ export default {
|
|||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">输入后匹配输入建议</div>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">输入后匹配输入建议</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state2"
|
||||
|
|
@ -508,7 +483,7 @@ export default {
|
|||
::: demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
class="my-autocomplete"
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
custom-item="my-item-zh"
|
||||
|
|
@ -750,18 +725,19 @@ export default {
|
|||
| rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 |
|
||||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||
| auto-complete | 原生属性，自动补全 | string | on, off | off |
|
||||
| name | 原生属性 | string | - | -|
|
||||
| max | 原生属性，设置最大值 | * | - | - |
|
||||
| min | 原生属性，设置最小值 | * | - | - |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| max | 原生属性，设置最大值 | * | — | — |
|
||||
| min | 原生属性，设置最小值 | * | — | — |
|
||||
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
|
||||
| form | 原生属性 | string | - | - |
|
||||
| form | 原生属性 | string | — | — |
|
||||
|
||||
### Input Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| click | 点击 Input 内的图标时触发 | event |
|
||||
| blur | 在 Input 失去焦点时触发 | event |
|
||||
| focus | 在 Input 或得焦点时触发 | event |
|
||||
| click | 点击 Input 内的图标时触发 | (event: Event) |
|
||||
| blur | 在 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在 Input 或得焦点时触发 | (event: Event) |
|
||||
| change | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
|
||||
### Autocomplete Attributes
|
||||
|
||||
|
|
@ -772,6 +748,7 @@ export default {
|
|||
| value | 必填值输入绑定值 | string | — | — |
|
||||
| custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — |
|
||||
| fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
|
||||
| popper-class | Autocomplete 下拉列表的类名 | string | — | — |
|
||||
|
||||
### Autocomplete Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@
|
|||
|
||||
### 对齐方式
|
||||
|
||||
对分栏进行灵活的对齐。
|
||||
通过 `flex` 布局来对分栏进行灵活的对齐。
|
||||
|
||||
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
|
||||
```html
|
||||
|
|
@ -306,6 +306,40 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 响应式布局
|
||||
|
||||
参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs` `sm` `md` `lg`。
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3"><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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Row Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
```
|
||||
:::
|
||||
<script>
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
import { addClass } from 'element-ui/src/utils/dom';
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
|
|
@ -203,8 +203,8 @@
|
|||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | 是否使用小型分页样式 | Boolean | — | false |
|
||||
| page-size | 每页显示条目个数 | Number | — | 10 |
|
||||
| total | 总条目数 | Number | — | - |
|
||||
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
|
||||
| total | 总条目数 | Number | — | — |
|
||||
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
|
||||
| current-page | 当前页数 | 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] |
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
| transition | 定义渐变动画 | String | — | fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| 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 | - | -|
|
||||
| popper-class | 为 popper 添加类名 | String | — | — |
|
||||
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.0.0",
|
||||
"vue": "^2.0.5"
|
||||
"vue": "^2.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -128,7 +128,6 @@
|
|||
|
||||
<style>
|
||||
.demo-select .el-select {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
|
|
@ -74,6 +76,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
|
|
@ -81,6 +84,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
|
|
@ -88,6 +92,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
|
|
@ -95,6 +100,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
|
|
@ -102,6 +108,7 @@
|
|||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}],
|
||||
tableData4: [{
|
||||
|
|
@ -581,15 +588,13 @@
|
|||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
:context="_self"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="100">
|
||||
<span>
|
||||
<template scope="scope">
|
||||
<el-button @click="handleClick" type="text" size="small">查看</el-button>
|
||||
<el-button type="text" size="small">编辑</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -791,19 +796,17 @@
|
|||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
:context="_self"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120">
|
||||
<span>
|
||||
<template scope="scope">
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow($index, tableData4)"
|
||||
@click.native.prevent="deleteRow(scope.$index, tableData4)"
|
||||
type="text"
|
||||
size="small">
|
||||
移除
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1055,7 +1058,7 @@
|
|||
|
||||
选择多行数据时使用 Checkbox。
|
||||
|
||||
:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-overflow-tooltip`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`prop`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
|
||||
:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
|
|
@ -1068,10 +1071,9 @@
|
|||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="日期"
|
||||
width="120">
|
||||
<div>{{ row.date }}</div>
|
||||
<template scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
|
|
@ -1228,9 +1230,12 @@
|
|||
label="标签"
|
||||
width="100"
|
||||
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
|
||||
:filter-method="filterTag"
|
||||
inline-template>
|
||||
<el-tag :type="row.tag === '家' ? 'primary' : 'success'" close-transition>{{row.tag}}</el-tag>
|
||||
:filter-method="filterTag">
|
||||
<template scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.tag === '家' ? 'primary' : 'success'"
|
||||
close-transition>{{scope.row.tag}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1278,7 +1283,7 @@
|
|||
### 自定义列模板
|
||||
|
||||
自定义列的显示内容，可组合其他组件使用。
|
||||
:::demo 通过设置 `inline-template` 属性可以开启自定义模板功能，此时 `el-table-column` 的上下文指的是 `el-table` 所处的上下文，当然你可以通过 `context` 属性指定上下文环境，例如设置成 `:context="_self"` 就是指的当前上下文。有些时候我们会把 table 封装在其他组件里，通过 slot 设置 `table-column`，这样的话就要注意设置 `context`。在 column 组件内部，可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。
|
||||
:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。)
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
|
|
@ -1286,43 +1291,36 @@
|
|||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="日期"
|
||||
width="180">
|
||||
<div>
|
||||
<template scope="scope">
|
||||
<el-icon name="time"></el-icon>
|
||||
<span style="margin-left: 10px">{{ row.date }}</span>
|
||||
</div>
|
||||
<span style="margin-left: 10px">{{ scope.row.date }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="姓名"
|
||||
width="180">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>姓名: {{ row.name }}</p>
|
||||
<p>住址: {{ row.address }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag>{{ row.name }}</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
<template scope="scope">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
<p>姓名: {{ scope.row.name }}</p>
|
||||
<p>住址: {{ scope.row.address }}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag>{{ scope.row.name }}</el-tag>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:context="_self"
|
||||
inline-template
|
||||
label="操作">
|
||||
<div>
|
||||
<el-table-column label="操作">
|
||||
<template scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="handleEdit($index, row)">
|
||||
编辑
|
||||
</el-button>
|
||||
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete($index, row)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
|
@ -1363,6 +1361,102 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 展开行
|
||||
|
||||
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
|
||||
:::demo 通过设置 type="expand" 和 `Scoped slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `Scoped slot` 相同。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
style="width: 100%">
|
||||
<el-table-column type="expand">
|
||||
<template scope="props">
|
||||
<p>省: {{ props.row.province }}</p>
|
||||
<p>市: {{ props.row.city }}</p>
|
||||
<p>住址: {{ props.row.detailAddress }}</p>
|
||||
<p>邮编: {{ props.row.zip }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="日期"
|
||||
prop="date">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="姓名"
|
||||
prop="name">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
province: '上海',
|
||||
city: '普陀区',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
detailAddress: '金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
|
|
@ -1371,13 +1465,17 @@
|
|||
| stripe | 是否为斑马纹 table | boolean | — | false |
|
||||
| border | 是否带有纵向边框 | boolean | — | false |
|
||||
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
||||
| show-header | 是否显示表头 | boolean | - | true |
|
||||
| show-header | 是否显示表头 | boolean | — | true |
|
||||
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
||||
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
|
||||
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
|
||||
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
|
||||
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
|
||||
| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |
|
||||
| empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | | - | 暂无数据 |
|
||||
| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | — | Table 所处上下文 |
|
||||
| empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
|
||||
| default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
|
||||
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
|
||||
|
||||
|
||||
### Table Events
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|
|
@ -1395,6 +1493,7 @@
|
|||
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
|
||||
| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
|
||||
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
|
||||
| expand | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
|
||||
|
||||
### Table Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|
|
@ -1405,8 +1504,8 @@
|
|||
### Table-column Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
|
||||
| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | - | - |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand | — |
|
||||
| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
|
||||
| label | 显示的标题 | string | — | — |
|
||||
| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
|
||||
| width | 对应列的宽度 | string | — | — |
|
||||
|
|
@ -1418,9 +1517,8 @@
|
|||
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
|
||||
| formatter | 用来格式化内容 | Function(row, column) | — | — |
|
||||
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
|
||||
| context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 |
|
||||
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — |
|
||||
| align | 对齐方式 | String | left, center, right | left |
|
||||
| align | 对齐方式 | String | left/center/right | left |
|
||||
| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |
|
||||
| class-name | 列的 className | string | — | — |
|
||||
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
|
||||
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -2,7 +2,18 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
activeName: 'first',
|
||||
activeName2: 'first',
|
||||
tabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -15,18 +26,20 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Tabs 标签页
|
||||
|
||||
分隔内容上有关联但属于不同类别的数据集合。
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础的、简洁的标签页。
|
||||
|
||||
:::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
|
||||
:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs :active-name="activeName">
|
||||
<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>
|
||||
|
|
@ -39,6 +52,11 @@
|
|||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -49,23 +67,25 @@
|
|||
|
||||
选项卡样式的标签页。
|
||||
|
||||
:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`。
|
||||
:::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<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 v-model="activeName2" 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: {
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
|
|
@ -79,11 +99,11 @@
|
|||
|
||||
可以关闭标签页。
|
||||
|
||||
:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
|
||||
:::demo 通过设置 `closable` 属性来打开 `Tabs` 的可关闭标签效果, `closable` 也可以设置在 `Tab Panel` 中实现部分标签页的可关闭效果。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tabs type="card" closable @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
||||
|
|
@ -120,12 +140,46 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 自定义标签页
|
||||
|
||||
可以通过具名 `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
|
||||
<div style="margin-bottom: 20px;">
|
||||
<el-button size="small" @click="tabs.push({ name: 'Tab ' + ++tabIndex, title: 'new Tab', content: 'new Tab content' })">add tab</el-button>
|
||||
</div>
|
||||
<el-tabs type="card" closable>
|
||||
<el-tab-pane v-for="(item, index) in tabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 风格类型 | string | card/border-card | — |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| active-name | 选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
| active-name(deprecated) | 选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
| value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
|
||||
### Tabs Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
@ -137,6 +191,6 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | — | — |
|
||||
| label-content | 选项卡的标题的渲染 Function | Function(h, tab:vueInstance) | - | - |
|
||||
| disabled | 是否禁用 | boolean | - | false |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -151,12 +151,13 @@
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | - | false |
|
||||
| editable | 文本框可输入 | boolean | - | true |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
| clearable | 是否显示清除按钮 | boolean | — | true |
|
||||
| size | 输入框尺寸 | string | large, small, mini | — |
|
||||
| placeholder | 占位内容 | string | — | — |
|
||||
| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
|
||||
| value | 绑定值 | TimePicker: DateTimeSelect: String | - | - |
|
||||
| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
|
|
@ -168,9 +169,18 @@
|
|||
| 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 | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -209,4 +209,4 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
|
|||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
|
||||
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
|
||||
| popper-class | 为 Tooltip 的 popper 添加类名 | String | - | -|
|
||||
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
|
||||
|
|
|
|||
|
|
@ -234,17 +234,17 @@
|
|||
| node-key | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的 | String | — | — |
|
||||
| props | 配置选项，具体看下表 | object | — | — |
|
||||
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
|
||||
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
|
||||
| highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
|
||||
| current-node-key | 当前选中节点的 key，是一个只写属性 | string, number | - | - |
|
||||
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
|
||||
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
|
||||
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | — | — |
|
||||
| highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | — | false |
|
||||
| current-node-key | 当前选中节点的 key，只写属性 | string, number | — | — |
|
||||
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
|
||||
| expand-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 | — | — |
|
||||
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | - | - |
|
||||
| filter-node-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
|
||||
|
||||
### props
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -179,5 +179,5 @@
|
|||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|---------- |-------------- | - |
|
||||
|---------- |-------------- | -- |
|
||||
| clearFiles | 清空已上传的文件列表 | — |
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
"guide": "指南",
|
||||
"components": "组件",
|
||||
"resource": "资源"
|
||||
},
|
||||
"nav": {
|
||||
"dropdown": "版本："
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -35,6 +38,9 @@
|
|||
"guide": "Guide",
|
||||
"components": "Component",
|
||||
"resource": "Resource"
|
||||
},
|
||||
"nav": {
|
||||
"dropdown": "Version: "
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.runtime.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.runtime.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script><% } %>
|
||||
</body>
|
||||
<% if (process.env.NODE_ENV === 'production') { %><script>
|
||||
|
|
@ -19,5 +19,10 @@
|
|||
|
||||
ga('create', 'UA-84335471-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
window.addEventListener('hashchange', function () {
|
||||
ga('set', 'page', window.location.href);
|
||||
ga('send', 'pageview');
|
||||
});
|
||||
</script><% } %>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@
|
|||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps 步骤"
|
||||
"title": "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -207,6 +207,14 @@
|
|||
{
|
||||
"path": "/card",
|
||||
"title": "Card 卡片"
|
||||
},
|
||||
{
|
||||
"path": "/carousel",
|
||||
"title": "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -421,6 +429,14 @@
|
|||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
},
|
||||
{
|
||||
"path": "/carousel",
|
||||
"title": "Carousel"
|
||||
},
|
||||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"1.0.9": "1.0",
|
||||
"1.1.1": "1.1"
|
||||
}
|
||||
24
package.json
24
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-ui",
|
||||
"version": "1.0.8",
|
||||
"version": "1.1.1",
|
||||
"description": "A Component Library for Vue.js.",
|
||||
"main": "lib/element-ui.common.js",
|
||||
"files": [
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
|
||||
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
|
||||
"pub:all": "npm run dist:all && lerna publish",
|
||||
"test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "karma start test/unit/karma.conf.js"
|
||||
},
|
||||
"repository": {
|
||||
|
|
@ -41,16 +41,16 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/ElemeFE/element/issues"
|
||||
},
|
||||
"unpkg": "lib/index.js",
|
||||
"style": "lib/theme-default/index.css",
|
||||
"dependencies": {
|
||||
"async-validator": "^1.6.6",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"throttle-debounce": "^1.0.1",
|
||||
"vue-popup": "^0.2.14",
|
||||
"wind-dom": "0.0.3"
|
||||
"throttle-debounce": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.0.0"
|
||||
"vue": "^2.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.14.0",
|
||||
|
|
@ -58,13 +58,14 @@
|
|||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-module-resolver": "^2.2.0",
|
||||
"babel-plugin-syntax-jsx": "^6.8.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.1.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"chai": "^3.5.0",
|
||||
"cheerio": "^0.18.0",
|
||||
"cooking": "^1.2.0",
|
||||
"cooking-lint": "^0.1.3",
|
||||
"cooking-vue2": "^0.1.4",
|
||||
"cooking-vue2": "^0.3.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"coveralls": "^2.11.14",
|
||||
"cp-cli": "^1.0.2",
|
||||
"cross-env": "^3.1.3",
|
||||
|
|
@ -111,11 +112,12 @@
|
|||
"transliteration": "^1.1.11",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "2.0.5",
|
||||
"vue-loader": "^9.9.0",
|
||||
"vue": "^2.1.8",
|
||||
"vue-loader": "^10.0.2",
|
||||
"vue-markdown-loader": "^0.5.1",
|
||||
"vue-router": "^2.0.0",
|
||||
"vue-template-compiler": "2.0.5",
|
||||
"vue-template-compiler": "^2.1.8",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-server": "^1.15.1",
|
||||
"webpack-node-externals": "^1.5.4"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
|
||||
<div class="el-alert__content">
|
||||
<span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
|
||||
<desc-content></desc-content>
|
||||
<slot>
|
||||
<p class="el-alert__description" v-if="description">{{ description }}</p>
|
||||
</slot>
|
||||
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,8 +47,7 @@
|
|||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
renderContent: Function
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -55,21 +56,6 @@
|
|||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
descContent: {
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
if (parent.renderContent) {
|
||||
return parent.renderContent(h);
|
||||
} else if (parent.description) {
|
||||
return <p class="el-alert__description">{ parent.description }</p>;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.visible = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<transition name="el-zoom-in-top" @after-leave="doDestroy">
|
||||
<ul
|
||||
v-show="showPopper"
|
||||
class="el-autocomplete__suggestions"
|
||||
:class="{ 'is-loading': parent.loading }"
|
||||
:style="{ width: dropdownWidth }"
|
||||
>
|
||||
<li v-if="parent.loading"><i class="el-icon-loading"></i></li>
|
||||
<template v-for="(item, index) in suggestions" v-else>
|
||||
<li
|
||||
v-if="!parent.customItem"
|
||||
:class="{'highlighted': parent.highlightedIndex === index}"
|
||||
@click="parent.select(index)"
|
||||
>
|
||||
{{item.value}}
|
||||
</li>
|
||||
<component
|
||||
v-else
|
||||
:class="{'highlighted': parent.highlightedIndex === index}"
|
||||
@click="parent.select(index)"
|
||||
:is="parent.customItem"
|
||||
:item="item"
|
||||
:index="index">
|
||||
</component>
|
||||
</template>
|
||||
</ul>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import Popper from 'element-ui/src/utils/vue-popper';
|
||||
export default {
|
||||
mixins: [Popper],
|
||||
|
||||
componentName: 'ElAutocompleteSuggestions',
|
||||
|
||||
data() {
|
||||
return {
|
||||
parent: this.$parent,
|
||||
dropdownWidth: ''
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
suggestions: Array,
|
||||
options: {
|
||||
default() {
|
||||
return {
|
||||
forceAbsolute: true,
|
||||
gpuAcceleration: false
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.popperElm = this.$el;
|
||||
this.referenceElm = this.$parent.$refs.input.$refs.input;
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('visible', (val, inputWidth) => {
|
||||
this.dropdownWidth = inputWidth + 'px';
|
||||
this.showPopper = val;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="el-autocomplete" v-clickoutside="handleBlur">
|
||||
<el-input
|
||||
ref="input"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
|
|
@ -19,47 +20,34 @@
|
|||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-input>
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul
|
||||
v-if="suggestionVisible"
|
||||
class="el-autocomplete__suggestions"
|
||||
:class="{ 'is-loading': loading }"
|
||||
ref="suggestions"
|
||||
>
|
||||
<li v-if="loading"><i class="el-icon-loading"></i></li>
|
||||
<template v-for="(item, index) in suggestions" v-else>
|
||||
<li
|
||||
v-if="!customItem"
|
||||
:class="{'highlighted': highlightedIndex === index}"
|
||||
@click="select(index)"
|
||||
>
|
||||
{{item.value}}
|
||||
</li>
|
||||
<component
|
||||
v-else
|
||||
:class="{'highlighted': highlightedIndex === index}"
|
||||
@click="select(index)"
|
||||
:is="customItem"
|
||||
:item="item"
|
||||
:index="index">
|
||||
</component>
|
||||
</template>
|
||||
</ul>
|
||||
</transition>
|
||||
<el-autocomplete-suggestions
|
||||
:class="[popperClass ? popperClass : '']"
|
||||
ref="suggestions"
|
||||
:suggestions="suggestions"
|
||||
>
|
||||
</el-autocomplete-suggestions>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElInput from 'element-ui/packages/input';
|
||||
import Clickoutside from 'element-ui/src/utils/clickoutside';
|
||||
import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
|
||||
import Emitter from 'element-ui/src/mixins/emitter';
|
||||
|
||||
export default {
|
||||
name: 'ElAutocomplete',
|
||||
|
||||
mixins: [Emitter],
|
||||
|
||||
components: {
|
||||
ElInput
|
||||
ElInput,
|
||||
ElAutocompleteSuggestions
|
||||
},
|
||||
|
||||
directives: { Clickoutside },
|
||||
|
||||
props: {
|
||||
popperClass: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
name: String,
|
||||
|
|
@ -80,8 +68,10 @@
|
|||
highlightedIndex: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$parent.popperElm = this.popperElm = this.$el;
|
||||
watch: {
|
||||
suggestionVisible(val) {
|
||||
this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
|
|
@ -107,7 +97,6 @@
|
|||
},
|
||||
hideSuggestions() {
|
||||
this.suggestionVisible = false;
|
||||
this.suggestions = [];
|
||||
this.loading = false;
|
||||
},
|
||||
showSuggestions(value) {
|
||||
|
|
@ -129,8 +118,8 @@
|
|||
} else if (index >= this.suggestions.length) {
|
||||
index = this.suggestions.length - 1;
|
||||
}
|
||||
var elSuggestions = this.$refs.suggestions.$el;
|
||||
|
||||
var elSuggestions = this.$refs.suggestions;
|
||||
var elSelect = elSuggestions.children[index];
|
||||
var scrollTop = elSuggestions.scrollTop;
|
||||
var offsetTop = elSelect.offsetTop;
|
||||
|
|
@ -144,6 +133,9 @@
|
|||
|
||||
this.highlightedIndex = index;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$refs.suggestions.$destroy();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<div class="el-badge">
|
||||
<slot></slot>
|
||||
<sup
|
||||
v-text="content"
|
||||
class="el-badge__content"
|
||||
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
|
||||
</sup>
|
||||
<transition name="el-zoom-in-center">
|
||||
<sup
|
||||
v-show="!hidden"
|
||||
v-text="content"
|
||||
class="el-badge__content"
|
||||
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
|
||||
</sup>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,7 +19,8 @@ export default {
|
|||
props: {
|
||||
value: {},
|
||||
max: Number,
|
||||
isDot: Boolean
|
||||
isDot: Boolean,
|
||||
hidden: Boolean
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import ElCarouselItem from '../carousel/src/item';
|
||||
|
||||
/* istanbul ignore next */
|
||||
ElCarouselItem.install = function(Vue) {
|
||||
Vue.component(ElCarouselItem.name, ElCarouselItem);
|
||||
};
|
||||
|
||||
export default ElCarouselItem;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import ElCarousel from './src/main';
|
||||
import ElCarouselItem from './src/item';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function(Vue) {
|
||||
Vue.component(ElCarousel.name, ElCarousel);
|
||||
Vue.component(ElCarouselItem.name, ElCarouselItem);
|
||||
};
|
||||
|
||||
export { ElCarousel, ElCarouselItem };
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
var config = require('../../build/config');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, '_index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElCarousel',
|
||||
extends: ['vue2'],
|
||||
alias: config.alias,
|
||||
externals: { vue: config.vue }
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import Carousel from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Carousel.install = function(Vue) {
|
||||
Vue.component(Carousel.name, Carousel);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "element-carousel",
|
||||
"version": "0.0.0",
|
||||
"description": "A carousel component for Vue.js.",
|
||||
"main": "lib/index.js",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/carousel",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div
|
||||
v-show="ready"
|
||||
class="el-carousel__item"
|
||||
:class="{
|
||||
'is-active': active,
|
||||
'el-carousel__item--card': $parent.type === 'card',
|
||||
'is-in-stage': inStage,
|
||||
'is-hover': hover
|
||||
}"
|
||||
@click="handleItemClick"
|
||||
:style="{
|
||||
msTransform: `translateX(${ translate }px) scale(${ scale })`,
|
||||
webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
|
||||
transform: `translateX(${ translate }px) scale(${ scale })`
|
||||
}">
|
||||
<div
|
||||
v-if="$parent.type === 'card'"
|
||||
v-show="!active"
|
||||
class="el-carousel__mask">
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const CARD_SCALE = 0.83;
|
||||
export default {
|
||||
name: 'ElCarouselItem',
|
||||
|
||||
props: {
|
||||
name: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
hover: false,
|
||||
translate: 0,
|
||||
scale: 1,
|
||||
active: false,
|
||||
ready: false,
|
||||
inStage: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
processIndex(index, activeIndex, length) {
|
||||
if (activeIndex === 0 && index === length - 1) {
|
||||
return -1;
|
||||
} else if (activeIndex === length - 1 && index === 0) {
|
||||
return length;
|
||||
} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
|
||||
return length + 1;
|
||||
} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
|
||||
return -2;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
|
||||
calculateTranslate(index, activeIndex, parentWidth) {
|
||||
if (this.inStage) {
|
||||
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
|
||||
} else if (index < activeIndex) {
|
||||
return -(1 + CARD_SCALE) * parentWidth / 4;
|
||||
} else {
|
||||
return (3 + CARD_SCALE) * parentWidth / 4;
|
||||
}
|
||||
},
|
||||
|
||||
translateItem(index, activeIndex) {
|
||||
const parentWidth = this.$parent.$el.offsetWidth;
|
||||
const length = this.$parent.items.length;
|
||||
|
||||
if (this.$parent.type === 'card') {
|
||||
if (index !== activeIndex && length > 2) {
|
||||
index = this.processIndex(index, activeIndex, length);
|
||||
}
|
||||
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
|
||||
this.active = index === activeIndex;
|
||||
this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
|
||||
this.scale = this.active ? 1 : CARD_SCALE;
|
||||
} else {
|
||||
this.active = index === activeIndex;
|
||||
this.translate = parentWidth * (index - activeIndex);
|
||||
}
|
||||
this.ready = true;
|
||||
},
|
||||
|
||||
handleItemClick() {
|
||||
const parent = this.$parent;
|
||||
if (parent && parent.type === 'card') {
|
||||
const index = parent.items.indexOf(this);
|
||||
parent.setActiveItem(index);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$parent && this.$parent.handleItemChange();
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.$parent && this.$parent.handleItemChange();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<div
|
||||
class="el-carousel"
|
||||
:class="{ 'el-carousel--card': type === 'card' }"
|
||||
@mouseenter.stop="handleMouseEnter"
|
||||
@mouseleave.stop="handleMouseLeave">
|
||||
<div
|
||||
class="el-carousel__container"
|
||||
:style="{ height: height }">
|
||||
<transition name="carousel-arrow-left">
|
||||
<button
|
||||
v-if="arrow !== 'never'"
|
||||
v-show="arrow === 'always' || hover"
|
||||
@mouseenter="handleButtonEnter('left')"
|
||||
@mouseleave="handleButtonLeave"
|
||||
@click.stop="throttledArrowClick(activeIndex - 1)"
|
||||
class="el-carousel__arrow el-carousel__arrow--left">
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</button>
|
||||
</transition>
|
||||
<transition name="carousel-arrow-right">
|
||||
<button
|
||||
v-if="arrow !== 'never'"
|
||||
v-show="arrow === 'always' || hover"
|
||||
@mouseenter="handleButtonEnter('right')"
|
||||
@mouseleave="handleButtonLeave"
|
||||
@click.stop="throttledArrowClick(activeIndex + 1)"
|
||||
class="el-carousel__arrow el-carousel__arrow--right">
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</button>
|
||||
</transition>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<ul
|
||||
class="el-carousel__indicators"
|
||||
v-if="indicatorPosition !== 'none'"
|
||||
:class="{ 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
class="el-carousel__indicator"
|
||||
:class="{ 'is-active': index === activeIndex }"
|
||||
@mouseenter="throttledIndicatorHover(index)"
|
||||
@click.stop="handleIndicatorClick(index)">
|
||||
<button class="el-carousel__button"></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
import debounce from 'throttle-debounce/debounce';
|
||||
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
|
||||
|
||||
export default {
|
||||
name: 'ElCarousel',
|
||||
|
||||
props: {
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: String,
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
indicatorPosition: String,
|
||||
indicator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
arrow: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
type: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeIndex: -1,
|
||||
containerWidth: 0,
|
||||
timer: null,
|
||||
hover: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
activeIndex(val, oldVal) {
|
||||
this.resetItemPosition();
|
||||
this.$emit('change', val, oldVal);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMouseEnter() {
|
||||
this.hover = true;
|
||||
this.pauseTimer();
|
||||
},
|
||||
|
||||
handleMouseLeave() {
|
||||
this.hover = false;
|
||||
this.startTimer();
|
||||
},
|
||||
|
||||
itemInStage(item, index) {
|
||||
const length = this.items.length;
|
||||
if (index === length - 1 && item.inStage && this.items[0].active ||
|
||||
(item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
|
||||
return 'left';
|
||||
} else if (index === 0 && item.inStage && this.items[length - 1].active ||
|
||||
(item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
|
||||
return 'right';
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
handleButtonEnter(arrow) {
|
||||
this.items.forEach((item, index) => {
|
||||
if (arrow === this.itemInStage(item, index)) {
|
||||
item.hover = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleButtonLeave() {
|
||||
this.items.forEach(item => {
|
||||
item.hover = false;
|
||||
});
|
||||
},
|
||||
|
||||
handleItemChange() {
|
||||
debounce(100, () => {
|
||||
this.updateItems();
|
||||
});
|
||||
},
|
||||
|
||||
updateItems() {
|
||||
this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
|
||||
},
|
||||
|
||||
resetItemPosition() {
|
||||
this.items.forEach((item, index) => {
|
||||
item.translateItem(index, this.activeIndex);
|
||||
});
|
||||
},
|
||||
|
||||
playSlides() {
|
||||
if (this.activeIndex < this.items.length - 1) {
|
||||
this.activeIndex++;
|
||||
} else {
|
||||
this.activeIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
pauseTimer() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
|
||||
startTimer() {
|
||||
if (this.interval <= 0 || !this.autoPlay) return;
|
||||
this.timer = setInterval(this.playSlides, this.interval);
|
||||
},
|
||||
|
||||
setActiveItem(index) {
|
||||
if (typeof index === 'string') {
|
||||
const filteredItems = this.items.filter(item => item.name === index);
|
||||
if (filteredItems.length > 0) {
|
||||
index = this.items.indexOf(filteredItems[0]);
|
||||
}
|
||||
}
|
||||
index = Number(index);
|
||||
if (isNaN(index) || index !== Math.floor(index)) {
|
||||
process.env.NODE_ENV !== 'production' &&
|
||||
console.warn('[Element Warn][Carousel]index must be an integer.');
|
||||
return;
|
||||
}
|
||||
let length = this.items.length;
|
||||
if (index < 0) {
|
||||
this.activeIndex = length - 1;
|
||||
} else if (index >= length) {
|
||||
this.activeIndex = 0;
|
||||
} else {
|
||||
this.activeIndex = index;
|
||||
}
|
||||
},
|
||||
|
||||
prev() {
|
||||
this.setActiveItem(this.activeIndex - 1);
|
||||
},
|
||||
|
||||
next() {
|
||||
this.setActiveItem(this.activeIndex + 1);
|
||||
},
|
||||
|
||||
handleIndicatorClick(index) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
|
||||
handleIndicatorHover(index) {
|
||||
if (this.trigger === 'hover' && index !== this.activeIndex) {
|
||||
this.activeIndex = index;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.throttledArrowClick = throttle(300, true, index => {
|
||||
this.setActiveItem(index);
|
||||
});
|
||||
this.throttledIndicatorHover = throttle(300, index => {
|
||||
this.handleIndicatorHover(index);
|
||||
});
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateItems();
|
||||
this.$nextTick(() => {
|
||||
addResizeListener(this.$el, this.resetItemPosition);
|
||||
if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
|
||||
this.activeIndex = this.initialIndex;
|
||||
}
|
||||
this.startTimer();
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<label class="el-checkbox">
|
||||
<span class="el-checkbox__input">
|
||||
<span class="el-checkbox__inner"
|
||||
:class="{
|
||||
'is-disabled': disabled,
|
||||
'is-checked': isChecked,
|
||||
'is-indeterminate': indeterminate,
|
||||
'is-focus': focus
|
||||
}"
|
||||
></span>
|
||||
<span class="el-checkbox__input"
|
||||
:class="{
|
||||
'is-disabled': disabled,
|
||||
'is-checked': isChecked,
|
||||
'is-indeterminate': indeterminate,
|
||||
'is-focus': focus
|
||||
}"
|
||||
>
|
||||
<span class="el-checkbox__inner"></span>
|
||||
<input
|
||||
v-if="trueLabel || falseLabel"
|
||||
class="el-checkbox__original"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import ElCollapseItem from '../collapse/src/collapse-item.vue';
|
||||
|
||||
/* istanbul ignore next */
|
||||
ElCollapseItem.install = function(Vue) {
|
||||
Vue.component(ElCollapseItem.name, ElCollapseItem);
|
||||
};
|
||||
|
||||
export default ElCollapseItem;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import ElCollapse from './src/collapse';
|
||||
import ElCollapseItem from './src/collapse-item.vue';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function install(Vue) {
|
||||
Vue.component(ElCollapseItem.name, ElCollapseItem);
|
||||
Vue.component(ElCollapse.name, ElCollapse);
|
||||
};
|
||||
|
||||
export {
|
||||
ElCollapse,
|
||||
ElCollapseItem
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
var config = require('../../build/config');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, '_index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElCollapse',
|
||||
extends: ['vue2'],
|
||||
alias: config.alias,
|
||||
externals: { vue: config.vue }
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import ElCollapse from './src/collapse';
|
||||
|
||||
/* istanbul ignore next */
|
||||
ElCollapse.install = function(Vue) {
|
||||
Vue.component(ElCollapse.name, ElCollapse);
|
||||
};
|
||||
|
||||
export default ElCollapse;
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "element-collapse",
|
||||
"version": "1.0.0",
|
||||
"description": "A row component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/collapse",
|
||||
"author": "haiping.zeng@ele.me",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="el-collapse-item" :class="{'is-active': isActive}">
|
||||
<div class="el-collapse-item__header" @click="handleHeaderClick">
|
||||
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
|
||||
<slot name="title">{{title}}</slot>
|
||||
</div>
|
||||
<div class="el-collapse-item__wrap" ref="contentWrap">
|
||||
<div class="el-collapse-item__content" ref="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { once } from 'element-ui/src/utils/dom';
|
||||
import Emitter from 'element-ui/src/mixins/emitter';
|
||||
|
||||
function getTransitionendEvent(el) {
|
||||
let t;
|
||||
let transitions = {
|
||||
'transition': 'transitionend',
|
||||
'OTransition': 'oTransitionEnd',
|
||||
'MozTransition': 'transitionend',
|
||||
'WebkitTransition': 'webkitTransitionEnd'
|
||||
};
|
||||
|
||||
for (t in transitions) {
|
||||
if (el.style[t] !== undefined) {
|
||||
return transitions[t];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'ElCollapseItem',
|
||||
|
||||
componentName: 'ElCollapseItem',
|
||||
|
||||
mixins: [Emitter],
|
||||
|
||||
data() {
|
||||
return {
|
||||
contentWrapStyle: {
|
||||
height: 'auto',
|
||||
display: 'block'
|
||||
},
|
||||
contentHeight: 0
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default() {
|
||||
return this._uid;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isActive() {
|
||||
return this.$parent.activeNames.indexOf(this.name) > -1;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'isActive'(value) {
|
||||
value ? this.open() : this.close();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
open() {
|
||||
const contentWrapElm = this.$refs.contentWrap;
|
||||
const contentHeight = this.contentHeight;
|
||||
|
||||
contentWrapElm.style.display = 'block';
|
||||
contentWrapElm.style.height = '0';
|
||||
|
||||
setTimeout(_ => {
|
||||
contentWrapElm.style.height = contentHeight + 'px';
|
||||
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
|
||||
if (!this.isActive) return;
|
||||
contentWrapElm.style.height = 'auto';
|
||||
});
|
||||
}, 10);
|
||||
},
|
||||
close() {
|
||||
const contentWrapElm = this.$refs.contentWrap;
|
||||
const contentElm = this.$refs.content;
|
||||
const contentHeight = contentElm.offsetHeight;
|
||||
|
||||
this.contentHeight = contentHeight;
|
||||
contentWrapElm.style.height = contentHeight + 'px';
|
||||
|
||||
setTimeout(_ => {
|
||||
contentWrapElm.style.height = '0';
|
||||
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
|
||||
if (this.isActive) return;
|
||||
contentWrapElm.style.display = 'none';
|
||||
});
|
||||
}, 10);
|
||||
},
|
||||
init() {
|
||||
if (!this.isActive) {
|
||||
let contentWrapElm = this.$refs.contentWrap;
|
||||
this.contentHeight = this.$refs.content.offsetHeight;
|
||||
contentWrapElm.style.height = '0';
|
||||
contentWrapElm.style.display = 'none';
|
||||
}
|
||||
},
|
||||
handleHeaderClick() {
|
||||
this.dispatch('ElCollapse', 'item-click', this);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="el-collapse">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElCollapse',
|
||||
|
||||
componentName: 'ElCollapse',
|
||||
|
||||
props: {
|
||||
accordion: Boolean,
|
||||
value: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeNames: [].concat(this.value)
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.activeNames = [].concat(value);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setActiveNames(activeNames) {
|
||||
activeNames = [].concat(activeNames);
|
||||
let value = this.accordion ? activeNames[0] : activeNames;
|
||||
this.activeNames = activeNames;
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value);
|
||||
},
|
||||
handleItemClick(item) {
|
||||
if (this.accordion) {
|
||||
this.setActiveNames(
|
||||
this.activeNames[0] &&
|
||||
this.activeNames[0] === item.name
|
||||
? '' : item.name
|
||||
);
|
||||
} else {
|
||||
let activeNames = this.activeNames.slice(0);
|
||||
let index = activeNames.indexOf(item.name);
|
||||
|
||||
if (index > -1) {
|
||||
activeNames.splice(index, 1);
|
||||
} else {
|
||||
activeNames.push(item.name);
|
||||
}
|
||||
this.setActiveNames(activeNames);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('item-click', this.handleItemClick);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -12,6 +12,5 @@
|
|||
"author": "long.zhang@ele.me",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"wind-dom": "0.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,7 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.sun') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.mon') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.tue') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.wed') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.thu') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.fri') }}</th>
|
||||
<th>{{ t('el.datepicker.weeks.sat') }}</th>
|
||||
<th v-for="week in WEEKS">{{ t('el.datepicker.weeks.' + week) }}</th>
|
||||
</tr>
|
||||
<tr
|
||||
class="el-date-table__row"
|
||||
|
|
@ -32,9 +26,10 @@
|
|||
|
||||
<script>
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, DAY_DURATION } from '../util';
|
||||
import { hasClass } from 'wind-dom/src/class';
|
||||
import { hasClass } from 'element-ui/src/utils/dom';
|
||||
import Locale from 'element-ui/src/mixins/locale';
|
||||
|
||||
const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
|
||||
const clearHours = function(time) {
|
||||
const cloneDate = new Date(time);
|
||||
cloneDate.setHours(0, 0, 0, 0);
|
||||
|
|
@ -45,6 +40,12 @@
|
|||
mixins: [Locale],
|
||||
|
||||
props: {
|
||||
firstDayOfWeek: {
|
||||
default: 7,
|
||||
type: Number,
|
||||
validator: val => val >= 1 && val <= 7
|
||||
},
|
||||
|
||||
date: {},
|
||||
|
||||
year: {},
|
||||
|
|
@ -83,6 +84,17 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
offsetDay() {
|
||||
const week = this.firstDayOfWeek;
|
||||
// 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
|
||||
return week > 3 ? 7 - week : -week;
|
||||
},
|
||||
|
||||
WEEKS() {
|
||||
const week = this.firstDayOfWeek;
|
||||
return WEEKS.concat(WEEKS).slice(week, week + 7);
|
||||
},
|
||||
|
||||
monthDate() {
|
||||
return this.date.getDate();
|
||||
},
|
||||
|
|
@ -99,6 +111,7 @@
|
|||
|
||||
day = (day === 0 ? 7 : day);
|
||||
|
||||
const offset = this.offsetDay;
|
||||
const rows = this.tableRows;
|
||||
let count = 1;
|
||||
let firstDayPosition;
|
||||
|
|
@ -125,7 +138,7 @@
|
|||
cell.type = 'normal';
|
||||
|
||||
const index = i * 7 + j;
|
||||
const time = startDate.getTime() + DAY_DURATION * index;
|
||||
const time = startDate.getTime() + DAY_DURATION * (index - offset);
|
||||
cell.inRange = time >= clearHours(this.minDate) && time <= clearHours(this.maxDate);
|
||||
cell.start = this.minDate && time === clearHours(this.minDate);
|
||||
cell.end = this.maxDate && time === clearHours(this.maxDate);
|
||||
|
|
@ -135,14 +148,14 @@
|
|||
cell.type = 'today';
|
||||
}
|
||||
|
||||
if (i === 0) {
|
||||
if (j >= day) {
|
||||
if (i >= 0 && i <= 1) {
|
||||
if (j + i * 7 >= (day + offset)) {
|
||||
cell.text = count++;
|
||||
if (count === 2) {
|
||||
firstDayPosition = i * 7 + j;
|
||||
}
|
||||
} else {
|
||||
cell.text = dateCountOfLastMonth - (day - j % 7) + 1;
|
||||
cell.text = dateCountOfLastMonth - (day + offset - j % 7) + 1 + i * 7;
|
||||
cell.type = 'prev-month';
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<script type="text/babel">
|
||||
import Locale from 'element-ui/src/mixins/locale';
|
||||
import { hasClass } from 'wind-dom/src/class';
|
||||
import { hasClass } from 'element-ui/src/utils/dom';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,56 +1,65 @@
|
|||
<template>
|
||||
<div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
|
||||
<div
|
||||
@mouseenter="emitSelectRange('hours')"
|
||||
@mousewheel="handleScroll('hour')"
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('hours')"
|
||||
@mousewheel.native="handleScroll('hour')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="hour">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="hour"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }"
|
||||
v-text="hour"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
@mouseenter="emitSelectRange('minutes')"
|
||||
@mousewheel="handleScroll('minute')"
|
||||
<li
|
||||
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
|
||||
v-for="(disabled, hour) in hoursList"
|
||||
track-by="hour"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': hour === hours, 'disabled': disabled }"
|
||||
v-text="hour"></li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
@mouseenter.native="emitSelectRange('minutes')"
|
||||
@mousewheel.native="handleScroll('minute')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="minute">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('minutes', key, true)"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === minutes }"
|
||||
v-text="key"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
<li
|
||||
@click="handleClick('minutes', key, true)"
|
||||
v-for="(minute, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === minutes }"
|
||||
v-text="key"></li>
|
||||
</el-scrollbar>
|
||||
<el-scrollbar
|
||||
v-show="showSeconds"
|
||||
@mouseenter="emitSelectRange('seconds')"
|
||||
@mousewheel="handleScroll('second')"
|
||||
@mouseenter.native="emitSelectRange('seconds')"
|
||||
@mousewheel.native="handleScroll('second')"
|
||||
class="el-time-spinner__wrapper"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
noresize
|
||||
tag="ul"
|
||||
ref="second">
|
||||
<ul class="el-time-spinner__list">
|
||||
<li
|
||||
@click="handleClick('seconds', key, true)"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === seconds }"
|
||||
v-text="key"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<li
|
||||
@click="handleClick('seconds', key, true)"
|
||||
v-for="(second, key) in 60"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ 'active': key === seconds }"
|
||||
v-text="key"></li>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import { getRangeHours } from '../util';
|
||||
import ElScrollbar from 'element-ui/packages/scrollbar';
|
||||
|
||||
export default {
|
||||
components: { ElScrollbar },
|
||||
|
||||
props: {
|
||||
hours: {
|
||||
type: Number,
|
||||
|
|
@ -78,7 +87,7 @@
|
|||
if (!(newVal >= 0 && newVal <= 23)) {
|
||||
this.hoursPrivate = oldVal;
|
||||
}
|
||||
this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
|
||||
this.hourEl.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
|
||||
this.$emit('change', { hours: newVal });
|
||||
},
|
||||
|
||||
|
|
@ -86,7 +95,7 @@
|
|||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.minutesPrivate = oldVal;
|
||||
}
|
||||
this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
|
||||
this.minuteEl.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
|
||||
this.$emit('change', { minutes: newVal });
|
||||
},
|
||||
|
||||
|
|
@ -94,7 +103,7 @@
|
|||
if (!(newVal >= 0 && newVal <= 59)) {
|
||||
this.secondsPrivate = oldVal;
|
||||
}
|
||||
this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
|
||||
this.secondEl.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
|
||||
this.$emit('change', { seconds: newVal });
|
||||
}
|
||||
},
|
||||
|
|
@ -102,6 +111,18 @@
|
|||
computed: {
|
||||
hoursList() {
|
||||
return getRangeHours(this.selectableRange);
|
||||
},
|
||||
|
||||
hourEl() {
|
||||
return this.$refs.hour.wrap;
|
||||
},
|
||||
|
||||
minuteEl() {
|
||||
return this.$refs.minute.wrap;
|
||||
},
|
||||
|
||||
secondEl() {
|
||||
return this.$refs.second.wrap;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -138,14 +159,14 @@
|
|||
handleScroll(type) {
|
||||
const ajust = {};
|
||||
|
||||
ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
|
||||
ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), 59);
|
||||
this.$emit('change', ajust);
|
||||
},
|
||||
|
||||
ajustScrollTop() {
|
||||
this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
|
||||
this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
|
||||
this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
|
||||
this.hourEl.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
|
||||
this.minuteEl.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
|
||||
this.secondEl.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import { hasClass } from 'wind-dom/src/class';
|
||||
import { hasClass } from 'element-ui/src/utils/dom';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -293,7 +293,7 @@
|
|||
handleClear() {
|
||||
this.minDate = null;
|
||||
this.maxDate = null;
|
||||
this.handleConfirm();
|
||||
this.handleConfirm(false);
|
||||
},
|
||||
|
||||
handleDateInput(event, type) {
|
||||
|
|
@ -376,10 +376,8 @@
|
|||
this.maxDate = val.maxDate;
|
||||
this.minDate = val.minDate;
|
||||
|
||||
if (!close) return;
|
||||
if (!this.showTime) {
|
||||
this.$emit('pick', [this.minDate, this.maxDate]);
|
||||
}
|
||||
if (!close || this.showTime) return;
|
||||
this.handleConfirm();
|
||||
},
|
||||
|
||||
changeToToday() {
|
||||
|
|
@ -456,7 +454,7 @@
|
|||
this.resetDate();
|
||||
},
|
||||
|
||||
handleConfirm(visible) {
|
||||
handleConfirm(visible = false) {
|
||||
this.$emit('pick', [this.minDate, this.maxDate], visible);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@
|
|||
:value="value"
|
||||
:week="week"
|
||||
:selection-mode="selectionMode"
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
:disabled-date="disabledDate">
|
||||
</date-table>
|
||||
<year-table
|
||||
|
|
@ -189,7 +190,7 @@
|
|||
methods: {
|
||||
handleClear() {
|
||||
this.date = new Date();
|
||||
this.$emit('pick', '');
|
||||
this.$emit('pick');
|
||||
},
|
||||
|
||||
resetDate() {
|
||||
|
|
@ -377,6 +378,7 @@
|
|||
visible: false,
|
||||
currentView: 'date',
|
||||
disabledDate: '',
|
||||
firstDayOfWeek: 7,
|
||||
year: null,
|
||||
month: null,
|
||||
week: null,
|
||||
|
|
|
|||
|
|
@ -3,20 +3,22 @@
|
|||
<div
|
||||
v-show="visible"
|
||||
:style="{ width: width + 'px' }"
|
||||
class="el-picker-panel time-select"
|
||||
:class="popperClass">
|
||||
<div class="el-picker-panel__content">
|
||||
:class="popperClass"
|
||||
class="el-picker-panel time-select">
|
||||
<el-scrollbar noresize wrap-class="el-picker-panel__content">
|
||||
<div class="time-select-item"
|
||||
v-for="item in items"
|
||||
:class="{ selected: value === item.value, disabled: item.disabled }"
|
||||
:disabled="item.disabled"
|
||||
@click="handleClick(item)">{{ item.value }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import ElScrollbar from 'element-ui/packages/scrollbar';
|
||||
|
||||
const parseTime = function(time) {
|
||||
const values = ('' || time).split(':');
|
||||
if (values.length >= 2) {
|
||||
|
|
@ -69,9 +71,14 @@
|
|||
};
|
||||
|
||||
export default {
|
||||
components: { ElScrollbar },
|
||||
|
||||
watch: {
|
||||
minTime(val) {
|
||||
if (this.value && val && compareTime(this.value, val) === -1) {
|
||||
value(val) {
|
||||
if (!val) return;
|
||||
if (this.minTime && compareTime(val, this.minTime) < 0) {
|
||||
this.$emit('pick');
|
||||
} else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
|
||||
this.$emit('pick');
|
||||
}
|
||||
}
|
||||
|
|
@ -85,7 +92,7 @@
|
|||
},
|
||||
|
||||
handleClear() {
|
||||
this.$emit('pick', '');
|
||||
this.$emit('pick');
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -98,6 +105,7 @@
|
|||
value: '',
|
||||
visible: false,
|
||||
minTime: '',
|
||||
maxTime: '',
|
||||
width: 0
|
||||
};
|
||||
},
|
||||
|
|
@ -115,7 +123,8 @@
|
|||
while (compareTime(current, end) <= 0) {
|
||||
result.push({
|
||||
value: current,
|
||||
disabled: compareTime(current, this.minTime || '-1:-1') <= 0
|
||||
disabled: compareTime(current, this.minTime || '-1:-1') <= 0 ||
|
||||
compareTime(current, this.maxTime || '100:100') > 0
|
||||
});
|
||||
current = nextTime(current, step);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.$emit('pick', '');
|
||||
this.$emit('pick');
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<el-input
|
||||
class="el-date-editor"
|
||||
:class="'el-date-editor--' + type"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
|
|
@ -26,7 +27,7 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
import Clickoutside from 'element-ui/src/utils/clickoutside';
|
||||
import { formatDate, parseDate, getWeekNumber } from './util';
|
||||
import { formatDate, parseDate, getWeekNumber, equalDate } from './util';
|
||||
import Popper from 'element-ui/src/utils/vue-popper';
|
||||
import Emitter from 'element-ui/src/mixins/emitter';
|
||||
import ElInput from 'element-ui/packages/input';
|
||||
|
|
@ -187,6 +188,10 @@ export default {
|
|||
readonly: Boolean,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
popperClass: String,
|
||||
editable: {
|
||||
type: Boolean,
|
||||
|
|
@ -197,7 +202,6 @@ export default {
|
|||
default: 'left'
|
||||
},
|
||||
value: {},
|
||||
haveTrigger: {},
|
||||
pickerOptions: {}
|
||||
},
|
||||
|
||||
|
|
@ -305,14 +309,18 @@ export default {
|
|||
if (parsedValue && this.picker) {
|
||||
this.picker.value = parsedValue;
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
this.picker.value = value;
|
||||
}
|
||||
this.picker.value = value;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.cachePicker = {};
|
||||
this.cacheChange = {};
|
||||
|
||||
// vue-popper
|
||||
this.options = {
|
||||
boundariesPadding: 0,
|
||||
|
|
@ -324,21 +332,36 @@ export default {
|
|||
methods: {
|
||||
handleMouseEnterIcon() {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (!this.valueIsEmpty) {
|
||||
if (!this.valueIsEmpty && this.clearable) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
|
||||
handleClickIcon() {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.valueIsEmpty) {
|
||||
this.pickerVisible = !this.pickerVisible;
|
||||
} else {
|
||||
if (this.showClose) {
|
||||
this.internalValue = '';
|
||||
this.$emit('input', '');
|
||||
} else {
|
||||
this.pickerVisible = !this.pickerVisible;
|
||||
}
|
||||
},
|
||||
|
||||
dateIsUpdated(date, cache) {
|
||||
let updated = true;
|
||||
|
||||
if (Array.isArray(date)) {
|
||||
if (equalDate(cache.cacheDateMin, date[0]) &&
|
||||
equalDate(cache.cacheDateMax, date[1])) updated = false;
|
||||
cache.cacheDateMin = date[0];
|
||||
cache.cacheDateMax = date[1];
|
||||
} else {
|
||||
if (equalDate(cache.cacheDate, date)) updated = false;
|
||||
cache.cacheDate = date;
|
||||
}
|
||||
|
||||
return updated;
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.pickerVisible = false;
|
||||
},
|
||||
|
|
@ -375,6 +398,7 @@ export default {
|
|||
},
|
||||
|
||||
showPicker() {
|
||||
if (this.$isServer) return;
|
||||
if (!this.picker) {
|
||||
this.panel.defaultValue = this.internalValue;
|
||||
this.picker = new Vue(this.panel).$mount(document.createElement('div'));
|
||||
|
|
@ -387,30 +411,34 @@ export default {
|
|||
this.picker.format = this.format;
|
||||
}
|
||||
|
||||
const options = this.pickerOptions;
|
||||
const updateOptions = () => {
|
||||
const options = this.pickerOptions;
|
||||
|
||||
if (options && options.selectableRange) {
|
||||
let ranges = options.selectableRange;
|
||||
const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
|
||||
const format = DEFAULT_FORMATS.timerange;
|
||||
if (options && options.selectableRange) {
|
||||
let ranges = options.selectableRange;
|
||||
const parser = TYPE_VALUE_RESOLVER_MAP.datetimerange.parser;
|
||||
const format = DEFAULT_FORMATS.timerange;
|
||||
|
||||
ranges = Array.isArray(ranges) ? ranges : [ranges];
|
||||
this.picker.selectableRange = ranges.map(range => parser(range, format));
|
||||
}
|
||||
|
||||
if (this.type === 'time-select' && options) {
|
||||
this.$watch('pickerOptions.minTime', val => {
|
||||
this.picker.minTime = val;
|
||||
});
|
||||
}
|
||||
|
||||
for (const option in options) {
|
||||
if (options.hasOwnProperty(option) &&
|
||||
// 忽略 time-picker 的该配置项
|
||||
option !== 'selectableRange') {
|
||||
this.picker[option] = options[option];
|
||||
ranges = Array.isArray(ranges) ? ranges : [ranges];
|
||||
this.picker.selectableRange = ranges.map(range => parser(range, format));
|
||||
}
|
||||
}
|
||||
|
||||
if (this.type === 'time-select' && options) {
|
||||
this.$watch('pickerOptions.minTime', val => {
|
||||
this.picker.minTime = val;
|
||||
});
|
||||
}
|
||||
|
||||
for (const option in options) {
|
||||
if (options.hasOwnProperty(option) &&
|
||||
// 忽略 time-picker 的该配置项
|
||||
option !== 'selectableRange') {
|
||||
this.picker[option] = options[option];
|
||||
}
|
||||
}
|
||||
};
|
||||
updateOptions();
|
||||
this.$watch('pickerOptions', () => updateOptions(), { deep: true });
|
||||
|
||||
this.$el.appendChild(this.picker.$el);
|
||||
this.pickerVisible = this.picker.visible = true;
|
||||
|
|
@ -418,7 +446,9 @@ export default {
|
|||
|
||||
this.picker.$on('dodestroy', this.doDestroy);
|
||||
this.picker.$on('pick', (date, visible = false) => {
|
||||
this.$emit('input', date);
|
||||
if (this.dateIsUpdated(date, this.cachePicker)) this.$emit('input', date);
|
||||
|
||||
this.$nextTick(() => this.dateIsUpdated(date, this.cacheChange) && this.$emit('change', this.visualValue));
|
||||
this.pickerVisible = this.picker.visible = visible;
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ const newArray = function(start, end) {
|
|||
return result;
|
||||
};
|
||||
|
||||
export const equalDate = function(dateA, dateB) {
|
||||
return dateA === dateB || new Date(dateA).getTime() === new Date(dateB).getTime();
|
||||
};
|
||||
|
||||
export const toDate = function(date) {
|
||||
date = new Date(date);
|
||||
if (isNaN(date.getTime())) return null;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'vue-popup';
|
||||
import Popup from 'element-ui/src/utils/popup';
|
||||
|
||||
export default {
|
||||
name: 'el-dialog',
|
||||
|
|
|
|||
|
|
@ -26,9 +26,12 @@
|
|||
this.referenceElm = this.$parent.$el;
|
||||
},
|
||||
|
||||
computed: {
|
||||
placement() {
|
||||
return `bottom-${this.$parent.menuAlign}`;
|
||||
watch: {
|
||||
'$parent.menuAlign': {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.currentPlacement = `bottom-${val}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Vue.component('el-form-item', ElForm)
|
|||
|---------- |-------------- |
|
||||
| validate(cb) | 对整个表单进行校验的方法 |
|
||||
| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 |
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
callback(errors);
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
},
|
||||
resetField() {
|
||||
|
|
|
|||
|
|
@ -54,12 +54,13 @@
|
|||
},
|
||||
validate(callback) {
|
||||
let valid = true;
|
||||
let count = 0;
|
||||
this.fields.forEach((field, index) => {
|
||||
field.validate('', errors => {
|
||||
if (errors) {
|
||||
valid = false;
|
||||
}
|
||||
if (typeof callback === 'function' && index === this.fields.length - 1) {
|
||||
if (typeof callback === 'function' && ++count === this.fields.length) {
|
||||
callback(valid);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,6 +13,5 @@
|
|||
"license": "MIT",
|
||||
"repository": "https://github.com/ElemeFE/element/tree/master/packages/input-number",
|
||||
"dependencies": {
|
||||
"wind-dom": "0.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,31 +6,11 @@
|
|||
{ 'is-without-controls': !controls}
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:value="currentValue"
|
||||
@keydown.up.native="increase"
|
||||
@keydown.down.native="decrease"
|
||||
@blur="handleBlur"
|
||||
@input="handleInput"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:class="{
|
||||
'is-active': inputActive
|
||||
}">
|
||||
<template slot="prepend" v-if="$slots.prepend">
|
||||
<slot name="prepend"></slot>
|
||||
</template>
|
||||
<template slot="append" v-if="$slots.append">
|
||||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-input>
|
||||
<span
|
||||
v-if="controls"
|
||||
class="el-input-number__decrease el-icon-minus"
|
||||
:class="{'is-disabled': minDisabled}"
|
||||
v-repeat-click="decrease"
|
||||
@mouseenter="activeInput(minDisabled)"
|
||||
@mouseleave="inactiveInput(minDisabled)"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -38,18 +18,58 @@
|
|||
class="el-input-number__increase el-icon-plus"
|
||||
:class="{'is-disabled': maxDisabled}"
|
||||
v-repeat-click="increase"
|
||||
@mouseenter="activeInput(maxDisabled)"
|
||||
@mouseleave="inactiveInput(maxDisabled)"
|
||||
>
|
||||
</span>
|
||||
<el-input
|
||||
v-model.number="currentValue"
|
||||
@keydown.up.native="increase"
|
||||
@keydown.down.native="decrease"
|
||||
@blur="handleBlur"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
ref="input"
|
||||
>
|
||||
<template slot="prepend" v-if="$slots.prepend">
|
||||
<slot name="prepend"></slot>
|
||||
</template>
|
||||
<template slot="append" v-if="$slots.append">
|
||||
<slot name="append"></slot>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElInput from 'element-ui/packages/input';
|
||||
import { once, on } from 'wind-dom/src/event';
|
||||
import { once, on } from 'element-ui/src/utils/dom';
|
||||
|
||||
export default {
|
||||
name: 'ElInputNumber',
|
||||
directives: {
|
||||
repeatClick: {
|
||||
bind(el, binding, vnode) {
|
||||
let interval = null;
|
||||
let startTime;
|
||||
|
||||
const handler = () => vnode.context[binding.expression]();
|
||||
const clear = () => {
|
||||
if (new Date() - startTime < 100) {
|
||||
handler();
|
||||
}
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
};
|
||||
|
||||
on(el, 'mousedown', () => {
|
||||
startTime = new Date();
|
||||
once(document, 'mouseup', clear);
|
||||
interval = setInterval(handler, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ElInput
|
||||
},
|
||||
props: {
|
||||
step: {
|
||||
type: Number,
|
||||
|
|
@ -73,37 +93,6 @@
|
|||
default: true
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
repeatClick: {
|
||||
bind(el, binding, vnode) {
|
||||
let interval = null;
|
||||
let startTime;
|
||||
|
||||
const handler = () => {
|
||||
vnode.context[binding.expression]();
|
||||
};
|
||||
|
||||
const clear = function() {
|
||||
if (new Date() - startTime < 100) {
|
||||
handler();
|
||||
}
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
};
|
||||
|
||||
on(el, 'mousedown', function() {
|
||||
startTime = new Date();
|
||||
once(document, 'mouseup', clear);
|
||||
interval = setInterval(function() {
|
||||
handler();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ElInput
|
||||
},
|
||||
data() {
|
||||
// correct the init value
|
||||
let value = this.value;
|
||||
|
|
@ -116,8 +105,7 @@
|
|||
value = this.max;
|
||||
}
|
||||
return {
|
||||
currentValue: value,
|
||||
inputActive: false
|
||||
currentValue: value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -126,19 +114,20 @@
|
|||
},
|
||||
|
||||
currentValue(newVal, oldVal) {
|
||||
let value = Number(newVal);
|
||||
if (value <= this.max && value >= this.min) {
|
||||
this.$emit('change', value, oldVal);
|
||||
this.$emit('input', value);
|
||||
if (newVal <= this.max && newVal >= this.min) {
|
||||
this.$emit('change', newVal, oldVal);
|
||||
this.$emit('input', newVal);
|
||||
} else {
|
||||
this.currentValue = oldVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
minDisabled() {
|
||||
return this.value - this.step < this.min;
|
||||
return this.accSub(this.value, this.step) < this.min;
|
||||
},
|
||||
maxDisabled() {
|
||||
return this.value + this.step > this.max;
|
||||
return this.accAdd(this.value, this.step) > this.max;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -188,41 +177,19 @@
|
|||
return (arg1 + arg2) / m;
|
||||
},
|
||||
increase() {
|
||||
if (this.maxDisabled) return;
|
||||
const value = this.value || 0;
|
||||
if (value + this.step > this.max || this.disabled) return;
|
||||
this.currentValue = this.accAdd(this.step, value);
|
||||
if (this.maxDisabled) {
|
||||
this.inputActive = false;
|
||||
}
|
||||
if (this.accAdd(value, this.step) > this.max || this.disabled) return;
|
||||
this.currentValue = this.accAdd(value, this.step);
|
||||
},
|
||||
decrease() {
|
||||
if (this.minDisabled) return;
|
||||
const value = this.value || 0;
|
||||
if (value - this.step < this.min || this.disabled) return;
|
||||
if (this.accSub(value, this.step) < this.min || this.disabled) return;
|
||||
this.currentValue = this.accSub(value, this.step);
|
||||
if (this.minDisabled) {
|
||||
this.inputActive = false;
|
||||
}
|
||||
},
|
||||
activeInput(disabled) {
|
||||
if (!this.disabled && !disabled) {
|
||||
this.inputActive = true;
|
||||
}
|
||||
},
|
||||
inactiveInput(disabled) {
|
||||
if (!this.disabled && !disabled) {
|
||||
this.inputActive = false;
|
||||
}
|
||||
},
|
||||
handleBlur(event) {
|
||||
let value = Number(this.currentValue);
|
||||
if (isNaN(value) || value > this.max || value < this.min) {
|
||||
this.currentValue = this.value;
|
||||
} else {
|
||||
this.currentValue = value;
|
||||
}
|
||||
},
|
||||
handleInput(value) {
|
||||
this.currentValue = value;
|
||||
handleBlur() {
|
||||
this.$refs.input.setCurrentValue(this.currentValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
:min="min"
|
||||
:max="max"
|
||||
:form="form"
|
||||
:value="value"
|
||||
:value="currentValue"
|
||||
ref="input"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
|
|
@ -48,7 +48,8 @@
|
|||
<textarea
|
||||
v-else
|
||||
class="el-textarea__inner"
|
||||
v-model="currentValue"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
ref="textarea"
|
||||
:name="name"
|
||||
:placeholder="placeholder"
|
||||
|
|
@ -76,6 +77,13 @@
|
|||
|
||||
mixins: [emitter],
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
textareaStyle: {}
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
value: [String, Number],
|
||||
placeholder: String,
|
||||
|
|
@ -105,53 +113,13 @@
|
|||
maxlength: Number,
|
||||
minlength: Number,
|
||||
max: {},
|
||||
min: {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleBlur(event) {
|
||||
this.$emit('blur', event);
|
||||
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
|
||||
},
|
||||
inputSelect() {
|
||||
this.$refs.input.select();
|
||||
},
|
||||
resizeTextarea() {
|
||||
var { autosize, type } = this;
|
||||
if (!autosize || type !== 'textarea') {
|
||||
return;
|
||||
}
|
||||
const minRows = autosize.minRows;
|
||||
const maxRows = autosize.maxRows;
|
||||
|
||||
this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
|
||||
},
|
||||
handleFocus(event) {
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
handleInput(event) {
|
||||
this.currentValue = event.target.value;
|
||||
},
|
||||
handleIconClick(event) {
|
||||
this.$emit('click', event);
|
||||
min: {},
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
textareaStyle: {}
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('inputSelect', this.inputSelect);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.resizeTextarea();
|
||||
},
|
||||
|
||||
computed: {
|
||||
validating() {
|
||||
return this.$parent.validateState === 'validating';
|
||||
|
|
@ -160,16 +128,58 @@
|
|||
|
||||
watch: {
|
||||
'value'(val, oldValue) {
|
||||
this.currentValue = val;
|
||||
this.setCurrentValue(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleBlur(event) {
|
||||
this.$emit('blur', event);
|
||||
if (this.validateEvent) {
|
||||
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
|
||||
}
|
||||
},
|
||||
'currentValue'(val) {
|
||||
inputSelect() {
|
||||
this.$refs.input.select();
|
||||
},
|
||||
resizeTextarea() {
|
||||
if (this.$isServer) return;
|
||||
var { autosize, type } = this;
|
||||
if (!autosize || type !== 'textarea') return;
|
||||
const minRows = autosize.minRows;
|
||||
const maxRows = autosize.maxRows;
|
||||
|
||||
this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
|
||||
},
|
||||
handleFocus(event) {
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
handleInput(event) {
|
||||
this.setCurrentValue(event.target.value);
|
||||
},
|
||||
handleIconClick(event) {
|
||||
this.$emit('click', event);
|
||||
},
|
||||
setCurrentValue(value) {
|
||||
if (value === this.currentValue) return;
|
||||
this.$nextTick(_ => {
|
||||
this.resizeTextarea();
|
||||
});
|
||||
this.$emit('input', val);
|
||||
this.$emit('change', val);
|
||||
this.dispatch('ElFormItem', 'el.form.change', [val]);
|
||||
this.currentValue = value;
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value);
|
||||
if (this.validateEvent) {
|
||||
this.dispatch('ElFormItem', 'el.form.change', [value]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$on('inputSelect', this.inputSelect);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.resizeTextarea();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,5 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"wind-dom": "0.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue