mirror of https://github.com/ElemeFE/element
Initial commit
qingwei.li
commit
e320f43c2d
|
|
@ -0,0 +1,2 @@
|
|||
popper.js
|
||||
fecha.js
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"plugins": ['vue'],
|
||||
"extends": 'elemefe',
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
npm-debug.log
|
||||
lerna-debug.log
|
||||
npm-debug.log.*
|
||||
lerna-debug.log.*
|
||||
lib
|
||||
.idea
|
||||
examples/element-ui
|
||||
fe.element/element-ui
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
## 更新日志
|
||||
|
||||
### 0.2.0
|
||||
|
||||
`2016-07-29`
|
||||
|
||||
- 增加 grid 相关组件
|
||||
- form-item 增加 required 属性
|
||||
|
||||
*非兼容性更新*
|
||||
|
||||
- progress 的 percentage 属性值范围从 0～1 改变为 1~100.
|
||||
|
||||
### 0.1.9
|
||||
|
||||
`2016-07-12`
|
||||
|
||||
- 增加 menu 组件
|
||||
|
||||
*非兼容性更新*
|
||||
|
||||
- 使用了新的图标集，原有的某些图标可能不存在了
|
||||
|
||||
### 0.1.8
|
||||
|
||||
`2016-07-07`
|
||||
|
||||
- dropdown 和 tooltip 首次出现闪动问题
|
||||
|
||||
### 0.1.7
|
||||
|
||||
`2016-07-06`
|
||||
|
||||
- dropdown 增加触发下拉菜单方式的参数
|
||||
- 修正若干组件的样式问题和浏览器兼容问题
|
||||
- 修复 popper.js 产生的过多 scroll 事件绑定
|
||||
- 在 radio-group 里增加 radio-button 类型
|
||||
- 为 select 添加 singleCancelable 选项
|
||||
|
||||
### 0.1.6
|
||||
|
||||
`2016-06-30`
|
||||
- dropdown-menu 改为动态创建
|
||||
- 修复 textarea 缺失 model 参数的 bug
|
||||
- 修复 pagination 和 input-group 在 safari 下的样式问题
|
||||
|
||||
### 0.1.5
|
||||
|
||||
`2016-06-29`
|
||||
- 为 MessageBox 和 Notification 注册全局方法
|
||||
- button 的 loading 状态时改为不触发 hover 和点击等操作
|
||||
- input组件 增加 maxlength 和 minlength 属性支持
|
||||
|
||||
### 0.1.4
|
||||
|
||||
`2016-06-29`
|
||||
|
||||
- 增加 Tabs、Form、MessageBox、Alert、Notification、Slider 组件
|
||||
- dropdown menu 现在是直接插入到 body 节点下，并且修正了自适应宽度的 bug
|
||||
- dropdown item 点击后关闭 dropdown menu
|
||||
- radio 绑定值增加 Number 类型支持
|
||||
- 增加 radio-group 组件
|
||||
- 增加 checkbox-group 组件
|
||||
- Select 组件 API 更新，现在的用法和原生 select 标签更加相似
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.PHONY: dist
|
||||
default: help
|
||||
|
||||
# build all theme
|
||||
build-theme: build-theme-default
|
||||
|
||||
build-theme-default:
|
||||
packages/theme-default/node_modules/.bin/gulp build --gulpfile packages/theme-default/gulpfile.js
|
||||
cp -rf packages/theme-default/lib lib/theme-default
|
||||
|
||||
install:
|
||||
npm i --registry=http://registry.npm.taobao.org --ignore-scripts --loglevel=error
|
||||
./node_modules/.bin/lerna bootstrap
|
||||
|
||||
dev: install
|
||||
node bin/iconInit.js
|
||||
npm run dev
|
||||
|
||||
new:
|
||||
node bin/new.js $(filter-out $@,$(MAKECMDGOALS))
|
||||
|
||||
dist:
|
||||
npm run dist
|
||||
make build-theme
|
||||
|
||||
dist-all:
|
||||
node bin/build-all.js
|
||||
make build-theme
|
||||
|
||||
deploy: install
|
||||
@npm run deploy
|
||||
@rm -rf fe.element/element-ui
|
||||
@cp -r examples/element-ui fe.element
|
||||
|
||||
gh-docs:
|
||||
@npm run gh-docs
|
||||
|
||||
pub:
|
||||
./node_modules/.bin/kp $(filter-out $@,$(MAKECMDGOALS))
|
||||
|
||||
pub-all: dist-all
|
||||
./node_modules/.bin/lerna publish
|
||||
|
||||
help:
|
||||
@echo " \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
|
||||
@echo " \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 安装依赖"
|
||||
@echo " \033[35mmake new <component-name> [中文名]\033[0m\t--- 创建新组件 package. 例如 'make new button 按钮'"
|
||||
@echo " \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 开发模式"
|
||||
@echo " \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 编译项目，生成目标文件"
|
||||
@echo " \033[35mmake dist-all\033[0m\t\033[0m\t\033[0m\t--- 分别编译每个组件项目"
|
||||
@echo " \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 部署 demo"
|
||||
@echo " \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 发布到 npm 上"
|
||||
@echo " \033[35mmake pub-all\033[0m\t\033[0m\t\033[0m\t\033[0m\t--- 发布各组件到 npm 上"
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
# Element
|
||||
> UI Elements for admin page.
|
||||
|
||||
## Demo/Docs
|
||||
https://element-component.github.io/element
|
||||
|
||||
## Usages
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
|
||||
Vue.use(Element)
|
||||
|
||||
// or
|
||||
import {
|
||||
Select,
|
||||
Button
|
||||
// ...
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.component(Select.name, ElSelect)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
(roughly) to
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css';
|
||||
|
||||
Vue.use(Element)
|
||||
|
||||
// or
|
||||
import Select from 'element-ui/lib/select';
|
||||
import Select from 'element-ui/lib/theme-default/select.css';
|
||||
import Button from 'element-ui/lib/button';
|
||||
import Button from 'element-ui/lib/theme-default/button.css';
|
||||
|
||||
Vue.component(Select.name, ElSelect)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
|
||||
## babel-plugin-component
|
||||
.babelrc
|
||||
```json
|
||||
{
|
||||
"plugins": ["xxx", ["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-default"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
## LICENSE
|
||||
MIT
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
const components = require('../components.json');
|
||||
const execSync = require('child_process').execSync;
|
||||
const existsSync = require('fs').existsSync;
|
||||
const path = require('path');
|
||||
|
||||
let componentPaths = [];
|
||||
|
||||
delete components.index;
|
||||
delete components.font;
|
||||
|
||||
Object.keys(components).forEach(key => {
|
||||
const filePath = path.join(__dirname, `../packages/${key}/cooking.conf.js`);
|
||||
|
||||
if (existsSync(filePath)) {
|
||||
componentPaths.push(`packages/${key}/cooking.conf.js`)
|
||||
}
|
||||
});
|
||||
|
||||
const paths = componentPaths.join(',');
|
||||
const cli = `cooking build -c ${paths} -p`;
|
||||
|
||||
execSync(cli, {
|
||||
stdio: 'inherit'
|
||||
});
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
var Components = require('../components.json')
|
||||
var fs = require('fs')
|
||||
var render = require('json-templater/string')
|
||||
var uppercamelcase = require('uppercamelcase')
|
||||
var path = require('path')
|
||||
|
||||
var OUTPUT_PATH = path.join(__dirname, '../src/index.js')
|
||||
var IMPORT_TEMPLATE = `import {{name}} from '../packages/{{package}}/index.js';`
|
||||
var ISNTALL_COMPONENT_TEMPLATE = ` Vue.component({{name}}.name, {{name}});`
|
||||
var MAIN_TEMPLATE = `{{include}}
|
||||
|
||||
const install = function(Vue) {
|
||||
{{install}}
|
||||
|
||||
Vue.use(Loading);
|
||||
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
};
|
||||
|
||||
// auto install
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
{{list}}
|
||||
};
|
||||
`
|
||||
|
||||
delete Components.font
|
||||
|
||||
var ComponentNames = Object.keys(Components)
|
||||
|
||||
var includeComponentTemplate = []
|
||||
var installTemplate = []
|
||||
var listTemplate = []
|
||||
|
||||
ComponentNames.forEach(name => {
|
||||
var componentName = uppercamelcase(name)
|
||||
|
||||
includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
|
||||
name: componentName,
|
||||
package: name
|
||||
}))
|
||||
|
||||
|
||||
if (['Loading', 'MessageBox', 'Notification'].indexOf(componentName) === -1) {
|
||||
installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
|
||||
name: componentName,
|
||||
component: name
|
||||
}))
|
||||
}
|
||||
|
||||
listTemplate.push(` ${componentName}`)
|
||||
})
|
||||
|
||||
var template = render(MAIN_TEMPLATE, {
|
||||
include: includeComponentTemplate.join('\n'),
|
||||
install: installTemplate.join('\n'),
|
||||
list: listTemplate.join(',\n')
|
||||
})
|
||||
|
||||
fs.writeFileSync(OUTPUT_PATH, template)
|
||||
console.log('[build entry] DONE:', OUTPUT_PATH)
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
'use strict';
|
||||
|
||||
var postcss = require('postcss');
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var fontFile = fs.readFileSync(path.resolve(__dirname, '../packages/theme-default/src/icon.css'), 'utf8');
|
||||
var nodes = postcss.parse(fontFile).nodes;
|
||||
var classList = [];
|
||||
|
||||
nodes.forEach((node) => {
|
||||
var selector = node.selector || '';
|
||||
var reg = new RegExp(/\.el-icon-([^:]+):before/);
|
||||
var arr = selector.match(reg);
|
||||
|
||||
if (arr && arr[1]) {
|
||||
classList.push(arr[1]);
|
||||
}
|
||||
})
|
||||
|
||||
fs.writeFile(path.resolve(__dirname, '../examples/icon.json'), JSON.stringify(classList));
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
'use strict';
|
||||
|
||||
console.log();
|
||||
process.on('exit', () => {
|
||||
console.log();
|
||||
});
|
||||
|
||||
if (!process.argv[2]) {
|
||||
console.error('[组件名]必填.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const path = require('path');
|
||||
const fileSave = require('file-save');
|
||||
const uppercamelcase = require('uppercamelcase');
|
||||
const componentname = process.argv[2];
|
||||
const chineseName = process.argv[3] || componentname;
|
||||
const ComponentName = uppercamelcase(componentname);
|
||||
const PackagePath = path.resolve(__dirname, '../packages', componentname);
|
||||
const Files = [
|
||||
{
|
||||
filename: 'index.js',
|
||||
content: `const ${ComponentName} = require('./src/main');
|
||||
|
||||
${ComponentName}.install = function(Vue) {
|
||||
Vue.component(${ComponentName}.name, ${ComponentName});
|
||||
};
|
||||
|
||||
module.exports = ${ComponentName};`
|
||||
},
|
||||
{
|
||||
filename: 'cooking.conf.js',
|
||||
content: `var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'El${ComponentName}',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();`
|
||||
},
|
||||
{
|
||||
filename: 'package.json',
|
||||
content: `{
|
||||
"name": "el-${componentname}",
|
||||
"version": "0.0.0",
|
||||
"description": "A ${componentname} component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/${componentname}",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}`
|
||||
},
|
||||
{
|
||||
filename: 'src/main.vue',
|
||||
content: `<template>
|
||||
<div class="el-${componentname}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'el-${componentname}'
|
||||
};
|
||||
</script>`
|
||||
},
|
||||
{
|
||||
filename: path.join('../../examples/docs/', `${componentname}.md`),
|
||||
content:`## ${chineseName}`
|
||||
}
|
||||
]
|
||||
|
||||
// 添加到 components.json
|
||||
const componentsFile = require('../components.json');
|
||||
if (componentsFile[componentname]) {
|
||||
console.error(`${componentname} 已存在.`);
|
||||
process.exit(1);
|
||||
}
|
||||
componentsFile[componentname] = [`./packages/${componentname}/index.js`];
|
||||
fileSave(path.join(__dirname, '../components.json'))
|
||||
.write(JSON.stringify(componentsFile, null, ' '), 'utf8')
|
||||
.end('\n')
|
||||
|
||||
// 创建 package
|
||||
Files.forEach(file => {
|
||||
fileSave(path.join(PackagePath, file.filename))
|
||||
.write(file.content, 'utf8')
|
||||
.end('\n')
|
||||
})
|
||||
|
||||
// 添加到 nav.config.json
|
||||
const navConfigFile = require('../examples/nav.config.json');
|
||||
navConfigFile[navConfigFile.length - 1].list.push({
|
||||
path: `/${componentname}`,
|
||||
name: `${chineseName} (${componentname})`,
|
||||
title: componentname === chineseName ?
|
||||
componentname :
|
||||
`${componentname} ${chineseName}`
|
||||
});
|
||||
|
||||
fileSave(path.join(__dirname, '../examples/nav.config.json'))
|
||||
.write(JSON.stringify(navConfigFile, null, ' '), 'utf8')
|
||||
.end('\n')
|
||||
|
||||
console.log('DONE!');
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
{
|
||||
"group": [
|
||||
"./packages/group/index.js"
|
||||
],
|
||||
"select-dropdown": [
|
||||
"./packages/select-dropdown/index.js"
|
||||
],
|
||||
"pagination": [
|
||||
"./packages/pagination/index.js"
|
||||
],
|
||||
"dialog": [
|
||||
"./packages/dialog/index.js"
|
||||
],
|
||||
"cascader": [
|
||||
"./packages/cascader/index.js"
|
||||
],
|
||||
"autocomplete": [
|
||||
"./packages/autocomplete/index.js"
|
||||
],
|
||||
"dropdown": [
|
||||
"./packages/dropdown/index.js"
|
||||
],
|
||||
"dropdown-item": [
|
||||
"./packages/dropdown-item/index.js"
|
||||
],
|
||||
"menu": [
|
||||
"./packages/menu/index.js"
|
||||
],
|
||||
"submenu": [
|
||||
"./packages/submenu/index.js"
|
||||
],
|
||||
"menu-item": [
|
||||
"./packages/menu-item/index.js"
|
||||
],
|
||||
"input": [
|
||||
"./packages/input/index.js"
|
||||
],
|
||||
"input-number": [
|
||||
"./packages/input-number/index.js"
|
||||
],
|
||||
"input-group": [
|
||||
"./packages/input-group/index.js"
|
||||
],
|
||||
"radio": [
|
||||
"./packages/radio/index.js"
|
||||
],
|
||||
"radio-group": [
|
||||
"./packages/radio-group/index.js"
|
||||
],
|
||||
"radio-button": [
|
||||
"./packages/radio-button/index.js"
|
||||
],
|
||||
"checkbox": [
|
||||
"./packages/checkbox/index.js"
|
||||
],
|
||||
"checkbox-group": [
|
||||
"./packages/checkbox-group/index.js"
|
||||
],
|
||||
"switch": [
|
||||
"./packages/switch/index.js"
|
||||
],
|
||||
"select": [
|
||||
"./packages/select/index.js"
|
||||
],
|
||||
"option": [
|
||||
"./packages/option/index.js"
|
||||
],
|
||||
"option-group": [
|
||||
"./packages/option-group/index.js"
|
||||
],
|
||||
"button": [
|
||||
"./packages/button/index.js"
|
||||
],
|
||||
"button-group": [
|
||||
"./packages/button-group/index.js"
|
||||
],
|
||||
"table": [
|
||||
"./packages/table/index.js"
|
||||
],
|
||||
"table-column": [
|
||||
"./packages/table-column/index.js"
|
||||
],
|
||||
"date-picker": [
|
||||
"./packages/date-picker/index.js"
|
||||
],
|
||||
"time-select": [
|
||||
"./packages/time-select/index.js"
|
||||
],
|
||||
"time-picker": [
|
||||
"./packages/time-picker/index.js"
|
||||
],
|
||||
"popover": [
|
||||
"./packages/popover/index.js"
|
||||
],
|
||||
"tooltip": [
|
||||
"./packages/tooltip/index.js"
|
||||
],
|
||||
"message-box": [
|
||||
"./packages/message-box/index.js"
|
||||
],
|
||||
"breadcrumb": [
|
||||
"./packages/breadcrumb/index.js"
|
||||
],
|
||||
"breadcrumb-item": [
|
||||
"./packages/breadcrumb-item/index.js"
|
||||
],
|
||||
"form": [
|
||||
"./packages/form/index.js"
|
||||
],
|
||||
"form-item": [
|
||||
"./packages/form-item/index.js"
|
||||
],
|
||||
"tabs": [
|
||||
"./packages/tabs/index.js"
|
||||
],
|
||||
"tab-pane": [
|
||||
"./packages/tab-pane/index.js"
|
||||
],
|
||||
"tag": [
|
||||
"./packages/tag/index.js"
|
||||
],
|
||||
"tree": [
|
||||
"./packages/tree/index.js"
|
||||
],
|
||||
"alert": [
|
||||
"./packages/alert/index.js"
|
||||
],
|
||||
"notification": [
|
||||
"./packages/notification/index.js"
|
||||
],
|
||||
"slider": [
|
||||
"./packages/slider/index.js"
|
||||
],
|
||||
"loading": [
|
||||
"./packages/loading/index.js"
|
||||
],
|
||||
"icon": [
|
||||
"./packages/icon/index.js"
|
||||
],
|
||||
"row": [
|
||||
"./packages/row/index.js"
|
||||
],
|
||||
"col": [
|
||||
"./packages/col/index.js"
|
||||
],
|
||||
"upload": [
|
||||
"./packages/upload/index.js"
|
||||
],
|
||||
"progress": [
|
||||
"./packages/progress/index.js"
|
||||
],
|
||||
"spinner": [
|
||||
"./packages/spinner/index.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,386 @@
|
|||
<style lang="css">
|
||||
@import '../node_modules/purecss/build/grids-core.css';
|
||||
@import '../node_modules/purecss/build/grids-units.css';
|
||||
@import '../node_modules/purecss/build/menus.css';
|
||||
@import '../node_modules/highlight.js/styles/color-brewer.css';
|
||||
@import 'assets/styles/common.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pure-g [class *= "pure-u"] {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
}
|
||||
|
||||
.app__sidebar {
|
||||
width: 230px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app__content {
|
||||
margin-left: 230px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app__menu {
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #f8f8f9;
|
||||
color: #20293b;
|
||||
|
||||
.app__brand {
|
||||
color: #20293b;
|
||||
font-size: 24px;
|
||||
margin: 10px 0 40px;
|
||||
text-align: center;
|
||||
|
||||
.app__eleme {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.app__menu__label {
|
||||
color: #20293b;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 10px 0 10px 36px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent transparent rgba(170, 170, 170, .5);
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 7px;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 14px;
|
||||
transition-delay: .1s;
|
||||
transition: transform .3s;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&.unfold::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.app__menu__link {
|
||||
padding: 12px 0 12px 50px;
|
||||
font-size: 14px;
|
||||
color: #20293b;
|
||||
transition: color, background-color .3s;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-left: 3px solid #2675c3;
|
||||
color: #2675c3;
|
||||
padding-left: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.app__main {
|
||||
.app__description {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
padding-bottom: 36px;
|
||||
margin-bottom: 36px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #216fc1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 60px 0 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
margin: 36px 0 16px;
|
||||
}
|
||||
|
||||
p, h2, h3 {
|
||||
+div, +span {
|
||||
margin: 10px 0 24px;
|
||||
}
|
||||
|
||||
+span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
section > table {
|
||||
border-collapse: collapse;
|
||||
border-style: hidden;
|
||||
box-shadow: 0 0 0 1px #e1e1e1;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
background-color: #f8f8f8;
|
||||
font-size: 14px;
|
||||
|
||||
th {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e1e1e1;
|
||||
font-size: 14px;
|
||||
max-height: 90px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 0;
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 80%);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.open {
|
||||
max-height: 100%;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hljs__button::before {
|
||||
margin-bottom: 0;
|
||||
margin-top: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hljs__button {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
|
||||
&::before {
|
||||
margin-bottom: 2px;
|
||||
margin-top: 0;
|
||||
transform: rotate(-135deg);
|
||||
border-left: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app__header {
|
||||
background-color: #2c7dc7;
|
||||
color: #fff;
|
||||
padding: 42px;
|
||||
height: 120px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.app__headline {
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slidedown-transition {
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slidedown-enter, .slidedown-leave {
|
||||
max-height: 0 !important;
|
||||
}
|
||||
.demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
|
||||
<a class="pure-menu-heading app__brand" v-link="'/'">
|
||||
<span class="app__eleme">ELEME</span>NT
|
||||
</a>
|
||||
|
||||
<template v-for="nav in navs">
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="navState.$set($index, !navState[$index] || false)"
|
||||
class="pure-menu-heading app__menu__label"
|
||||
:class="{ 'unfold': !navState[$index] }"
|
||||
v-text="nav.group"></a>
|
||||
<ul
|
||||
class="pure-menu-list"
|
||||
transition="slidedown"
|
||||
v-show="!navState[$index]"
|
||||
:style="{
|
||||
maxHeight: nav.list.length * 44 + 'px'
|
||||
}">
|
||||
<li
|
||||
class="pure-menu-item app__menu__item"
|
||||
v-for="item in nav.list"
|
||||
v-if="!item.disabled">
|
||||
<a
|
||||
class="pure-menu-link app__menu__link"
|
||||
v-link="{ path: item.path, activeClass: 'active' }"
|
||||
v-text="item.name"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div class="pure-u-5-6 app__content">
|
||||
<header class="app__header">
|
||||
<h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
|
||||
</header>
|
||||
<section class="app__main" v-el:main>
|
||||
<p class="app__description">{{ $route.description }}</p>
|
||||
<router-view></router-view>
|
||||
</section>
|
||||
<toc main=".app__main"></toc>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="hljs__button" v-el:button></button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { navs } from './route.config';
|
||||
import toc from './components/toc';
|
||||
import E from 'oui-dom-events';
|
||||
import { toggleClass, addClass, removeClass } from './dom/class';
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
components: {
|
||||
toc
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
findAllHighlight() {
|
||||
return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.navs = navs;
|
||||
},
|
||||
|
||||
ready() {
|
||||
this.mainContent = document.querySelector('.app__content');
|
||||
|
||||
E.delegate(this.$els.main, '.hljs__button', 'click.highlight', e => {
|
||||
const parent = e.target.parentNode;
|
||||
|
||||
toggleClass(parent, 'open');
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
E.undelegate(this.$els.main, '.hljs', 'click.highlight');
|
||||
},
|
||||
|
||||
watch: {
|
||||
highlights(list) {
|
||||
list.map(item => {
|
||||
if (item.offsetHeight <= 100) {
|
||||
toggleClass(item, 'open');
|
||||
} else {
|
||||
item.appendChild(this.$els.button.cloneNode(true));
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
['element.example.reload']() {
|
||||
this.$nextTick(() => {
|
||||
if (this.mainContent.querySelector('.no-toc')) {
|
||||
addClass(this.mainContent, 'no-toc');
|
||||
} else {
|
||||
removeClass(this.mainContent, 'no-toc');
|
||||
}
|
||||
|
||||
this.highlights = this.findAllHighlight();
|
||||
});
|
||||
this.mainContent.scrollTop = 0;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
|
|
@ -0,0 +1,88 @@
|
|||
.app__content {
|
||||
min-width: 740px;
|
||||
|
||||
&.no-toc {
|
||||
min-width: 660px;
|
||||
|
||||
.app__main {
|
||||
max-width: 906px;
|
||||
margin: 36px 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.app__main {
|
||||
margin: 36px 242px 36px 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.app__main.commonpage {
|
||||
p {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
&::before {
|
||||
content: "-";
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #e4e4e4;
|
||||
border-style: solid;
|
||||
margin: 36px 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2270c1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f8f8f8;
|
||||
padding: 4px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
border: none;
|
||||
color: #666;
|
||||
padding: 20px 36px;
|
||||
margin: 16px 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.hljs__button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="dialog d-popup-center"
|
||||
v-if="rendered"
|
||||
v-show="visible"
|
||||
:transition="transition">
|
||||
<div class="dialog-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'vue-popup';
|
||||
import 'vue-popup/lib/popup.css';
|
||||
|
||||
export default {
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showModal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
modal: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickModal: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
willClose() {
|
||||
this.visible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.dialog {
|
||||
position: fixed;
|
||||
|
||||
img {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
.app__main .d-modal {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="table-filter" v-show="visible">haha</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table-filter {
|
||||
position: absolute 0 100px * *;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true
|
||||
};
|
||||
},
|
||||
|
||||
events: {
|
||||
toggleFilterPopup(visibleFilter) {
|
||||
this.visible = visibleFilter === 'tag';
|
||||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
console.log('popup ready');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<li class="item">
|
||||
<a
|
||||
class="toc__link"
|
||||
:class="{ 'active': active === item.id }"
|
||||
:href="'#' + encodeURIComponent(item.heading)"
|
||||
v-text="item.heading">
|
||||
</a>
|
||||
<ol
|
||||
class="group"
|
||||
v-if="item.children"
|
||||
v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
|
||||
<el-toc-item
|
||||
:item="sub"
|
||||
class="item"
|
||||
:active="active"
|
||||
v-for="sub in item.children">
|
||||
</el-toc-item>
|
||||
</ol>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 浮动在右边的目录子项
|
||||
*/
|
||||
export default {
|
||||
name: 'el-toc-item',
|
||||
|
||||
props: {
|
||||
item: Object,
|
||||
active: Number
|
||||
},
|
||||
|
||||
methods: {
|
||||
encodeURIComponent(source) {
|
||||
return encodeURIComponent(source);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<nav
|
||||
class="toc"
|
||||
:class="{ 'toc--fixed': fixed }"
|
||||
:style="{ 'top': offset + 'px' }">
|
||||
<ol class="group">
|
||||
<el-toc-item
|
||||
v-for="item in toc"
|
||||
class="title"
|
||||
:active="active"
|
||||
:item="item">
|
||||
</el-toc-item>
|
||||
</ol>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElTocItem from './toc-item';
|
||||
import E from 'oui-dom-events';
|
||||
|
||||
/**
|
||||
* 浮动在右边的目录
|
||||
*/
|
||||
export default {
|
||||
name: 'toc',
|
||||
|
||||
components: {
|
||||
ElTocItem
|
||||
},
|
||||
|
||||
props: {
|
||||
main: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
toc: [],
|
||||
offset: 0,
|
||||
fixed: false,
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
events: {
|
||||
['element.example.reload']() {
|
||||
this.$nextTick(() => {
|
||||
this.toc = [];
|
||||
this.anchors = this.findAllAnchors();
|
||||
this.scrollWrap = document.querySelector('body');
|
||||
this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
|
||||
this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
|
||||
this.updateFixed();
|
||||
|
||||
this.generateTOC(this.anchors, this.toc);
|
||||
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
|
||||
this.scrollActiveCurrent();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
this.scrollAutoFixed();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* @see https://github.com/chjj/marked/issues/334
|
||||
*/
|
||||
generateTOC(anchors, toc) {
|
||||
if (document.querySelector('.no-toc')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cache = {};
|
||||
|
||||
for (let key in anchors) {
|
||||
const current = this.fetchAnchorData(anchors[key]);
|
||||
const level = current.level || 1;
|
||||
const last = cache[level - 1];
|
||||
|
||||
current.id = Number(key);
|
||||
|
||||
if (last) {
|
||||
last.children = (last.children || []).concat(current);
|
||||
} else {
|
||||
cache[level] = current;
|
||||
toc.push(current);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
fetchAnchorData(anchor) {
|
||||
const head = anchor.parentNode;
|
||||
const level = head.tagName.match(/\d/g)[0];
|
||||
const heading = head.getAttribute('id');
|
||||
|
||||
return { level, heading };
|
||||
},
|
||||
|
||||
updateFixed() {
|
||||
if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
|
||||
this.offset = this.currentHeaderHeight;
|
||||
this.fixed = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.fixed) return;
|
||||
|
||||
this.offset = this.fixedOffsetTop;
|
||||
this.fixed = true;
|
||||
},
|
||||
|
||||
scrollAutoFixed() {
|
||||
E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
|
||||
},
|
||||
|
||||
findAllAnchors() {
|
||||
return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
|
||||
},
|
||||
|
||||
scrollActiveCurrent() {
|
||||
const anchors = this.findAllAnchors();
|
||||
const body = this.scrollWrap;
|
||||
const distances = [];
|
||||
let current;
|
||||
let index = 0;
|
||||
let max;
|
||||
|
||||
for (let anchor of anchors) {
|
||||
distances.push(anchor.offsetTop);
|
||||
}
|
||||
|
||||
current = distances[index];
|
||||
max = distances.length - 1;
|
||||
this.active = index;
|
||||
|
||||
// 记录当前滚动档位
|
||||
// 判断当前滚动和下个档位
|
||||
E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
|
||||
const scrollTop = body.scrollTop;
|
||||
|
||||
while (index < max && scrollTop > current) {
|
||||
current = distances[++index];
|
||||
this.active = index;
|
||||
}
|
||||
|
||||
while (index && scrollTop < current) {
|
||||
current = distances[--index];
|
||||
this.active = index;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
|
||||
E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.toc {
|
||||
color: #999;
|
||||
margin-right: 40px;
|
||||
margin-top: -14px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
|
||||
&.toc--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.group {
|
||||
font-size: 13px;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 14px 0;
|
||||
|
||||
.toc__link:hover,
|
||||
.toc__link.active {
|
||||
color: #216fc1;
|
||||
}
|
||||
|
||||
.group {
|
||||
border-left: 1px solid rgba(31, 109, 191, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
[
|
||||
{
|
||||
"label": "普通业务",
|
||||
"value": "普通业务",
|
||||
"children": [
|
||||
{
|
||||
"label": "业务1",
|
||||
"value": "业务1",
|
||||
"children": [
|
||||
{
|
||||
"label": "业务5",
|
||||
"value": "业务5",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "业务2",
|
||||
"value": "业务2",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "会员业务",
|
||||
"value": "会员业务",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
[
|
||||
{
|
||||
"label": "选项1",
|
||||
"value": "结果1"
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"value": "结果2",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"label": "选项3",
|
||||
"value": "结果3"
|
||||
},
|
||||
{
|
||||
"label": "选项4",
|
||||
"value": "结果4"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"gourp1": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"value": "结果1"
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"value": "结果2"
|
||||
},
|
||||
{
|
||||
"label": "选项3",
|
||||
"value": "结果3"
|
||||
},
|
||||
{
|
||||
"label": "选项4",
|
||||
"value": "结果4"
|
||||
},
|
||||
{
|
||||
"label": "选项5",
|
||||
"value": "结果5"
|
||||
},
|
||||
{
|
||||
"label": "选项6",
|
||||
"value": "结果6"
|
||||
}
|
||||
],
|
||||
"gourp2": [
|
||||
{
|
||||
"label": "选项7",
|
||||
"value": "结果7"
|
||||
},
|
||||
{
|
||||
"label": "选项8",
|
||||
"value": "结果8"
|
||||
},
|
||||
{
|
||||
"label": "选项9",
|
||||
"value": "结果9"
|
||||
},
|
||||
{
|
||||
"label": "选项10",
|
||||
"value": "结果10"
|
||||
},
|
||||
{
|
||||
"label": "选项11",
|
||||
"value": "结果11"
|
||||
},
|
||||
{
|
||||
"label": "选项12",
|
||||
"value": "结果12"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
[
|
||||
{
|
||||
"label": "选项1",
|
||||
"value": "结果1",
|
||||
"remark": "remark1"
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"value": "结果2",
|
||||
"remark": "remark2"
|
||||
},
|
||||
{
|
||||
"label": "选项3",
|
||||
"value": "结果3",
|
||||
"remark": "remark3"
|
||||
},
|
||||
{
|
||||
"label": "选项4",
|
||||
"value": "结果4",
|
||||
"remark": "remark4"
|
||||
},
|
||||
{
|
||||
"label": "选项5",
|
||||
"value": "结果5",
|
||||
"remark": "remark5"
|
||||
},
|
||||
{
|
||||
"label": "选项6",
|
||||
"value": "结果6",
|
||||
"remark": "remark6"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<style>
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success"></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info"></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning"></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error"></el-alert>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-alert title="成功提示的文案" type="success"></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info"></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning"></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error"></el-alert>
|
||||
```
|
||||
|
||||
## 自定义关闭按钮
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-alert title="成功提示的文案" type="success" close-text="知道了"></el-alert>
|
||||
```
|
||||
|
||||
## 带有 icon
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
|
||||
```
|
||||
|
||||
## 带有辅助性文字介绍
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明"></el-alert>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明">
|
||||
</el-alert>
|
||||
```
|
||||
|
||||
## 带有 icon 和辅助性文字介绍
|
||||
|
||||
<div class="demo-box demo-alert">
|
||||
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
description="文字说明文字说明文字说明文字说明文字说明文字说明"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题, 必选参数 | string | | |
|
||||
| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
|
||||
| description | 说明文字 | string | | |
|
||||
| closable | 是否可关闭 | boolean | | true |
|
||||
| closeText | 关闭按钮自定义文本 | string | | |
|
||||
| showIcon | 是否显示图标 | boolean | | false |
|
||||
| onClose | 关闭时的回调函数 | function | | |
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-autocomplete {
|
||||
width: 180px;
|
||||
}
|
||||
.el-autocomplete__suggestions.my-autocomplete-suggestions {
|
||||
width: 300px;
|
||||
|
||||
& .remark {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var $q = require('q');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
states: [],
|
||||
state1: '',
|
||||
state2: '',
|
||||
state3: '',
|
||||
state4: '',
|
||||
myPartial: {
|
||||
name: 'my-autocomplete-suggestions',
|
||||
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
|
||||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
|
||||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
|
||||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
|
||||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
|
||||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
|
||||
Wisconsin, Wyoming';
|
||||
var result = [];
|
||||
|
||||
allStates.split(/, +/g).forEach((state) => {
|
||||
if (state) {
|
||||
result.push({
|
||||
value: state.toLowerCase(),
|
||||
display: state
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
querySearch(query, simulateQuery) {
|
||||
var states = this.states;
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states,
|
||||
deferred;
|
||||
|
||||
if (simulateQuery) {
|
||||
if (!query) { return []; }
|
||||
|
||||
deferred = $q.defer();
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
return deferred.promise;
|
||||
} else {
|
||||
return results;
|
||||
}
|
||||
},
|
||||
createStateFilter(query) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(query.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state1"
|
||||
:suggestions = "querySearch(state1)"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-autocomplete
|
||||
:value.sync = "state1"
|
||||
:suggestions = "querySearch(state1)"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
state1: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
|
||||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
|
||||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
|
||||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
|
||||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
|
||||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
|
||||
Wisconsin, Wyoming';
|
||||
var result = [];
|
||||
|
||||
allStates.split(/, +/g).forEach((state) => {
|
||||
if (state) {
|
||||
result.push({
|
||||
value: state.toLowerCase(),
|
||||
display: state
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
querySearch(query, simulateQuery) {
|
||||
var states = this.states;
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states,
|
||||
deferred;
|
||||
|
||||
if (simulateQuery) {
|
||||
if (!query) { return []; }
|
||||
|
||||
deferred = $q.defer();
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
return deferred.promise;
|
||||
} else {
|
||||
return results;
|
||||
}
|
||||
},
|
||||
createStateFilter(query) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(query.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 通过键盘控制下拉的显示
|
||||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state2"
|
||||
:suggestions = "querySearch(state2)"
|
||||
:show-on-up-down = "true"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-autocomplete
|
||||
:value.sync = "state2"
|
||||
:suggestions = "querySearch(state2)"
|
||||
:show-on-up-down = "true"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
state2: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
|
||||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
|
||||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
|
||||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
|
||||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
|
||||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
|
||||
Wisconsin, Wyoming';
|
||||
var result = [];
|
||||
|
||||
allStates.split(/, +/g).forEach((state) => {
|
||||
if (state) {
|
||||
result.push({
|
||||
value: state.toLowerCase(),
|
||||
display: state
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
querySearch(query, simulateQuery) {
|
||||
var states = this.states;
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states,
|
||||
deferred;
|
||||
|
||||
if (simulateQuery) {
|
||||
if (!query) { return []; }
|
||||
|
||||
deferred = $q.defer();
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
return deferred.promise;
|
||||
} else {
|
||||
return results;
|
||||
}
|
||||
},
|
||||
createStateFilter(query) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(query.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 自定义模板
|
||||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state3"
|
||||
:suggestions = "querySearch(state3)"
|
||||
:partial = "myPartial"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-autocomplete
|
||||
:value.sync = "state3"
|
||||
:suggestions = "querySearch(state3)"
|
||||
:partial = "myPartial"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
state3: '',
|
||||
myPartial: {
|
||||
name: 'my-autocomplete-suggestions',
|
||||
template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
|
||||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
|
||||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
|
||||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
|
||||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
|
||||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
|
||||
Wisconsin, Wyoming';
|
||||
var result = [];
|
||||
|
||||
allStates.split(/, +/g).forEach((state) => {
|
||||
if (state) {
|
||||
result.push({
|
||||
value: state.toLowerCase(),
|
||||
display: state
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
querySearch(query, simulateQuery) {
|
||||
var states = this.states;
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states,
|
||||
deferred;
|
||||
|
||||
if (simulateQuery) {
|
||||
if (!query) { return []; }
|
||||
|
||||
deferred = $q.defer();
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
return deferred.promise;
|
||||
} else {
|
||||
return results;
|
||||
}
|
||||
},
|
||||
createStateFilter(query) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(query.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 服务端数据
|
||||
|
||||
<div class="demo-box">
|
||||
<el-autocomplete
|
||||
:value.sync = "state4"
|
||||
:suggestions = "querySearch(state4, true)"
|
||||
:search-from-server = "true"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-autocomplete
|
||||
:value.sync = "state4"
|
||||
:suggestions = "querySearch(state4, true)"
|
||||
:search-from-server = "true"
|
||||
placeholder = "请输入内容"
|
||||
></el-autocomplete>
|
||||
<script>
|
||||
var $q = require('q');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
state4: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
|
||||
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
|
||||
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
|
||||
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
|
||||
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
|
||||
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
|
||||
Wisconsin, Wyoming';
|
||||
var result = [];
|
||||
|
||||
allStates.split(/, +/g).forEach((state) => {
|
||||
if (state) {
|
||||
result.push({
|
||||
value: state.toLowerCase(),
|
||||
display: state
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
querySearch(query, simulateQuery) {
|
||||
var states = this.states;
|
||||
var results = query ? states.filter(this.createStateFilter(query)) : states,
|
||||
deferred;
|
||||
|
||||
if (simulateQuery) {
|
||||
if (!query) { return []; }
|
||||
|
||||
deferred = $q.defer();
|
||||
|
||||
setTimeout(() => {
|
||||
deferred.resolve(results);
|
||||
}, Math.random() * 3000, false);
|
||||
|
||||
return deferred.promise;
|
||||
} else {
|
||||
return results;
|
||||
}
|
||||
},
|
||||
createStateFilter(query) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(query.toLowerCase()) === 0);
|
||||
};
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.states = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| placeholder | 输入框占位文本 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| suggestions | 建议列表 | array,object | | |
|
||||
| value | 输入绑定值 | string | | |
|
||||
| showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | |
|
||||
| partial | 建议列表的自定义模板 | object | | |
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
## 基础使用
|
||||
|
||||
<div>
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>Home</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
|
||||
```html
|
||||
<el-breadcrumb>
|
||||
<el-breadcrumb-item>Home</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | 分隔符 | string | | 反斜杠'/' |
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isLoading2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(event) {
|
||||
console.log(event);
|
||||
alert('button clicked!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-button {
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础用法
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">primary</el-button>
|
||||
<el-button type="success">success</el-button>
|
||||
<el-button type="warning">warning</el-button>
|
||||
<el-button type="danger">danger</el-button>
|
||||
<el-button type="info">info</el-button>
|
||||
<el-button :disabled="true">disabled</el-button>
|
||||
<el-button type="text">text button</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">primary</el-button>
|
||||
<el-button type="success">success</el-button>
|
||||
<el-button type="warning">warning</el-button>
|
||||
<el-button type="danger">danger</el-button>
|
||||
<el-button type="info">info</el-button>
|
||||
<el-button :disabled="true">disabled</el-button>
|
||||
<el-button type="text">text button</el-button>
|
||||
```
|
||||
|
||||
## Plain Button
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button :plain="true">Default</el-button>
|
||||
<el-button :plain="true" type="success">success</el-button>
|
||||
<el-button :plain="true" type="warning">warning</el-button>
|
||||
<el-button :plain="true" type="danger">danger</el-button>
|
||||
<el-button :plain="true" :disabled="true">disabled</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true">Default</el-button>
|
||||
<el-button :plain="true" type="success">success</el-button>
|
||||
<el-button :plain="true" type="warning">warning</el-button>
|
||||
<el-button :plain="true" type="danger">danger</el-button>
|
||||
<el-button :plain="true" :disabled="true">disabled</el-button>
|
||||
```
|
||||
|
||||
## 尺寸
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" size="large">large</el-button>
|
||||
<el-button type="primary">Default</el-button>
|
||||
<el-button type="primary" size="small">small</el-button>
|
||||
<el-button type="primary" size="mini">mini</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button type="primary" size="large">large</el-button>
|
||||
<el-button type="primary">Default</el-button>
|
||||
<el-button type="primary" size="small">small</el-button>
|
||||
<el-button type="primary" size="mini">mini</el-button>
|
||||
```
|
||||
|
||||
## Loading
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
</div>
|
||||
<p>点击后变成 loading 状态</p>
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
|
||||
<el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
|
||||
<el-button type="primary" :loading="isLoading" @click="isLoading = true">Button</el-button>
|
||||
<el-button type="primary" icon="search" :loading="isLoading2" @click="isLoading2 = true">Button</el-button>
|
||||
```
|
||||
|
||||
## 图标按钮
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
|
||||
## 按钮组
|
||||
|
||||
<div class="demo-box demo-button">
|
||||
<el-button-group>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | 尺寸 | string | large,small,mini | |
|
||||
| type | 类型 | string | primary,success,warning,danger,info,text | |
|
||||
| plain | 是否朴素按钮 | Boolean | true,false | false |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| icon | 图标，已有的图标库中的图标名 | string | | |
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
checkList: ['选中且禁用','复选框 A'],
|
||||
// checkList2: ['复选框 A'],
|
||||
checked: true,
|
||||
name: 'Jonny',
|
||||
a: 'Jonny',
|
||||
b: 'Lara'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.demo-box.demo-checkbox {
|
||||
.checkbox {
|
||||
margin-right: 5px;
|
||||
|
||||
& + .checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础用法
|
||||
|
||||
### 单个勾选框，逻辑值
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox>
|
||||
```
|
||||
|
||||
### 多个勾选框，绑定到同一个数组
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
|
||||
</div>
|
||||
|
||||
<p>{{checkList | json}}</p>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox>
|
||||
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkList: ['选中且禁用','复选框 A']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 绑定 value：
|
||||
|
||||
<div class="demo-box demo-checkbox">
|
||||
<el-checkbox
|
||||
class="checkbox"
|
||||
:value.sync="name"
|
||||
:true-label="a"
|
||||
:false-label="b"
|
||||
>
|
||||
</el-checkbox>{{name}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-checkbox
|
||||
class="checkbox"
|
||||
:value.sync="name"
|
||||
:true-label="a"
|
||||
:false-label="b"
|
||||
>
|
||||
</el-checkbox>
|
||||
```
|
||||
|
||||
```js
|
||||
vm.a = 'Jonny';
|
||||
vm.b = 'Lara';
|
||||
// 当选中时
|
||||
vm.name === vm.a
|
||||
// 当没有选中时
|
||||
vm.name === vm.b
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| model | 绑定值 | string\|string[]\|boolean | | |
|
||||
| value | 真实值 | string | | |
|
||||
| label | 显示值，不填则显示 value | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 日期点
|
||||
|
||||
### 日
|
||||
|
||||
以『日』为基本单位
|
||||
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 周
|
||||
|
||||
以『周』为基本单位
|
||||
|
||||
<el-date-picker
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 月
|
||||
|
||||
以『月』为基本单位
|
||||
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 年
|
||||
|
||||
以『年』为基本单位
|
||||
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 含快捷选项
|
||||
|
||||
左侧区域可配置快捷选项，例如『今天』、『昨天』等
|
||||
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 日期范围
|
||||
|
||||
### 日期范围
|
||||
|
||||
在一个选择器中选择
|
||||
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 含快捷选项
|
||||
|
||||
左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
|
||||
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
:picker-options="pickerOptions2"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
:picker-options="pickerOptions2"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 绑定值，需双向绑定 | String | | |
|
||||
| readonly | 只读 | Boolean | | false |
|
||||
| placeholder | 占位内容 | String | | |
|
||||
| type | 显示类型 | String | year, month, date, datetime, week | date |
|
||||
| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
|
||||
| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
|
||||
|
||||
### shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | 标题 | String | | |
|
||||
| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
|
||||
|
|
@ -0,0 +1,438 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 日期和时间点
|
||||
|
||||
### 日期和时间点的选择（一）
|
||||
|
||||
在两个选择器中选择日期与时间。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
placeholder="选择时间">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
### 日期和时间点的选择（二）
|
||||
|
||||
在一个选择器中选择日期与时间。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 含快捷选项（一）
|
||||
|
||||
左侧区域可配置快捷选项，例如『今天』、『昨天』等。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
:picker-options="pickerOptions1"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
placeholder="选择时间">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
placeholder="选择时间">
|
||||
</el-time-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 含快捷选项（二）
|
||||
|
||||
左侧区域可配置快捷选项，例如『今天』、『昨天』等。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
:picker-options="pickerOptions1"
|
||||
style="width: 300px;">
|
||||
</el-date-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 日期和时间范围
|
||||
|
||||
### 日期和时间范围的选择（一）
|
||||
|
||||
在两个选择器中选择。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 日期和时间范围的选择（二）
|
||||
|
||||
在一个选择器中选择。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="datetimerange"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="datetimerange"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 含快捷选项
|
||||
|
||||
左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 日期范围和时间范围选择
|
||||
|
||||
在两个选择器中分别选择日期范围和时间范围。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
style="width:220px">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="daterange"
|
||||
placeholder="选择日期范围"
|
||||
style="width:220px">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
## 环比时间
|
||||
选择两个时间作为限制条件，以得到统计量在这两个时间段的环比数据。
|
||||
|
||||
### 周环比
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="week"
|
||||
placeholder="选择开始周">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="week"
|
||||
placeholder="选择结束周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="week"
|
||||
placeholder="选择开始周">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="week"
|
||||
placeholder="选择结束周">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 月环比
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择开始月">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择结束月">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择开始月">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="month"
|
||||
placeholder="选择结束月">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
### 年环比
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择开始年">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择结束年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择开始年">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
type="year"
|
||||
placeholder="选择结束年">
|
||||
</el-date-picker>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 绑定值，需双向绑定 | String | | |
|
||||
| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
|
||||
| type | 显示类型 | String | year, month, date, datetime, week | date |
|
||||
| readonly | 只读 | Boolean | | false |
|
||||
| placeholder | 占位内容 | String | | |
|
||||
| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
|
||||
|
||||
|
||||
### shortcuts
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | 标题 | String | | |
|
||||
| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
待补充
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
dialogVisible: false,
|
||||
dialogTinyVisible: false,
|
||||
dialogFullVisible: false,
|
||||
dialogStubbornVisible: false,
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-dialog {
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.full-image {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible">
|
||||
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible">
|
||||
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
## 设置尺寸
|
||||
|
||||
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
|
||||
<span>这是一段内容</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogTinyVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
|
||||
<span>这是一段内容</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogTinyVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
|
||||
<img src="http://placekitten.com/1920/1280" class="full-image">
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
|
||||
<img src="http://placekitten.com/1920/1280">
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
## 设置能否通过点击modal或按下esc关闭dialog
|
||||
|
||||
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
|
||||
|
||||
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
## 自定义内容
|
||||
|
||||
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<div class="demo-box demo-dialog">
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :models="form" v-ref:form>
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input :model.sync="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
|
||||
|
||||
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
|
||||
<el-form :models="form" v-ref:form>
|
||||
<el-form-item label="活动名称" :label-width="formLabelWidth">
|
||||
<el-input :model.sync="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" :label-width="formLabelWidth">
|
||||
<el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | dialog 的标题 | string | | |
|
||||
| size | dialog 的大小 | string | 'tiny', 'small', 'large', 'full' | 'small' |
|
||||
| customClass | dialog 的自定义类名 | string | | |
|
||||
| closeOnClickModal | 是否可以通过点击 modal 关闭 dialog | boolean | | true |
|
||||
| closeOnPressEscape | 是否可以通过按下 esc 关闭 dialog | boolean | | true |
|
||||
|
||||
## Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| - | dialog 的内容 |
|
||||
| footer | dialog 按钮操作区的内容 |
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
|
||||
& .el-button-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleMainClick() {
|
||||
alert('click main button');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## 基础用法
|
||||
|
||||
<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p>
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## 不带独立按钮的下拉菜单
|
||||
|
||||
可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。
|
||||
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## 通过点击触发下拉
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="主要按钮" type="primary" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四 哈哈哈哈</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## 文字类型下拉菜单
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<li class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## 尺寸
|
||||
|
||||
<div class="demo-box">
|
||||
<el-dropdown text="下拉菜单" type="primary" size="large">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<li class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown><el-dropdown text="下拉菜单" type="primary">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="small">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="mini">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-dropdown text="下拉菜单" type="primary" size="large">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| text | 菜单按钮文本 | string | | |
|
||||
| type | 菜单按钮类型，同 button | string | | |
|
||||
| trigger | 触发下拉菜单的方式 | string | hover,click | hover |
|
||||
| icon-separate | 独立的下拉菜单按钮 | boolean | true, false | false |
|
||||
| size | 菜单按钮尺寸，同 button | string | large, small, mini | |
|
||||
| menu-align | 菜单水平对齐方向 | string | start, end | end |
|
||||
|
|
@ -0,0 +1,949 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
},
|
||||
formStacked: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: '',
|
||||
remark: ''
|
||||
},
|
||||
formAlignLeft: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: '',
|
||||
remark: ''
|
||||
},
|
||||
ruleForm: {
|
||||
sex: '',
|
||||
user1: '',
|
||||
user2: '',
|
||||
age: '',
|
||||
region: [],
|
||||
desc: '',
|
||||
mail: ''
|
||||
},
|
||||
formNoLabel: {
|
||||
username: '',
|
||||
pass: '',
|
||||
rememberPss: false
|
||||
},
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
options: [
|
||||
],
|
||||
rules: {
|
||||
user1: [
|
||||
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
user2: [
|
||||
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ type: 'number', required: true, message: '请输入年龄', trigger: 'blur' },
|
||||
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
],
|
||||
sex: [
|
||||
{ required: true, message: '请选择性别' }
|
||||
],
|
||||
region: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请填写个人简介', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ validator: this.validaePass }
|
||||
],
|
||||
checkPass: [
|
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
||||
{ validator: this.validaePass2 }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: 'blur' },
|
||||
{ validator: this.checkAge, trigger: 'change' }
|
||||
]
|
||||
},
|
||||
dynamicForm: {
|
||||
domains: [''],
|
||||
email: ''
|
||||
},
|
||||
dynamicRule: {
|
||||
domains: {
|
||||
type: '域名不能',
|
||||
required: true
|
||||
},
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSubmit2(ev) {
|
||||
this.$refs.ruleForm2.validate(valid => {
|
||||
if (valid) {
|
||||
alert('申请已提交');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSubmit3(ev) {
|
||||
this.$refs.dynamicForm.validate(valid => {
|
||||
if (valid) {
|
||||
alert('申请已提交');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.ruleForm.resetForm();
|
||||
},
|
||||
handleReset2() {
|
||||
this.$refs.ruleForm2.resetForm();
|
||||
},
|
||||
checkAge(rule, value, callback) {
|
||||
var age = parseInt(value, 10);
|
||||
// debugger;
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(age)) {
|
||||
callback(new Error('请输入数字值'));
|
||||
} else{
|
||||
if (age < 18) {
|
||||
callback(new Error('必须年满18岁'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
validaePass(rule, value, callback) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
},
|
||||
validaePass2(rule, value, callback) {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
handleValidate(prop, errorMsg) {
|
||||
console.log(prop, errorMsg);
|
||||
},
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
},
|
||||
onRuleFormSubmit() {
|
||||
console.log('onRuleFormSubmit');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-form {
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
width: 320px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:after,&:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-right: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
+ .el-checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-picker + .el-date-picker {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.demo-form-normal {
|
||||
width: 440px;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.demo-ruleForm {
|
||||
width: 440px;
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
|
||||
Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
|
||||
|
||||
<div class="demo-box demo-form demo-form-normal">
|
||||
<el-form v-ref:form @submit.prevent="onSubmit" label-width="80px">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input :value.sync="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="配送时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="蜂鸟配送">
|
||||
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group :value.sync="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio>
|
||||
<el-radio :value.sync="form.resource" label="线下场地免费"></el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" :value.sync="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button @click.prevent>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form v-ref:form @submit.prevent="onSubmit" label-width="80px">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input :value.sync="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="配送时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="蜂鸟配送">
|
||||
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group :value.sync="form.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio>
|
||||
<el-radio :value.sync="form.resource" label="线下场地免费"></el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" :value.sync="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button @click.prevent>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Inline Form
|
||||
|
||||
<div class="demo-box demo-form demo-form-inline">
|
||||
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formInline.user" placeholder="审批人"></el-input>
|
||||
</el-form-item><el-form-item>
|
||||
<el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item><el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formInline.user" placeholder="审批人"></el-input>
|
||||
</el-form-item><el-form-item>
|
||||
<el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item><el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Stacked Form
|
||||
|
||||
<div class="demo-box demo-form demo-form-stacked">
|
||||
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
|
||||
<el-form-item label="名称">
|
||||
<el-input :value.sync="formStacked.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动展开形式">
|
||||
<el-input :value.sync="formStacked.type"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input :value.sync="formStacked.remark"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button @click.prevent>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
|
||||
<el-form-item label="名称">
|
||||
<el-input :value.sync="formStacked.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动展开形式">
|
||||
<el-input :value.sync="formStacked.type"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input :value.sync="formStacked.remark"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button @click.prevent>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formStacked: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: '',
|
||||
remark: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 标签左对齐
|
||||
|
||||
<div class="demo-box demo-form">
|
||||
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
|
||||
<el-form-item label="名称">
|
||||
<el-input :value.sync="formAlignLeft.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="推广地">
|
||||
<el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input :value.sync="formAlignLeft.type"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
|
||||
<el-form-item label="名称">
|
||||
<el-input :value.sync="formAlignLeft.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="推广地">
|
||||
<el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input :value.sync="formAlignLeft.type"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formAlignLeft: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 无标签
|
||||
|
||||
<div class="demo-box demo-form">
|
||||
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="fr">登录</el-button>
|
||||
<el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="fr">登录</el-button>
|
||||
<el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formNoLabel: {
|
||||
username: '',
|
||||
pass: '',
|
||||
rememberPss: false
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 表单验证
|
||||
|
||||
<div class="demo-box demo-form demo-ruleForm">
|
||||
<el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px">
|
||||
<el-form-item label="用户名" :required="true">
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="user1">
|
||||
<el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2"><div class="line">-</div></el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="user2">
|
||||
<el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input :value.sync="ruleForm.age" :number="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="mail">
|
||||
<el-input :value.sync="ruleForm.mail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group :value.sync="ruleForm.sex">
|
||||
<el-radio label="男" name="sex"></el-radio>
|
||||
<el-radio label="女" name="sex"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="desc">
|
||||
<el-input type="textarea" :value.sync="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地区" prop="region" placeholder="请选择地区">
|
||||
<el-checkbox-group :value.sync="ruleForm.region">
|
||||
<el-checkbox label="BeiJing" name="region"></el-checkbox>
|
||||
<el-checkbox label="ShangHai" name="region"></el-checkbox>
|
||||
<el-checkbox label="ShenZhen" name="region"></el-checkbox>
|
||||
<el-checkbox label="GuangZhou" name="region"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
|
||||
<el-button @click.prevent="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px">
|
||||
<el-form-item label="用户名" :required="true">
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="user1">
|
||||
<el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2"><div class="line">-</div></el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="user2">
|
||||
<el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input :value.sync="ruleForm.age" :number="true"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="mail">
|
||||
<el-input :value.sync="ruleForm.mail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group :value.sync="ruleForm.sex">
|
||||
<el-radio label="男" name="sex"></el-radio>
|
||||
<el-radio label="女" name="sex"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="简介" prop="desc">
|
||||
<el-input type="textarea" :value.sync="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地区" prop="region" placeholder="请选择地区">
|
||||
<el-checkbox-group :value.sync="ruleForm.region">
|
||||
<el-checkbox label="BeiJing" name="region"></el-checkbox>
|
||||
<el-checkbox label="ShangHai" name="region"></el-checkbox>
|
||||
<el-checkbox label="ShenZhen" name="region"></el-checkbox>
|
||||
<el-checkbox label="GuangZhou" name="region"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
|
||||
<el-button @click.prevent="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
sex: '',
|
||||
user1: '',
|
||||
user2: '',
|
||||
age: '',
|
||||
region: [],
|
||||
desc: '',
|
||||
mail: ''
|
||||
},
|
||||
rules: {
|
||||
user1: [
|
||||
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
user2: [
|
||||
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
],
|
||||
sex: [
|
||||
{ required: true, message: '请选择性别' }
|
||||
],
|
||||
region: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请填写个人简介', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 自定义校验规则
|
||||
|
||||
<div class="demo-box demo-form demo-ruleForm">
|
||||
<el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px">
|
||||
<el-form-item label="密码" prop="pass">
|
||||
<el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input :value.sync="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit2">提交</el-button>
|
||||
<el-button @click.prevent="handleReset2">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px">
|
||||
<el-form-item label="密码" prop="pass">
|
||||
<el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input :value.sync="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit2">提交</el-button>
|
||||
<el-button @click.prevent="handleReset2">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ validator: this.validaePass }
|
||||
],
|
||||
checkPass: [
|
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
||||
{ validator: this.validaePass2 }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: '请填写年龄', trigger: 'blur' },
|
||||
{ validator: this.checkAge, trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 动态增减表单项
|
||||
|
||||
<div class="demo-box demo-form demo-dynamic">
|
||||
<el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px">
|
||||
<el-form-item prop="email" label="邮箱">
|
||||
<el-input :value.sync="dynamicForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="domain in dynamicForm.domains"
|
||||
:label="'域名' + $index"
|
||||
track-by="$index"
|
||||
:prop="'domains:' + $index"
|
||||
:rules="{ required: true, message: '域名不能为空', trigger: 'blur' }">
|
||||
<el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit3">提交</el-button>
|
||||
<el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px">
|
||||
<el-form-item prop="email" label="邮箱">
|
||||
<el-input :value.sync="dynamicForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="domain in dynamicForm.domains"
|
||||
:label="'域名' + $index"
|
||||
track-by="$index"
|
||||
:prop="'domains:' + $index"
|
||||
:rules="{ required: true, message: '域名不能为空', trigger: 'blur' }">
|
||||
<el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="handleSubmit3">提交</el-button>
|
||||
<el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicForm: {
|
||||
domains: [''],
|
||||
email: ''
|
||||
},
|
||||
dynamicRule: {
|
||||
domains: {
|
||||
type: '域名不能',
|
||||
required: true
|
||||
},
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit3(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## el-form API
|
||||
### 组件属性和事件
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model | 表单数据对象 | object | | |
|
||||
| rules | 表单验证规则 | object | | |
|
||||
| type | 表单类型 | string | stacked, inline, horizontal | horizontal |
|
||||
| label-align | 表单域标签的水平对齐位置 | string | right,left | right |
|
||||
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | | |
|
||||
| label-suffix | 表单域标签的后缀 | string | | |
|
||||
|
||||
### el-form 实例属性和方法
|
||||
|
||||
| 方法名 | 说明 | 类型 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------- |
|
||||
| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | |
|
||||
| validateField(prop, cb) | 对部分表单字段进行校验的方法 | | |
|
||||
| resetForm | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | |
|
||||
|
||||
## el-form-item API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| prop | 表单域model字段 | string | 传入父级 v-form 的 model 中的所有属性 | |
|
||||
| label | 标签文本 | string | | |
|
||||
| label-width | 表单域标签的的宽度，例如 '50px' | string | | |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | | false |
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<section class="guideline no-toc">
|
||||
<h2>选择合适的导航</h2>
|
||||
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
|
||||
|
||||
<h3>侧栏导航：</h3>
|
||||
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>一级类目</td>
|
||||
<td>
|
||||
<lightbox :visible.sync="showIndexDialog1">
|
||||
<img src="~examples/assets/images/guide1.png" alt="一级类目">
|
||||
</lightbox>
|
||||
<img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
|
||||
<p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>二级类目</td>
|
||||
<td>
|
||||
<lightbox :visible.sync="showIndexDialog2">
|
||||
<img src="~examples/assets/images/guide2.png" alt="二级类目">
|
||||
</lightbox>
|
||||
<img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
|
||||
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>三级类目</td>
|
||||
<td>
|
||||
<lightbox :visible.sync="showIndexDialog3">
|
||||
<img src="~examples/assets/images/guide3.png" alt="三级类目">
|
||||
</lightbox>
|
||||
<img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
|
||||
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>顶部导航：</h3>
|
||||
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>一级类目</td>
|
||||
<td>
|
||||
<lightbox :visible.sync="showIndexDialog4">
|
||||
<img src="~examples/assets/images/guide4.png" alt="一级类目">
|
||||
</lightbox>
|
||||
<img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
|
||||
<p>适用于导航较少，页面篇幅较长的网站；</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import Lightbox from 'examples/components/lightbox';
|
||||
|
||||
module.exports = {
|
||||
name: 'guideline',
|
||||
|
||||
components: {
|
||||
Lightbox
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showIndexDialog1: false,
|
||||
showIndexDialog2: false,
|
||||
showIndexDialog3: false,
|
||||
showIndexDialog4: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.guideline {
|
||||
img {
|
||||
width: 500px;
|
||||
display: block;
|
||||
margin-bottom: 19px;
|
||||
box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: #f8f8f8;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 36px;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
background-color: #f3f3f3;
|
||||
width: 21%;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# 组件说明文档
|
||||
|
||||
<script>
|
||||
import { addClass } from 'examples/dom/class.js';
|
||||
|
||||
module.exports = {
|
||||
ready() {
|
||||
addClass(this.$el.parentNode, 'no-toc')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script>
|
||||
var iconList = require('examples/icon.json');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: iconList
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.icon-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.icon-list li {
|
||||
float: left;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
transition: color .15s linear;
|
||||
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
@utils-vertical-center;
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
& i {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(92, 182, 255);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## icon-font 图标
|
||||
|
||||
我们为你提供了一套常用的图标集合。
|
||||
|
||||
## 使用方法
|
||||
|
||||
直接通过`el-icon-iconName`的类名来使用即可。例如：
|
||||
|
||||
<div><i class="el-icon-search"></i></div>
|
||||
|
||||
```html
|
||||
<i class="el-icon-search"></i>
|
||||
```
|
||||
|
||||
也可以在按钮组件中使用图标:
|
||||
|
||||
<div><el-button type="primary" icon="search">搜索</el-button></div>
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="search">搜索</el-button>
|
||||
```
|
||||
|
||||
## 图标集合
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-input-number {
|
||||
.el-input-number + .el-input-number {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number :value.sync="num1"></el-input-number>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-number :value.sync="num1"></el-input-number>
|
||||
```
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
|
||||
```
|
||||
|
||||
## 步数
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number :value.sync="num2" :step="2"></el-input-number>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-number :value.sync="num2" :step="2"></el-input-number>
|
||||
```
|
||||
|
||||
## 尺寸
|
||||
|
||||
<div class="demo-box demo-input-number">
|
||||
<el-input-number :value.sync="num1" size="large"></el-input-number>
|
||||
<el-input-number :value.sync="num1"></el-input-number>
|
||||
<el-input-number :value.sync="num1" size="small"></el-input-number>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-number :value.sync="num1" size="large"></el-input-number>
|
||||
<el-input-number :value.sync="num1"></el-input-number>
|
||||
<el-input-number :value.sync="num1" size="small"></el-input-number>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
| model | 绑定值 | number | | |
|
||||
| step | 步数 | number | | 1 |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
| disabled | 是否禁用 | boolean | true, false | false |
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
textarea: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-input {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
|
||||
& + .el-input,
|
||||
& + .el-textarea {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.el-textarea {
|
||||
width: 414px;
|
||||
}
|
||||
.el-input-group + .el-input-group {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input"
|
||||
name="user">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="textarea"
|
||||
name="desc"
|
||||
type="textarea">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input"
|
||||
name="user">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="textarea"
|
||||
name="desc"
|
||||
type="textarea">
|
||||
</el-input>
|
||||
```
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
:disabled="true"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input
|
||||
:disabled="true"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
```
|
||||
|
||||
<!-- ## readonly 状态
|
||||
|
||||
<el-input
|
||||
:readonly="true"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
|
||||
```html
|
||||
<el-input
|
||||
:readonly="true"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
``` -->
|
||||
|
||||
## Input 图标
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
icon="time"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
icon="time"
|
||||
:value.sync="input1">
|
||||
</el-input>
|
||||
```
|
||||
|
||||
## Input Group
|
||||
|
||||
前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
|
||||
|
||||
### 后置元素
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input-group>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input2">
|
||||
</el-input>
|
||||
<span class="el-input-group__label" slot="append">.com</span>
|
||||
</el-input-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-group>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input2">
|
||||
</el-input>
|
||||
<span class="el-input-group__label" slot="append">.com</span>
|
||||
</el-input-group>
|
||||
```
|
||||
|
||||
### 前置元素
|
||||
<div class="demo-box demo-input">
|
||||
<el-input-group>
|
||||
<el-button slot="prepend" type="text">按钮</el-button>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input2">
|
||||
</el-input>
|
||||
</el-input-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-group>
|
||||
<el-button slot="prepend" type="text">按钮</el-button>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input2">
|
||||
</el-input>
|
||||
</el-input-group>
|
||||
```
|
||||
|
||||
### 前置和后置元素
|
||||
<div class="demo-box demo-input">
|
||||
<el-input-group>
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
|
||||
<li>选项一</li>
|
||||
<li>选项二</li>
|
||||
<li>选项三</li>
|
||||
<li class="divider">选项四</li>
|
||||
</el-dropdown>
|
||||
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
|
||||
<el-button type="text" slot="append">搜索</el-button>
|
||||
</el-input-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input-group>
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
|
||||
<li>选项一</li>
|
||||
<li>选项二</li>
|
||||
<li>选项三</li>
|
||||
<li class="divider">选项四</li>
|
||||
</el-dropdown>
|
||||
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
|
||||
<el-button type="text" slot="append">搜索</el-button>
|
||||
</el-input-group>
|
||||
```
|
||||
|
||||
## 尺寸
|
||||
### large
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
size="large"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
### normal
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
### small
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
### mini
|
||||
|
||||
<div class="demo-box demo-input">
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-input
|
||||
size="large"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
:value.sync="input4">
|
||||
</el-input>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | 同原生的 input 的 type 属性，如果为textarea则显示为extarea | string | | |
|
||||
| name | 同原生的 input 的 name 属性 | string | | |
|
||||
| model | 绑定值 | string, number | | |
|
||||
| maxlength | 最大输入长度 | number | | |
|
||||
| minlength | 最小输入长度 | number | | |
|
||||
| placeholder | 输入框占位文本 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| readonly | 禁用 | boolean | true, false | false |
|
||||
| size | 输入框尺寸 | string | large, small, mini | |
|
||||
| icon | 输入框尾部图标 | string | | |
|
||||
| number | 指定model值为number类型 | boolean | | false |
|
||||
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<style>
|
||||
.el-loading-demo {
|
||||
border: solid 1px #999;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
color: #999;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loading2: false,
|
||||
fullscreenLoading: false,
|
||||
tableLoading: false,
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadTable() {
|
||||
this.tableLoading = true;
|
||||
setTimeout(() => {
|
||||
this.tableLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading="loading" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="loading = !loading">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading="loading" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 修饰符
|
||||
|
||||
loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上
|
||||
|
||||
<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-button :plain="true" v-on:click="loading2 = !loading2">打开 / 关闭 loading</el-button>
|
||||
|
||||
<div v-loading.body="loading2" class="el-loading-demo">
|
||||
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
|
||||
|
||||
<el-button :plain="true" v-on:click="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
:plain="true"
|
||||
v-on:click="openFullScreen"
|
||||
v-loading.fullscreen="fullscreenLoading">
|
||||
打开全屏 loading
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
<style>
|
||||
.demo-box .nav {
|
||||
background-color: #eff2f7;
|
||||
line-height: 60px;
|
||||
@utils-clearfix;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
color: #1f2f3d;
|
||||
float: left;
|
||||
margin: 0 25px 0 20px;
|
||||
}
|
||||
> .el-menu {
|
||||
float: left;
|
||||
}
|
||||
&-right {
|
||||
float: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.nav__button {
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #8492a6;
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-unread:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -4px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff4949;
|
||||
}
|
||||
}
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: #e5e9f2;
|
||||
border-color: #d3dce6;
|
||||
|
||||
&:focus {
|
||||
border-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dark {
|
||||
background-color: #324057;
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav__button {
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: #1f2d3d;
|
||||
border-color: #1f2d3d;
|
||||
color: #fff;
|
||||
|
||||
&:focus {
|
||||
border-color: #1f2d3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-box .nav-vertical {
|
||||
h1 {
|
||||
float: none;
|
||||
}
|
||||
.el-menu--vertical {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
search2: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleopen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleclose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleselect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## 基础用法
|
||||
|
||||
<div class="demo-box">
|
||||
<div class="nav">
|
||||
<h1>Element</h1>
|
||||
<el-menu active-key="2">
|
||||
<el-menu-item key="1">处理中心</el-menu-item>
|
||||
<el-menu-item key="2">我的工作台</el-menu-item>
|
||||
<el-menu-item key="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="nav-right">
|
||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
|
||||
<span class="nav__button is-unread">
|
||||
<i class="el-icon-message"></i>
|
||||
</span>
|
||||
<span class="nav__button">
|
||||
<i class="el-icon-setting"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="nav">
|
||||
<h1>Element</h1>
|
||||
<el-menu active-key="1">
|
||||
<el-menu-item key="1">处理中心</el-menu-item>
|
||||
<el-menu-item key="2">我的工作台</el-menu-item>
|
||||
<el-menu-item key="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="nav-right">
|
||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
|
||||
<span class="nav__button is-unread">
|
||||
<i class="el-icon-message"></i>
|
||||
</span>
|
||||
<span class="nav__button">
|
||||
<i class="el-icon-setting"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="demo-box">
|
||||
<div class="nav nav-dark">
|
||||
<h1>Element</h1>
|
||||
<el-menu theme="dark" active-key="1">
|
||||
<el-menu-item key="1">处理中心</el-menu-item>
|
||||
<el-menu-item key="2">我的工作台</el-menu-item>
|
||||
<el-menu-item key="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="nav-right">
|
||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
|
||||
<span class="nav__button is-unread">
|
||||
<i class="el-icon-message"></i>
|
||||
</span>
|
||||
<span class="nav__button">
|
||||
<i class="el-icon-setting"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="nav nav-dark">
|
||||
<h1>Element</h1>
|
||||
<el-menu theme="dark" active-key="1">
|
||||
<el-menu-item key="1">处理中心</el-menu-item>
|
||||
<el-menu-item key="2">我的工作台</el-menu-item>
|
||||
<el-menu-item key="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="nav-right">
|
||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
|
||||
<span class="nav__button is-unread">
|
||||
<i class="el-icon-message"></i>
|
||||
</span>
|
||||
<span class="nav__button">
|
||||
<i class="el-icon-setting"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 侧边栏导航
|
||||
|
||||
<div class="demo-box" style="width: 200px;">
|
||||
<div class="nav nav-vertical">
|
||||
<h1>Element</h1>
|
||||
<el-menu mode="vertical" active-key="2-1">
|
||||
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
|
||||
<el-submenu key="sub1">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item key="2-1">选项1</el-menu-item>
|
||||
<el-menu-item key="2-2">选项2</el-menu-item>
|
||||
<el-menu-item key="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub2">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item key="3-1">选项1</el-menu-item>
|
||||
<el-menu-item key="3-2">选项2</el-menu-item>
|
||||
<el-menu-item key="3-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="nav nav-vertical">
|
||||
<h1>Element</h1>
|
||||
<el-menu mode="vertical" active-key="2-1">
|
||||
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
|
||||
<el-submenu key="sub1">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item key="2-1">选项1</el-menu-item>
|
||||
<el-menu-item key="2-2">选项2</el-menu-item>
|
||||
<el-menu-item key="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub2">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item key="3-1">选项1</el-menu-item>
|
||||
<el-menu-item key="3-2">选项2</el-menu-item>
|
||||
<el-menu-item key="3-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="demo-box" style="width: 200px;">
|
||||
<div class="nav nav-vertical nav-dark">
|
||||
<h1>Element</h1>
|
||||
<el-menu mode="vertical" theme="dark" :opened-keys="['sub3']" active-key="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
|
||||
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
|
||||
<el-submenu key="sub2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item key="2-1">选项1</el-menu-item>
|
||||
<el-menu-item key="2-2">选项2</el-menu-item>
|
||||
<el-menu-item key="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item key="3-1">选项1</el-menu-item>
|
||||
<el-menu-item key="3-2">选项2</el-menu-item>
|
||||
<el-menu-item key="3-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub4">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航四</template>
|
||||
<el-menu-item key="4-1">选项1</el-menu-item>
|
||||
<el-menu-item key="4-2">选项2</el-menu-item>
|
||||
<el-menu-item key="4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub5">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航五</template>
|
||||
<el-menu-item key="5-1">选项1</el-menu-item>
|
||||
<el-menu-item key="5-2">选项2</el-menu-item>
|
||||
<el-menu-item key="5-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="nav nav-vertical nav-dark">
|
||||
<h1>Element</h1>
|
||||
<el-menu mode="vertical" theme="dark" active-key="3-1">
|
||||
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item>
|
||||
<el-submenu key="sub1">
|
||||
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
||||
<el-menu-item key="2-1">选项1</el-menu-item>
|
||||
<el-menu-item key="2-2">选项2</el-menu-item>
|
||||
<el-menu-item key="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu key="sub2">
|
||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
||||
<el-menu-item key="3-1">选项1</el-menu-item>
|
||||
<el-menu-item key="3-2">选项2</el-menu-item>
|
||||
<el-menu-item key="3-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
```
|
||||
|
||||
## menu API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | 模式 | string | horizontal,vertical | horizontal |
|
||||
| theme | 主题色 | string | light,dark | light |
|
||||
| activeKey | 当前激活菜单的 key | string | | |
|
||||
| openedKeys | 当前打开的submenu的 key 数组 | Array | | |
|
||||
| uniqueOpend | 是否只保持一个子菜单的展开 | boolean | true, false | false |
|
||||
| router | 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 | boolean | true, false | false |
|
||||
| select | 菜单激活回调 | function(key, keyPath) | | |
|
||||
| open | SubMenu 展开的回调 | function(key, keyPath) | | |
|
||||
| close | SubMenu 收起的回调 | function(key, keyPath) | | |
|
||||
|
||||
## submenu API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| key | 唯一标志 | string | | |
|
||||
|
||||
## menu-item API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| key | 唯一标志 | string | | |
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$alert('操作失败, 请稍后重试', '提示', {
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$msgbox({
|
||||
message: '删除成功!',
|
||||
type: 'success'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$msgbox({
|
||||
message: '已取消删除',
|
||||
type: 'info'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$prompt('请输入邮箱', '提示', {
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: '邮箱格式不正确'
|
||||
}).then(({ value, action }) => {
|
||||
console.log('action: ', action);
|
||||
this.$msgbox('', '你的邮箱是: ' + value);
|
||||
}).catch(() => {
|
||||
this.$msgbox('', '取消输入');
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
open5() {
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
|
||||
showCancelButton: true
|
||||
}).then(action => {
|
||||
this.$msgbox('', 'action: ' + action);
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
|
||||
showCancelButton: true,
|
||||
showClose: false,
|
||||
confirmButtonText: '知道了',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
<el-button @click="open">打开 Alert</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 返回 Promise
|
||||
|
||||
<el-button @click="open2">打开 alert</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open4">打开 alert</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$alert('操作失败, 请稍后重试', '提示', {
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<el-button @click="open3">打开 confirm</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open5">打开 confirm</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$alert('删除成功!',{
|
||||
type: 'success'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$alert('已取消删除', {
|
||||
type: 'info'
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
<el-button @click="open4">打开 prompt</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open6">打开 prompt</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
this.$prompt('请输入邮箱', '提示', {
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: '邮箱格式不正确'
|
||||
}).then(value => {
|
||||
this.$alert('你的邮箱是: ' + value);
|
||||
}).catch(() => {
|
||||
this.$alert('取消输入');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<el-button @click="open5">打开 Message Box</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open3">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
|
||||
showCancelButton: true
|
||||
}).then(action => {
|
||||
this.$alert('action: ' + action);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 更多配置项
|
||||
|
||||
<el-button @click="open6">打开 Message Box</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open2">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
this.$msgbox({
|
||||
title: '消息',
|
||||
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '知道了',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 全局方法
|
||||
|
||||
element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
|
||||
|
||||
## 单独引用
|
||||
|
||||
单独引入 `MessageBox`：
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
```
|
||||
|
||||
对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题 | string | | |
|
||||
| message | 消息内容 | string | | |
|
||||
| type | 消息类型 | string | 'success', 'info', 'warning', 'error' | |
|
||||
| showCancelButton | 是否显示取消按钮 | boolean | | false（以 confirm 和 prompt 方式调用时为 true） |
|
||||
| showConfirmButton | 是否显示确定按钮 | boolean | | true |
|
||||
| cancelButtonText | 取消按钮的文本内容 | string | | '取消' |
|
||||
| confirmButtonText | 确定按钮的文本内容 | string | | '确定' |
|
||||
| cancelButtonClass | 取消按钮的自定义类名 | string | | |
|
||||
| confirmButtonClass | 确定按钮的自定义类名 | string | | |
|
||||
| showInput | 是否显示输入框 | boolean | | false（以 prompt 方式调用时为 true）|
|
||||
| inputValue | 输入框的值 | string | | |
|
||||
| inputPlaceholder | 输入框的占位符 | string | | |
|
||||
| inputPattern | 输入框的校验表达式 | regexp | | |
|
||||
| inputValidator | 输入框的校验函数。若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | | |
|
||||
| inputErrorMessage | 校验未通过时的提示文本 | string | | '输入的数据不合法!' |
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息',
|
||||
type: 'info'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条带有回调函数的消息',
|
||||
onClose: this.onClose
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification 已关闭');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-notification {
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: '标题名称',
|
||||
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 带有 icon
|
||||
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click="open5">错误</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open2">成功</el-button>
|
||||
<el-button :plain="true" v-on:click="open3">警告</el-button>
|
||||
<el-button :plain="true" v-on:click="open4">消息</el-button>
|
||||
<el-button :plain="true" v-on:click="open5">错误</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '这是一条成功的提示消息',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: '警告',
|
||||
message: '这是一条警告的提示消息',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: '消息',
|
||||
message: '这是一条消息的提示消息',
|
||||
type: 'info'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify({
|
||||
title: '错误',
|
||||
message: '这是一条错误的提示消息',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 不会自动关闭
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条不会自动关闭的消息',
|
||||
duration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 回调函数
|
||||
<div class="demo-box demo-notification">
|
||||
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: '这是一条带有回调函数的消息',
|
||||
onClose: this.onClose
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification 已关闭');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 全局方法
|
||||
|
||||
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
|
||||
|
||||
## 单独引用
|
||||
|
||||
单独引入 `Notification`：
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
```
|
||||
|
||||
此时调用方法为 `Notification(options)`。
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | 标题 | string | | |
|
||||
| message | 说明文字 | string | | |
|
||||
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
|
||||
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
|
||||
| onClose | 关闭时的回调函数 | function | | |
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
## 基础用法
|
||||
适用广泛的基础用法。
|
||||
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
|
||||
```html
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
|
||||
## 小型分页
|
||||
在空间有限的情况下，可以使用简单的小型分页。
|
||||
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
|
||||
## 复杂分页
|
||||
能够承载复杂交互的分页，显示更多页码。
|
||||
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
|
||||
```html
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
```
|
||||
|
||||
## 附加功能
|
||||
在复杂分页的基础上，根据场景需要，可以添加其他功能模块。
|
||||
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="sizes, prev, pager, next, jumper, total"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
|
||||
```html
|
||||
<el-pagination
|
||||
layout="sizes, prev, pager, next, jumper, total"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
```
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | 小型分页样式 | Boolean | | false |
|
||||
| page-size | 每页个数 | Number | | 10 |
|
||||
| total | 总个数 | Number | | 0 |
|
||||
| current-page | 当前页数 | Number | | 0|
|
||||
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' |
|
||||
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] |
|
||||
| size-change | pageSize 改变时会触发的事件 | Function | | |
|
||||
| current-change | currentPage 改变时会触发的事件 | Function | | |
|
||||
|
||||
|
|
@ -0,0 +1,273 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
gridData2: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$positive: true
|
||||
}],
|
||||
gridData3: [{
|
||||
tag: '家',
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '家',
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '家',
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: []
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
singleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
},
|
||||
|
||||
multipleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
handleClick(row) {
|
||||
console.log('you clicked ', row);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础用法
|
||||
可选择提示出现的位置。
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
v-ref:popover1
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
v-ref:popover2
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
v-ref:popover3
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>hover 激活</el-button>
|
||||
<el-button v-popover:popover2>click 激活</el-button>
|
||||
|
||||
<el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input>
|
||||
</div>
|
||||
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
v-ref:popover1
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
v-ref:popover2
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
v-ref:popover3
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段容,这是一段容,这是一段容,这是一段容。">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>hover 激活</el-button>
|
||||
<el-button v-popover:popover2>click 激活</el-button>
|
||||
<el-button v-popover:popover3>focus 激活</el-button>
|
||||
```
|
||||
|
||||
## 嵌套信息
|
||||
可以嵌套表格等多种信息。
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
v-ref:popover4
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
v-ref:popover4
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="日期"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="姓名"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>click 激活</el-button>
|
||||
```
|
||||
|
||||
|
||||
## 嵌套操作
|
||||
常用于确认操作中,比 Dialog 更加轻量。
|
||||
|
||||
<div class="demo-box demo-popover">
|
||||
<el-popover
|
||||
v-ref:popover5
|
||||
placement="top"
|
||||
width="160"
|
||||
:visible.sync="visible2">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
v-ref:popover5
|
||||
placement="top"
|
||||
width="160"
|
||||
:visible.sync="visible2">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>删除</el-button>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
|
||||
| title | 标题 | String | | |
|
||||
| content | 显示的内容 | String | | |
|
||||
| width | 宽度 | String, Number | | 最小宽度 150px |
|
||||
| placement | 出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom |
|
||||
| visible | 初始状态是否可见 | Boolean | | false |
|
||||
| offset | 出现位置的偏移量 | Number, String | | 0 |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
|
||||
|
||||
## Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| - | 触发 popover 显示的元素|
|
||||
| content | 显示的 HTML 内容 |
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<style>
|
||||
.demo-box.demo-progress {
|
||||
.el-progress {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
|
||||
一个基础的进度条
|
||||
|
||||
<div class="demo-box demo-progress">
|
||||
<el-progress :percentage="50" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green" size="large"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="50" type="green"></el-progress>
|
||||
<el-progress :percentage="50" size="small"></el-progress>
|
||||
<el-progress :percentage="50" type="green" size="small"></el-progress>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-progress :percentage="50" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green" size="large"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="50" type="green"></el-progress>
|
||||
<el-progress :percentage="50" size="small"></el-progress>
|
||||
<el-progress :percentage="50" type="green" size="small"></el-progress>
|
||||
```
|
||||
|
||||
## 带条纹效果
|
||||
|
||||
<div class="demo-box demo-progress">
|
||||
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||||
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| percentage | 百分比 | number | | 0 |
|
||||
| type | 类型 | string | blue,green,blue-stripe,green-stripe | blue |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
element 是为饿了么定制的一套 Vue.js 后台组件库。帮助你更轻松更快速的开发后台项目。
|
||||
|
||||
-------------
|
||||
|
||||
## 安装
|
||||
|
||||
待补充
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
radio: '',
|
||||
radio1: '选中且禁用',
|
||||
radio2: 3,
|
||||
radio31: '',
|
||||
radio32: '',
|
||||
radio33: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 A"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 B"></el-radio>
|
||||
<el-radio class="radio" :value.sync="radio" label="单选框 C"></el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: '选中且禁用'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Radio Group
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio-group :value.sync="radio2">
|
||||
<el-radio :label="9"></el-radio>
|
||||
<el-radio :label="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-radio-group :value.sync="radio2">
|
||||
<el-radio :label="9"></el-radio>
|
||||
<el-radio :label="6"></el-radio>
|
||||
<el-radio :label="3"></el-radio>
|
||||
</el-radio-group>
|
||||
```
|
||||
|
||||
## Radio Group Button
|
||||
|
||||
<div class="demo">
|
||||
<el-radio-group :value.sync="radio31" size="large">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<el-radio-group :value.sync="radio32">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<el-radio-group :value.sync="radio33" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-radio-group :value.sync="radio31" size="large">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-radio-group :value.sync="radio32">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-radio-group :value.sync="radio33" size="small">
|
||||
<el-radio-button label="上海"></el-radio-button>
|
||||
<el-radio-button label="北京"></el-radio-button>
|
||||
<el-radio-button label="广州" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="深圳"></el-radio-button>
|
||||
</el-radio-group>
|
||||
```
|
||||
|
||||
## 禁用
|
||||
|
||||
<div class="demo-box demo-radio">
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-radio disabled :value.sync="radio" label="禁用"></el-radio>
|
||||
<el-radio disabled :value.sync="radio1" label="选中且禁用"></el-radio>
|
||||
```
|
||||
|
||||
|
||||
## Radio API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| label | 真实值 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
||||
## Radio Group API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | 绑定值 | string | | |
|
||||
| size | 尺寸 | string | large, small | |
|
||||
|
||||
## Radio Button API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 真实值 | string | | |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
|
|
@ -0,0 +1,779 @@
|
|||
<script>
|
||||
export default {
|
||||
created() {
|
||||
this.template = '<span>label: {{ label }}, value: {{ value }}</span>';
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
options2: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
options3: [{
|
||||
label: '分组1',
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}]
|
||||
}, {
|
||||
label: '分组2',
|
||||
options: [{
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}]
|
||||
}],
|
||||
options4: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}, {
|
||||
value: '选项6',
|
||||
label: '标签6'
|
||||
}, {
|
||||
value: '选项7',
|
||||
label: '标签7'
|
||||
}, {
|
||||
value: '选项8',
|
||||
label: '标签8'
|
||||
}, {
|
||||
value: '选项9',
|
||||
label: '标签9'
|
||||
}, {
|
||||
value: '选项10',
|
||||
label: '标签10'
|
||||
}, {
|
||||
value: '选项11',
|
||||
label: '标签11'
|
||||
}],
|
||||
options5: [],
|
||||
value: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: [],
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; });
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<el-select :value.sync="value">
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<el-select :value.sync="value2" disabled>
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value2" disabled>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 有禁用选项
|
||||
|
||||
<el-select :value.sync="value3">
|
||||
<el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value3">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 可清空单选
|
||||
|
||||
<el-select :value.sync="value4" clearable>
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value4" clearable>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 指定初始被选项
|
||||
|
||||
<el-select :value.sync="value5">
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value" :selected="item.value === '选项2'"></el-option>
|
||||
</el-select>
|
||||
|
||||
要指定 `select` 的初始被选项有两种方法。可以通过指定 `el-option` 的 `selected` 属性:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value5">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:selected="item.value === '选项2'">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value5: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
或者通过为绑定到 `value` 的变量赋予初始值:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value5">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value5: '选项2'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 自定义模板
|
||||
|
||||
<el-select :value.sync="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:template="template">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value6">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:template="optionTemplate">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
cerated () {
|
||||
this.optionTemplate = '<span>label: {{ label }}, value: {{ value }}</span>';
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 多选
|
||||
|
||||
<el-select :value.sync="value7" multiple>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value7" multiple>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value7: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 自定义宽度
|
||||
|
||||
<el-select :value.sync="value8" :width="300" :dropdown-width="350">
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value8" :width="300" :dropdown-width="350">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value8: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 分组
|
||||
|
||||
<el-select :value.sync="value9">
|
||||
<el-option-group v-for="group in options3" :label="group.label">
|
||||
<el-option v-for="item in group.options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value9">
|
||||
<el-option-group v-for="group in options3" :label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
label: '分组1',
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}]
|
||||
}, {
|
||||
label: '分组2',
|
||||
options: [{
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}]
|
||||
}],
|
||||
value9: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 选项较多时的交互
|
||||
|
||||
<el-select :value.sync="value10">
|
||||
<el-option v-for="item in options4" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value10">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}, {
|
||||
value: '选项6',
|
||||
label: '标签6'
|
||||
}, {
|
||||
value: '选项7',
|
||||
label: '标签7'
|
||||
}, {
|
||||
value: '选项8',
|
||||
label: '标签8'
|
||||
}, {
|
||||
value: '选项9',
|
||||
label: '标签9'
|
||||
}, {
|
||||
value: '选项10',
|
||||
label: '标签10'
|
||||
}, {
|
||||
value: '选项11',
|
||||
label: '标签11'
|
||||
}],
|
||||
value10: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 可搜索
|
||||
|
||||
<el-select :value.sync="value11" filterable>
|
||||
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select :value.sync="value11" filterable>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '标签1'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '标签2'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '标签3'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '标签4'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '标签5'
|
||||
}],
|
||||
value11: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 服务端搜索
|
||||
|
||||
<el-select :value.sync="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading">
|
||||
<el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
:value.sync="value12"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [],
|
||||
value12: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; });
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## API
|
||||
### el-select
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | select 目前选中的值 | string/number/array | | |
|
||||
| multiple | 是否多选 | boolean | | false |
|
||||
| disabled | 是否禁用 | boolean | | false |
|
||||
| clearable | 单选时是否可以清空选项 | boolean | | false |
|
||||
| width | select 的宽度 | number | | 180（单选）/220（多选） |
|
||||
| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | | |
|
||||
| name | select input 的 name 属性 | string | | |
|
||||
| placeholder | 占位符 | string | | '请选择' |
|
||||
| filterable | 是否可搜索 | boolean | | false |
|
||||
| filter-method | 自定义过滤方法 | function | | |
|
||||
| remote | 是否为远程搜索 | boolean | | false |
|
||||
| remote-method | 远程搜索方法，当搜索关键字变化时会调用该方法，参数为目前的搜索关键字 | function | | |
|
||||
| loading | 是否正在从远程获取数据 | boolean | | false |
|
||||
| change | value 发生变化时的回调函数，参数为 value 的值 | function | | |
|
||||
|
||||
### el-option-group
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | 分组的标签 | string | | |
|
||||
| disabled | 是否将该分组下所有选项置为禁用 | boolean | | false |
|
||||
|
||||
### el-option
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 选项的值 | string/number | | |
|
||||
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | |
|
||||
| disabled | 是否禁用该选项 | boolean | | false |
|
||||
| selected | 选项是否被初始选中 | boolean | | false |
|
||||
| template | 选项的自定义模板 | String | | `<span>{{ label }}</span>` |
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<el-slider></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider></el-slider>
|
||||
```
|
||||
|
||||
## 定义初始值
|
||||
|
||||
<el-slider :value="50"></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider :value="50"></el-slider>
|
||||
```
|
||||
|
||||
## 定义区间
|
||||
|
||||
<el-slider :min="20" :max="80"></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider :min="20" :max="80"></el-slider>
|
||||
```
|
||||
|
||||
## 定义步长
|
||||
|
||||
<el-slider :step="10"></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider :step="10"></el-slider>
|
||||
```
|
||||
|
||||
## 显示间断点
|
||||
|
||||
<el-slider :step="10" show-stops></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider :step="10" show-stops></el-slider>
|
||||
```
|
||||
|
||||
## 带有输入框
|
||||
|
||||
<el-slider show-input></el-slider>
|
||||
|
||||
```html
|
||||
<el-slider show-input></el-slider>
|
||||
```
|
||||
|
||||
## 回调函数
|
||||
|
||||
<el-slider @change="onChange"></el-slider>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-slider @change="onChange"></el-slider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 绑定值 | number | | 最小值 min |
|
||||
| min | 最小值 | number | | 0 |
|
||||
| max | 最大值 | number | | 100 |
|
||||
| step | 步长 | number | | 1 |
|
||||
| showInput | 是否显示输入框 | boolean | | false |
|
||||
| showStops | 是否显示间断点 | boolean | | false |
|
||||
| change | 值改变时的回调函数 | function | | |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<style>
|
||||
.demo-box.demo-switch {
|
||||
.el-switch {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基本用法
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch></el-switch>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-switch></el-switch>
|
||||
```
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch disabled></el-switch>
|
||||
<el-switch disabled :value="false"></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-switch disabled></el-switch>
|
||||
<el-switch disabled :value="false"></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
||||
```
|
||||
|
||||
## 自定义颜色
|
||||
|
||||
<div class="demo-box demo-switch">
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | switch 的选中状态 | boolean | | true |
|
||||
| disabled | 禁用 | boolean | true, false | false |
|
||||
| width | switch 的宽度（像素） | number | | 58（有文字）/ 46（无文字） |
|
||||
| on-icon-class | switch 打开时所显示图标的类名 | string | | |
|
||||
| off-icon-class | switch 关闭时所显示图标的类名 | string | | |
|
||||
| on-text | switch 打开时的文字 | string | | 'ON' |
|
||||
| off-text | switch 关闭时的文字 | string | | 'OFF' |
|
||||
| on-color | switch 打开时的背景色 | string | | |
|
||||
| off-color | switch 关闭时的背景色 | string | | |
|
||||
| name | 对应 input 的 name 属性 | string | | |
|
||||
|
||||
|
|
@ -0,0 +1,606 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
let popup = Vue.extend(require('examples/components/table-filter.vue'));
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}],
|
||||
tableData2: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$positive: true
|
||||
}],
|
||||
tableData3: [{
|
||||
tag: '家',
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '家',
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '家',
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
tag: '公司',
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: []
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
singleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
},
|
||||
|
||||
multipleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## 基础表格
|
||||
|
||||
<el-table :data="tableData" style="width: 520px">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 带斑马纹表格
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 520px">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData" stripe>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 带边框表格
|
||||
|
||||
<el-table :data="tableData" border style="width: 520px">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData" border>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 带状态表格
|
||||
|
||||
<el-table :data="tableData2" style="width: 520px">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData2">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData2: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
$positive: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 固定表头
|
||||
|
||||
<el-table :data="tableData3" height="250" border style="width: 520px">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData3" height="250" border>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 固定列
|
||||
<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="300"></el-table-column>
|
||||
<el-table-column property="address" label="地址" width="300"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="300"></el-table-column>
|
||||
<el-table-column property="address" label="地址" width="300"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 固定列和表头
|
||||
<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="300"></el-table-column>
|
||||
<el-table-column property="address" label="地址" width="300"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
|
||||
<el-table-column property="date" label="日期" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="300"></el-table-column>
|
||||
<el-table-column property="address" label="地址" width="300"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 单选
|
||||
|
||||
<el-table :data="tableData" selection-mode="single" :selection.sync="singleSelection" style="width: 520px" allow-no-selection>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<p>{{ singleSelection | json }}</p>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData" selection-mode="single" :selection.sync="singleSelection">
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}],
|
||||
singleSelection: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 多选
|
||||
|
||||
<el-table :data="tableData3" selection-mode="multiple" :selection.sync="multipleSelection" style="width: 520px">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
<p>{{ multipleSelection | json }}</p>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData3" selection-mode="multiple" :selection.sync="multipleSelection">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column property="date" label="日期" width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}],
|
||||
multipleSelection: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 排序
|
||||
|
||||
<el-table :data="tableData" border style="width: 520px">
|
||||
<el-table-column property="date" label="日期" sortable width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table :data="tableData" border style="width: 520px">
|
||||
<el-table-column property="date" label="日期" sortable width="120"></el-table-column>
|
||||
<el-table-column property="name" label="姓名" width="120"></el-table-column>
|
||||
<el-table-column property="address" label="地址"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## el-table API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| data | 显示的数据 | array | | |
|
||||
| height | table 的高度，默认高度为空，即自动高度 | string | | '' |
|
||||
| stripe | 是否为斑马纹 table | boolean | | false |
|
||||
| border | 是否带有纵向边框 | boolean | | false |
|
||||
| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
|
||||
| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false |
|
||||
| selection | 多选模式下返回数组，单选模式下返回选中的元素。 | array/object | | |
|
||||
| fixedColumnCount | 固定列的个数 | number | | 0 |
|
||||
|
||||
## el-table 事件
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| selection-change | 当选择项发生变化时会触发该事件 | selected |
|
||||
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
|
||||
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
|
||||
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
|
||||
|
||||
## el-table-column API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | 显示的标题 | string | | '' |
|
||||
| property | 对应列内容的字段名 | string | | '' |
|
||||
| width | 对应列的宽度 | string | | |
|
||||
| sortable | 对应列是否可以排序 | boolean | | false |
|
||||
| type | 对应列的类型。如果设置了 `selection` 则显示多选按钮，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | 'selection', 'index' | 0 |
|
||||
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | |
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: [{
|
||||
title: '选项卡一',
|
||||
content: '选项卡一内容'
|
||||
},{
|
||||
title: '选项卡二',
|
||||
content: '选项卡二内容'
|
||||
},{
|
||||
title: '选项卡三',
|
||||
content: '选项卡三内容'
|
||||
},{
|
||||
title: '选项卡四',
|
||||
content: '选项卡四内容'
|
||||
}],
|
||||
activeKey: '3',
|
||||
activeKey2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-tabs {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<div>
|
||||
<el-tabs :active-key="activeKey">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tabs :active-key="activeKey">
|
||||
<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>
|
||||
```
|
||||
|
||||
## 标签风格
|
||||
|
||||
<div>
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
## 可关闭的标签
|
||||
|
||||
<div>
|
||||
<el-tabs type="card" :closable="true">
|
||||
<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>
|
||||
</div>
|
||||
{{activeKey2}}
|
||||
|
||||
```html
|
||||
<el-tabs type="card" :closable="true">
|
||||
<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>
|
||||
```
|
||||
|
||||
## 卡片风格
|
||||
|
||||
<div>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
|
||||
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
## TABS API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 风格类型 | string | card, border-card | |
|
||||
| closable | 真实值 | boolean | true, false | false |
|
||||
| defaultActiveKey | 如果没有设置 activeKey, 则使用该值 | string | | 第一个面板 |
|
||||
| activeKey | 当前选中面板的key | string | | |
|
||||
| tab.click | tab 被点击的回调 | string | | |
|
||||
| tab.remove | tab 被删除的回调 | string | | |
|
||||
|
||||
## TAB-PANE API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | 选项卡标题 | string | | |
|
||||
| key | 与选项卡activeKey对应的标识符 | string | | 该选项卡在选项卡中的index值，如第一个选项卡则为'1' |
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: '标签一', type: '' },
|
||||
{ key: 2, name: '标签二', type: 'gray' },
|
||||
{ key: 5, name: '标签三', type: 'primary' },
|
||||
{ key: 3, name: '标签四', type: 'success' },
|
||||
{ key: 4, name: '标签五', type: 'warning' },
|
||||
{ key: 6, name: '标签六', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.$remove(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-tag {
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<div class="demo-box demo-tag">
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="gray">标签二</el-tag>
|
||||
<el-tag type="primary">标签三</el-tag>
|
||||
<el-tag type="success">标签四</el-tag>
|
||||
<el-tag type="warning">标签五</el-tag>
|
||||
<el-tag type="danger">标签六</el-tag>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tag>标签一</el-tag>
|
||||
<el-tag type="gray">标签二</el-tag>
|
||||
<el-tag type="primary">标签三</el-tag>
|
||||
<el-tag type="success">标签四</el-tag>
|
||||
<el-tag type="warning">标签五</el-tag>
|
||||
<el-tag type="danger">标签六</el-tag>
|
||||
```
|
||||
|
||||
## 可移除的标签
|
||||
|
||||
<div class="demo-box demo-tag">
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: '标签一', type: '' },
|
||||
{ key: 2, name: '标签二', type: 'gray' },
|
||||
{ key: 5, name: '标签三', type: 'primary' },
|
||||
{ key: 3, name: '标签四', type: 'success' },
|
||||
{ key: 4, name: '标签五', type: 'warning' },
|
||||
{ key: 6, name: '标签六', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.$remove(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-date-editor + .el-date-editor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 固定时间点
|
||||
提供几个固定的时间点供用户选择。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-select
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="选择时间">
|
||||
</el-time-select>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-select
|
||||
:value.sync="value"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="选择时间">
|
||||
</el-time-select>
|
||||
```
|
||||
|
||||
## 任意时间点
|
||||
可以选择任意时间。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-picker
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
### 通用 - 手动输入规则
|
||||
<div class="demo-box">
|
||||
<el-time-picker
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
### 通用 - 限制时间范围
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-picker
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-picker
|
||||
:value.sync="value"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="任意时间点">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
|
||||
## 固定时间范围
|
||||
|
||||
### 先选择开始时间
|
||||
先选择开始时间,结束时间内备选项的状态会随之改变。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
```
|
||||
|
||||
### 先选择结束时间
|
||||
开始时间的备选项不随结束时间的选择改变。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime2
|
||||
}">
|
||||
</el-time-select>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
:value.sync="startTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
:value.sync="endTime2"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime2
|
||||
}">
|
||||
</el-time-select>
|
||||
```
|
||||
|
||||
## 任意时间范围
|
||||
可选择任意的时间范围。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-time-picker
|
||||
is-range
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-time-picker
|
||||
is-range
|
||||
placeholder="选择时间范围">
|
||||
</el-time-picker>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
startTime2: '',
|
||||
endTime2: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 绑定值，需双向绑定 | String | | |
|
||||
| readonly | 只读 | Boolean | | false |
|
||||
| placeholder | 占位内容 | String | | |
|
||||
| format | 时间格式化 | String | 小时: `HH`, 分`mm`, 秒`ss` | 'HH:mm:ss' |
|
||||
| picker-options | 当前时间日期选择器特有的选项，参考下表 | Object | | {} |
|
||||
|
||||
### time-select Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| start | 开始时间 | String | |09:00 |
|
||||
| end | 结束时间 | String | |18:00 |
|
||||
| step | 间隔时间 | String | | 00:30 |
|
||||
| minTime | 最小时间，小于该时间的时间段将被禁用 | String | | 00:00 |
|
||||
|
||||
### time-picker Options
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | 可选时间段，例如 `18:30:00 - 20:30:00`，或者传入数组 `['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | String, Array | | |
|
||||
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
## 基础用法
|
||||
鼠标 hover 的时候显示,可选择提示出现的位置。
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
switch: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
effect() {
|
||||
return this.switch ? 'dark' : 'light';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<el-switch
|
||||
:value.sync="switch"
|
||||
on-text="黑色"
|
||||
off-text="白色"
|
||||
on-color="#1f2d3d"
|
||||
off-color="#ccc">
|
||||
</el-switch>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start">
|
||||
<el-button>上左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top">
|
||||
<el-button>上边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end">
|
||||
<el-button>上右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start">
|
||||
<el-button>左上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left">
|
||||
<el-button>左边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end">
|
||||
<el-button>左下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
|
||||
<el-button>右上</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
|
||||
<el-button>右边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
|
||||
<el-button>右下</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
|
||||
<el-button>下左</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
|
||||
<el-button>下边</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
|
||||
<el-button>下右</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 适用于不同情景
|
||||
|
||||
<div>
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Bottom center</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| effect | 默认提供的样式 | String | `dark`, `light` | dark |
|
||||
| content | 显示的内容 | String | | |
|
||||
| placement | 出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom |
|
||||
| visible | 初始状态是否可见 | Boolean | | false |
|
||||
| disabled | 控制是否不可见 | Boolean | | false |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<style>
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/ecmascript-6">
|
||||
import Vue from 'vue';
|
||||
|
||||
var data = [{
|
||||
label: 'bb',
|
||||
children: [{
|
||||
label: 'b1'
|
||||
}]
|
||||
}, {
|
||||
label: 'cc',
|
||||
children: [{
|
||||
label: 'cc1'
|
||||
}, {
|
||||
label: 'cc2'
|
||||
}]
|
||||
}];
|
||||
|
||||
var regions = [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
'name': 'region2'
|
||||
}];
|
||||
|
||||
var count = 1;
|
||||
|
||||
var props = {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
icon(data, node) {
|
||||
if (node.isLeaf) {
|
||||
return 'el-icon-close';
|
||||
}
|
||||
return 'el-icon-search';
|
||||
}
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
};
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes(true));
|
||||
},
|
||||
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === -1) {
|
||||
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
|
||||
}
|
||||
var hasChild = Math.random() > 0.5;
|
||||
if (node.level > 4) return resolve([]);
|
||||
|
||||
setTimeout(function() {
|
||||
var data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + count++
|
||||
}, {
|
||||
name: 'zone' + count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
regions,
|
||||
defaultProps,
|
||||
props
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Basic
|
||||
|
||||
<el-tree :data="data" :props="defaultProps"></el-tree>
|
||||
|
||||
## Have Checkbox
|
||||
|
||||
<el-tree :data="regions" :props="props" :load="loadNode" lazy show-checkbox></el-tree>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<style>
|
||||
.upload-tip {
|
||||
color: #8492a6;
|
||||
font-size: 12px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.demo-box {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.el-draggeer__uploaded-image__btns {
|
||||
margin-top: 45px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
& .btn {
|
||||
display: inline-block;
|
||||
|
||||
& span {
|
||||
opacity: 0;
|
||||
transition: opacity .15s linear;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
& i {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleChange(file, fileList, event) {
|
||||
console.log(file, fileList, event);
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<div class="demo-box">
|
||||
<el-upload action="http://127.0.0.1:9000/upload" @filechange="handleChange" @fileremove="handleRemove">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-upload action="http://127.0.0.1:9000/upload" @filechange="handleChange" @fileremove="handleRemove">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
|
||||
## 拖拽文件上传
|
||||
|
||||
<div class="demo-box">
|
||||
<el-upload action="http://127.0.0.1:9000/upload" type="drag" :multiple="true">
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-upload action="http://127.0.0.1:9000/upload" type="drag" :multiple="true">
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
|
||||
## 图片缩略图模式
|
||||
|
||||
上传文件类型限制为只能上传图片，并可展示本地缩略图，该模式暂不支持多选
|
||||
|
||||
<div class="demo-box">
|
||||
<el-upload action="http://127.0.0.1:9000/upload" type="drag" mode="image">
|
||||
<div class="el-draggeer__uploaded-image__btns" slot="interact">
|
||||
<span class="btn"><i class="el-icon-share"></i><span>分享图片</span></span>
|
||||
<span class="btn"><i class="el-icon-delete"></i><span>删除</span></span>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-upload action="http://127.0.0.1:9000/upload" type="drag" mode="image">
|
||||
<div class="el-draggeer__uploaded-image__btns" slot="interact">
|
||||
<span class="btn"><i class="el-icon-share"></i><span>分享图片</span></span>
|
||||
<span class="btn"><i class="el-icon-delete"></i><span>删除</span></span>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
|
||||
## API
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| action | 必选参数, 上传的地址 | string | | |
|
||||
| headers | 可选参数, 设置上传的请求头部 | object | | |
|
||||
| multiple | 可选参数, 是否支持多选文件 | boolean | | |
|
||||
| file | 可选参数, 上传的文件字段名 | string | | file |
|
||||
| withCredentials | 支持发送 cooking 凭证信息 | boolean | | false |
|
||||
| showUploadList | 是否显示已上传文件列表 | boolean | | true |
|
||||
| type | 上传控件类型 | string | select,drag | select |
|
||||
| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), 拖拽文件上传时不受此参数影响 | string | | |
|
||||
| filechange | 可选参数, 上传文件改变时的回调 | function(file, fileList, event) | | |
|
||||
| fileremove | 可选参数, 文件列表移除文件时的回调 | function(file, fileList) | | |
|
||||
| type | 上传控件类型 | string | select,drag | select |
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
export const hasClass = function(obj, cls) {
|
||||
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
|
||||
};
|
||||
|
||||
export const addClass = function(obj, cls) {
|
||||
if (!hasClass(obj, cls)) obj.className += ' ' + cls;
|
||||
};
|
||||
|
||||
export const removeClass = function(obj, cls) {
|
||||
if (hasClass(obj, cls)) {
|
||||
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
|
||||
obj.className = obj.className.replace(reg, ' ');
|
||||
}
|
||||
};
|
||||
|
||||
export const toggleClass = function(obj, cls) {
|
||||
if (hasClass(obj, cls)) {
|
||||
removeClass(obj, cls);
|
||||
} else {
|
||||
addClass(obj, cls);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import Vue from 'vue';
|
||||
import entry from './app';
|
||||
import VueRouter from 'vue-router';
|
||||
import configRouter from './route.config';
|
||||
import Element from 'main/index.js';
|
||||
import 'packages/theme-default/src/index.css';
|
||||
|
||||
// test Released package
|
||||
// import Element from '../lib/index.js';
|
||||
// import '../lib/theme-default/index.css';
|
||||
|
||||
Vue.use(Element);
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter();
|
||||
const app = Vue.extend({
|
||||
template: '<entry></entry>',
|
||||
components: { entry }
|
||||
});
|
||||
|
||||
configRouter(router);
|
||||
router.start(app, 'app');
|
||||
|
||||
router.afterEach(() => {
|
||||
document.body.scrollTop = 0;
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"]
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>Element 后台组件</title>
|
||||
</head>
|
||||
<body>
|
||||
<app></app>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
[
|
||||
{
|
||||
"group": "使用说明",
|
||||
"list": [
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"name": "快速上手"
|
||||
},
|
||||
{
|
||||
"path": "/development",
|
||||
"name": "开发指南"
|
||||
},
|
||||
{
|
||||
"path": "/changelog",
|
||||
"name": "更新日志"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "设计指南",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"name": "导航",
|
||||
"description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/button",
|
||||
"name": "按钮 (button)",
|
||||
"title": "Button 按钮",
|
||||
"description": "常用的操作按钮"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"name": "图标 (icon)",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"name": "标签 (tag)",
|
||||
"title": "Tag 标签",
|
||||
"description": "Tag 标签"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
"name": "对话框 (dialog)",
|
||||
"title": "Dialog 对话框",
|
||||
"description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"name": "弹框 (message-box)",
|
||||
"title": "message-box 弹框"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"name": "弹出框 (popover)",
|
||||
"title": "popover 弹出框",
|
||||
"description": "收纳具体内容和相关操作, 激活后弹出展现"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"name": "文字提示 (tooltip)",
|
||||
"title": "tooltip 文字提示",
|
||||
"description": "优雅地展示文字提示信息"
|
||||
},
|
||||
{
|
||||
"path": "/alert",
|
||||
"name": "警告 (alert)",
|
||||
"title": "alert 警告",
|
||||
"description": "用于页面中展示重要的提示信息"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"name": "通知 (notification)",
|
||||
"title": "notification 通知",
|
||||
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"name": "加载 (loading)",
|
||||
"title": "loading 加载",
|
||||
"description": "加载数据时显示"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/autocomplete",
|
||||
"name": "自动完成 (autocomplete)",
|
||||
"title": "Autocomplete 自动完成"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"name": "选择器 (select)",
|
||||
"title": "Select 选择器",
|
||||
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"name": "多选框 (checkbox)",
|
||||
"title": "Checkbox 多选框",
|
||||
"description": "用于在多个可选项中进行多项选择。"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"name": "单选框 (radio)",
|
||||
"title": "Radio 单选框",
|
||||
"description": "用于在多个备选项选中单个选项。"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"name": "输入框 (input)",
|
||||
"title": "Input 输入框"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"name": "计数器 (input-number)",
|
||||
"title": "Input Number 计数器"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"name": "开关 (switch)",
|
||||
"title": "Switch 开关",
|
||||
"description": "用于两种对立状态的切换。"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"name": "时间选择器（time-picker）",
|
||||
"title": "时间选择器",
|
||||
"description": "用于选择或输入时间"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"name": "日期选择器（date-picker）",
|
||||
"title": "日期选择器",
|
||||
"description": "用于选择或输入时间"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"name": "日期时间选择器",
|
||||
"title": "日期时间选择器",
|
||||
"description": "用于选择或输入日期时间"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"name": "上传 (upload)",
|
||||
"title": "upload 上传",
|
||||
"description": "文件上传组件"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"name": "表单 (form)",
|
||||
"title": "form 表单",
|
||||
"description": "一个多功能的并带有字段验证的表单组件"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"name": "滑块 (slider)",
|
||||
"title": "slider 滑块",
|
||||
"description": "通过拖动滑块在一个固定区间内进行选择"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Nav",
|
||||
"list": [
|
||||
{
|
||||
"path": "/tabs",
|
||||
"name": "标签页 (tabs)",
|
||||
"title": "tabs 标签页",
|
||||
"description": "富展现的标签页"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"name": "面包屑 (breadcrumb)",
|
||||
"title": "breadcrumb 面包屑",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"name": "下拉菜单 (dropdown)",
|
||||
"title": "Dropdown 下拉菜单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"name": "表格 (table)",
|
||||
"title": "Table 表格",
|
||||
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"name": "进度条 (progress)",
|
||||
"title": "progress 进度条",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"name": "分页 (pagination)",
|
||||
"title": "Pagination 分页",
|
||||
"description": "当数据量过多时, 使用分页分解数据"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"name": "tree (tree)",
|
||||
"title": "tree"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import navConfig from './nav.config.json';
|
||||
|
||||
const registerRoute = (config) => {
|
||||
let route = {};
|
||||
config.map(nav => nav.list.map(page => {
|
||||
try {
|
||||
route[page.path] = page.path !== '/changelog' ? {
|
||||
component: require(`./docs${page.path}.md`),
|
||||
title: page.title || page.name,
|
||||
description: page.description
|
||||
} : {
|
||||
component: require('../CHANGELOG.md'),
|
||||
title: page.title || page.name,
|
||||
description: page.description
|
||||
};
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
page.disabled = true;
|
||||
}
|
||||
}));
|
||||
|
||||
return { route, navs: config };
|
||||
};
|
||||
|
||||
const route = registerRoute(navConfig);
|
||||
|
||||
export const navs = route.navs;
|
||||
export default function configRouter(router) {
|
||||
router.map(Object.assign({
|
||||
'*': {
|
||||
component: require('./docs/home.md')
|
||||
}
|
||||
}, route.route));
|
||||
|
||||
router.beforeEach(transition => {
|
||||
document.title = transition.to.title || document.title;
|
||||
transition.to.router.app.$broadcast('element.example.reload');
|
||||
transition.next();
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
appid: fe.element
|
||||
version: 1.0.0
|
||||
os: linux
|
||||
language: cdnjs
|
||||
apptype: web
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
language: fe.cooking
|
||||
version: 0.5.4
|
||||
script:
|
||||
- make deploy
|
||||
outfile:
|
||||
- ./fe.element
|
||||
notifications:
|
||||
email:
|
||||
- haiping.zeng@ele.me
|
||||
branch:
|
||||
master: alpha_stable
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"lerna": "2.0.0-beta.18",
|
||||
"version": "independent",
|
||||
"publishConfig": {
|
||||
"ignore": [
|
||||
"node_modules",
|
||||
"log.*"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"name": "element-ui",
|
||||
"version": "0.1.9",
|
||||
"description": "A Component Library for Vue.js.",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
|
||||
"dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p",
|
||||
"deploy": "cooking build -c scripts/cooking.demo.js -p",
|
||||
"gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
|
||||
"prepublish": "make dist"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:eleme/element-ui.git"
|
||||
},
|
||||
"keywords": [
|
||||
"eleme",
|
||||
"vue",
|
||||
"components"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/eleme/element-ui/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"object-assign": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"file-save": "^0.2.0",
|
||||
"gh-pages": "^0.11.0",
|
||||
"highlight.js": "^9.3.0",
|
||||
"json-templater": "^1.0.4",
|
||||
"lerna": "2.0.0-beta.18",
|
||||
"markdown-it-toc-and-anchor": "^4.1.1",
|
||||
"oui-dom-events": "^0.2.1",
|
||||
"postcss": "^5.0.21",
|
||||
"purecss": "^0.6.0",
|
||||
"q": "^1.4.1",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"vue": "^1.0.26",
|
||||
"vue-loader": "^8.5.3",
|
||||
"vue-markdown-loader": "^0.4.0",
|
||||
"vue-popup": "^0.1.8",
|
||||
"vue-router": "^0.7.13"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElAlert',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const Alert = require('./src/main');
|
||||
|
||||
Alert.install = function(Vue) {
|
||||
Vue.component(Alert.name, Alert);
|
||||
};
|
||||
|
||||
module.exports = Alert;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "el-alert",
|
||||
"version": "0.0.0",
|
||||
"description": "A alert component for Vue.js.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/alert",
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
|
||||
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
|
||||
<div class="el-alert__content">
|
||||
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
|
||||
<p class="el-alert__description" v-if="description">{{ description }}</p>
|
||||
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
const TYPE_CLASSES_MAP = {
|
||||
'success': 'el-icon-circle-check',
|
||||
'warning': 'el-icon-warning',
|
||||
'error': 'el-icon-circle-cross'
|
||||
};
|
||||
export default {
|
||||
name: 'el-alert',
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.visible = false;
|
||||
this.$emit('onClose');
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconClass() {
|
||||
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
|
||||
},
|
||||
|
||||
isBigIcon() {
|
||||
return this.description ? 'is-big' : '';
|
||||
},
|
||||
|
||||
isBoldTitle() {
|
||||
return this.description ? 'is-bold' : '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElAutocomplete',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElAutocomplete = require('./src/autocomplete');
|
||||
|
||||
ElAutocomplete.install = function(Vue) {
|
||||
Vue.component(ElAutocomplete.name, ElAutocomplete);
|
||||
};
|
||||
|
||||
module.exports = ElAutocomplete;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "el-autocomplete",
|
||||
"version": "1.0.0",
|
||||
"description": "A autocomplete component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/autocomplete",
|
||||
"author": "haiping.zeng<haiping.zeng@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="el-autocomplete">
|
||||
<el-input
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:name = 'name'
|
||||
@onchange="handleChange"
|
||||
@onfocus="handleFocus()"
|
||||
@onblur="handleBlur()"
|
||||
@keydown.up="highlight(highlightedIndex - 1)"
|
||||
@keydown.down="highlight(highlightedIndex + 1)"
|
||||
@keydown.enter="select(highlightedIndex)"
|
||||
></el-input>
|
||||
<ul
|
||||
v-show="showSuggestions && !loading && suggestions.length > 0"
|
||||
class="el-autocomplete__suggestions"
|
||||
:class="[partial ? partial.name : '']"
|
||||
transition="md-fade-bottom"
|
||||
v-el:suggestions
|
||||
>
|
||||
<li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li>
|
||||
</ul>
|
||||
<div
|
||||
v-show="showSuggestions && loading"
|
||||
class="el-autocomplete__suggestions is-loading"
|
||||
>
|
||||
<i class="el-icon-loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElInput from 'packages/input/index.js';
|
||||
|
||||
export default {
|
||||
name: 'ElAutocomplete',
|
||||
|
||||
components: {
|
||||
ElInput
|
||||
},
|
||||
props: {
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
name: String,
|
||||
suggestions: [Array, Object],
|
||||
value: String,
|
||||
showOnUpDown: Boolean,
|
||||
partial: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSuggestions: false,
|
||||
inputFocusing: false,
|
||||
loading: false,
|
||||
highlightedIndex: -1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.partial) {
|
||||
this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'suggestions'(val) {
|
||||
if (val && val.then) {
|
||||
this.loading = true;
|
||||
this.suggestions.then((res) => {
|
||||
this.loading = false;
|
||||
this.suggestions = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
this.value = value;
|
||||
this.showSuggestions = true;
|
||||
},
|
||||
handleFocus() {
|
||||
if (!this.showOnUpDown) {
|
||||
this.showSuggestions = true;
|
||||
}
|
||||
},
|
||||
handleBlur() {
|
||||
this.showSuggestions = false;
|
||||
},
|
||||
select(index) {
|
||||
if (this.suggestions && this.suggestions[index]) {
|
||||
this.value = this.suggestions[index].value;
|
||||
this.$nextTick(() => {
|
||||
this.showSuggestions = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
getSuggestionElement(index) {
|
||||
if (!this.suggestions || !this.suggestions[index]) {
|
||||
return null;
|
||||
} else {
|
||||
return this.$els.suggestions.children[index];
|
||||
}
|
||||
},
|
||||
highlight(index) {
|
||||
if (index < 0) {
|
||||
index = 0;
|
||||
} else if (index >= this.suggestions.length) {
|
||||
index = this.suggestions.length - 1;
|
||||
}
|
||||
|
||||
var elSelect = this.getSuggestionElement(index);
|
||||
var elSuggestions = this.$els.suggestions;
|
||||
var scrollTop = elSuggestions.scrollTop;
|
||||
var offsetTop = elSelect.offsetTop;
|
||||
|
||||
if (offsetTop > (scrollTop + elSuggestions.clientHeight - 12)) {
|
||||
elSuggestions.scrollTop += elSelect.scrollHeight;
|
||||
}
|
||||
if (offsetTop < scrollTop - 12) {
|
||||
elSuggestions.scrollTop -= elSelect.scrollHeight;
|
||||
}
|
||||
|
||||
this.highlightedIndex = index;
|
||||
|
||||
if (this.showOnUpDown) {
|
||||
this.showSuggestions = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElBreadcrumbItem = require('../breadcrumb/src/breadcrumb-item');
|
||||
|
||||
ElBreadcrumbItem.install = function(Vue) {
|
||||
Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
|
||||
};
|
||||
|
||||
module.exports = ElBreadcrumbItem;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElBreadcrumb',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElBreadcrumb = require('./src/breadcrumb');
|
||||
|
||||
ElBreadcrumb.install = function(Vue) {
|
||||
Vue.component(ElBreadcrumb.name, ElBreadcrumb);
|
||||
};
|
||||
|
||||
module.exports = ElBreadcrumb;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "el-breadcrumb",
|
||||
"version": "1.0.0",
|
||||
"description": "A breadcrumb component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/breadcrumb",
|
||||
"author": "haiping.zeng<haiping.zeng@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<span class="el-breadcrumb__item">
|
||||
<span class="el-breadcrumb__item__text"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElBreadcrumbItem',
|
||||
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
separator: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
ready() {
|
||||
this.separator = this.$parent.separator;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="el-breadcrumb">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElBreadcrumb',
|
||||
|
||||
props: {
|
||||
separator: {
|
||||
type: String,
|
||||
default: '/'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
ready() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElButtonGroup = require('../button/src/button-group');
|
||||
|
||||
ElButtonGroup.install = function(Vue) {
|
||||
Vue.component(ElButtonGroup.name, ElButtonGroup);
|
||||
};
|
||||
|
||||
module.exports = ElButtonGroup;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
node_modules/
|
||||
npm-debug.log
|
||||
npm-debug.log.*
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElButton',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const ElButton = require('./src/button');
|
||||
const ElButtonGroup = require('./src/button-group');
|
||||
|
||||
ElButton.install = function(Vue) {
|
||||
Vue.component(ElButton.name, ElButton);
|
||||
Vue.component(ElButtonGroup.name, ElButtonGroup);
|
||||
};
|
||||
|
||||
module.exports = ElButton;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "el-button",
|
||||
"version": "1.0.0",
|
||||
"description": "A button component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/button",
|
||||
"author": "haiping.zeng<haiping.zeng@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="el-button-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* button
|
||||
* @module components/basic/menu
|
||||
* @desc 用于按钮组
|
||||
* @param {string} label - 名称
|
||||
*/
|
||||
export default {
|
||||
name: 'ElButtonGroup'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<button :disabled="disabled" class="el-button"
|
||||
:class="[
|
||||
type ? 'el-button-' + type : '',
|
||||
size ? 'el-button-' + size : '',
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading,
|
||||
'is-plain': plain
|
||||
}
|
||||
]"
|
||||
>
|
||||
<i class="el-icon-loading" v-if="loading"></i><i :class="'el-icon-' + icon" v-if="icon && !loading"></i><span v-if="_slotContents && _slotContents.default">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* button
|
||||
*/
|
||||
export default {
|
||||
name: 'ElButton',
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: String,
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# el-cascader
|
||||
> A el-cascader component for Vue.js.
|
||||
|
||||
## Installation
|
||||
```shell
|
||||
npm i el-cascader -D
|
||||
```
|
||||
|
||||
## Usage
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElCascader from 'el-cascader'
|
||||
import 'theme-default/dist/cascader.css'
|
||||
|
||||
Vue.use(ElCascader)
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { ElCascader } from 'el-cascader'
|
||||
|
||||
Vue.component('el-cascader', ElCascader)
|
||||
```
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
### el-cascader
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
|model| 绑定值| string | | |
|
||||
|placeholder| 占位符| string | | | |
|
||||
|
||||
|
||||
## Development
|
||||
```shell
|
||||
make dev
|
||||
|
||||
## test
|
||||
make test
|
||||
|
||||
## build
|
||||
make build
|
||||
```
|
||||
|
||||
# License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
var cooking = require('cooking');
|
||||
var path = require('path');
|
||||
|
||||
cooking.set({
|
||||
entry: {
|
||||
index: path.join(__dirname, 'index.js')
|
||||
},
|
||||
dist: path.join(__dirname, 'lib'),
|
||||
template: false,
|
||||
format: 'umd',
|
||||
moduleName: 'ElCascader',
|
||||
extractCSS: 'style.css',
|
||||
|
||||
extends: ['vue', 'saladcss']
|
||||
});
|
||||
|
||||
cooking.add('resolve.alias', {
|
||||
'main': path.join(__dirname, '../../src'),
|
||||
'packages': path.join(__dirname, '../../packages')
|
||||
});
|
||||
|
||||
cooking.add('externals', {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = cooking.resolve();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElCascader = require('./src/cascader');
|
||||
|
||||
ElCascader.install = function(Vue) {
|
||||
Vue.component(ElCascader.name, ElCascader);
|
||||
};
|
||||
|
||||
module.exports = ElCascader;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "el-cascader",
|
||||
"version": "1.0.1",
|
||||
"description": "A cascader component for Vue.",
|
||||
"keywords": [
|
||||
"element",
|
||||
"vue",
|
||||
"component"
|
||||
],
|
||||
"main": "./lib/index.js",
|
||||
"repository": "https://github.com/element-component/element/tree/master/packages/cascader",
|
||||
"author": "qingwei-li<qingwei.li@ele.me>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"object-equal": "^1.0.0",
|
||||
"vue-clickoutside": "0.0.4"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<script>
|
||||
import ElInput from 'packages/input/index.js';
|
||||
import ElDropdown from './dropdown.vue';
|
||||
|
||||
/**
|
||||
* ElCascader
|
||||
* @module components/basic/cascader
|
||||
* @desc 级联下拉选择
|
||||
* @param {string} model - 绑定值
|
||||
* @param {string} [placeholder] - 占位内容
|
||||
*/
|
||||
export default {
|
||||
name: 'ElCascader',
|
||||
|
||||
props: {
|
||||
model: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
placeholder: String
|
||||
},
|
||||
|
||||
directives: {
|
||||
ElementClickoutside: require('vue-clickoutside')
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
data: [],
|
||||
menus: []
|
||||
};
|
||||
},
|
||||
|
||||
compiled() {
|
||||
this.data.push(this.menus);
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelected(selected, index) {
|
||||
const nextIndex = index + 1;
|
||||
let removeIndex = nextIndex;
|
||||
|
||||
if (selected.hasOwnProperty('submenu')) {
|
||||
this.data.$set(nextIndex, selected.submenu);
|
||||
removeIndex++;
|
||||
}
|
||||
|
||||
this.data = this.data.slice(0, removeIndex);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
ElInput,
|
||||
ElDropdown
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="element-cascader"
|
||||
v-element-clickoutside="show = false">
|
||||
|
||||
<el-input
|
||||
readonly
|
||||
:value.sync="model"
|
||||
@click="show = !show"
|
||||
:placeholder="placeholder">
|
||||
</el-input>
|
||||
|
||||
<div
|
||||
v-show="show"
|
||||
class="element-cascader__dropdown">
|
||||
<div class="element-cascader__wrap">
|
||||
<el-dropdown
|
||||
class="element-cascader__menu"
|
||||
v-ref:dropdown
|
||||
:model.sync="model"
|
||||
:data="list"
|
||||
:index="$index"
|
||||
trigger="hover"
|
||||
v-for="list in data"
|
||||
@change="handleSelected">
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<script>
|
||||
import isEqual from 'object-equal';
|
||||
|
||||
/**
|
||||
* dropdown
|
||||
* @module components/basic/dropdown
|
||||
* @desc 级联选择下拉菜单
|
||||
* @param {object[]} data - 基本数据
|
||||
* @param {string|string[]} [model] - 绑定值，需双向绑定
|
||||
* @param {number} [index] - 当前组件的索引
|
||||
* @param {string} [trigger=click] - 触发方式，可选'click', 'hover'
|
||||
* @param {boolean} [allow-arrow=false] - 是否显示箭头
|
||||
* @param {function} [change] - 选中后的回调函数
|
||||
*/
|
||||
module.exports = {
|
||||
name: 'ElDropdown',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
required: true
|
||||
},
|
||||
model: {
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
twoWay: true
|
||||
},
|
||||
index: Number,
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'click',
|
||||
validator(value) {
|
||||
return ['click', 'hover'].indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
cache: {}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
model(value) {
|
||||
if (!value) {
|
||||
this.cache = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelected(trigger, data, pid, id) {
|
||||
let cache;
|
||||
|
||||
if (trigger === 'click' && !data.hasOwnProperty('submenu')) {
|
||||
this.$parent.show = false;
|
||||
}
|
||||
|
||||
if (data.disabled || trigger !== this.trigger) {
|
||||
return;
|
||||
}
|
||||
// 缓存结果
|
||||
cache = { pid: pid, id: id };
|
||||
if (isEqual(cache, this.cache)) {
|
||||
return;
|
||||
}
|
||||
this.cache = cache;
|
||||
|
||||
// 返回结果，如果需要返回完整数据（每一层的数据）需要 model 为数组类型且父组件
|
||||
// 设置了 completed 属性
|
||||
if (this.$parent.completed) {
|
||||
if (!Array.isArray(this.model)) {
|
||||
this.model = [];
|
||||
}
|
||||
|
||||
this.model.$set(pid, data.label);
|
||||
this.model = this.model.slice(0, pid + 1);
|
||||
} else {
|
||||
this.model = data.label;
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$dispatch('change', data, pid));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="element-dropdown">
|
||||
<ul class="element-dropdown__list">
|
||||
<li
|
||||
v-for="item in data"
|
||||
class="element-option element-option--arrow"
|
||||
:class="{
|
||||
'is-disabled': item.disabled,
|
||||
'is-selected': cache.pid === index && cache.id === $index,
|
||||
'is-last': !item.hasOwnProperty('submenu')
|
||||
}"
|
||||
@click="handleSelected('click', item, index, $index)"
|
||||
@mouseover="handleSelected('hover', item, index, $index)">
|
||||
<span v-text="item.label"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
/**
|
||||
* menu
|
||||
* @module components/basic/menu
|
||||
* @desc 用于 dropdown 中的菜单
|
||||
* @param {string} label - 名称
|
||||
*/
|
||||
export default {
|
||||
name: 'ElMenu',
|
||||
|
||||
props: {
|
||||
label: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
compiled() {
|
||||
const parent = this.$parent;
|
||||
let menu = {
|
||||
label: this.label,
|
||||
disabled: this.disabled
|
||||
};
|
||||
|
||||
if (this.submenu) {
|
||||
menu.submenu = this.submenu;
|
||||
}
|
||||
|
||||
if (parent.$options.name !== this.name && parent.hasOwnProperty('menus')) {
|
||||
parent.menus = parent.menus.concat(menu);
|
||||
} else {
|
||||
parent.submenu = (parent.submenu || []).concat(menu);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
const ElCheckboxGroup = require('../checkbox/src/checkbox-group.vue');
|
||||
|
||||
ElCheckboxGroup.install = function(Vue) {
|
||||
Vue.component(ElCheckboxGroup.name, ElCheckboxGroup);
|
||||
};
|
||||
|
||||
module.exports = ElCheckboxGroup;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue