mirror of https://github.com/ElemeFE/element
Merge i18n to master (#972)
* init i18n * update router * finish router * Review: message/messageBox/notification * Tag: update doc * Review: pagination/popover/progress * i18n: sync with masterpull/978/head
杨奕
FuryBean
parent
a11e8d115c
commit
4ccb8ea9ae
|
|
@ -7,6 +7,9 @@ lerna-debug.log.*
|
|||
lib
|
||||
.idea
|
||||
examples/element-ui
|
||||
examples/pages/en-US
|
||||
examples/pages/zh-CN
|
||||
fe.element/element-ui
|
||||
.npmrc
|
||||
coverage
|
||||
yarn.lock
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
## 更新日志
|
||||
|
||||
### 1.0.0
|
||||
|
||||
*2016-11-9*
|
||||
|
||||
- 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
|
||||
- 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
|
||||
- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
|
||||
- 修复 Input blur 事件的参数不是 event 对象的问题
|
||||
|
||||
### 1.0.0-rc.9
|
||||
|
||||
*2016-11-07*
|
||||
|
||||
- 新增 MessageBox 确定按钮自动获取焦点, #721
|
||||
- 修复 Popover focus 失效, #734
|
||||
- 修复 Clickoutside 报错, #729
|
||||
- 修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错
|
||||
- 更新 TimePicker 滚动条在 IE10+ 下隐藏
|
||||
- 新增 Dropdown 的 command api #432
|
||||
- 修复 Slider 在 Form 中的显示问题
|
||||
- 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
|
||||
- 改善 tabs 现在支持动态更新
|
||||
- Table 新增 highlightCurrentRow 属性、新增 current-change 事件
|
||||
- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
|
||||
- TableColumn 新增属性 render-header
|
||||
- Pagination 新增属性 pageCount
|
||||
- DatePicker 修复重置 value 后默认选中日期没有重置, #878
|
||||
|
||||
#### 非兼容性更新
|
||||
|
||||
- Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)
|
||||
|
||||
### 1.0.0-rc.8
|
||||
|
||||
*2016-10-28*
|
||||
|
||||
- 修复 Form reset method 对日期控件不起效的问题
|
||||
- 修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误
|
||||
- 修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题
|
||||
- 修复 Autocomplete 的弹出框不会消失 #439
|
||||
- 新增 Input 图标的点击事件 #444
|
||||
- 修复 Loading 关闭后有几率滚动失效的问题
|
||||
- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
|
||||
- 修复 Switch 的 width 属性无效的问题
|
||||
- Table 增加 rowClassName 属性
|
||||
- TableColumn 增加 fixed 属性，可选值：true, false, left, right
|
||||
- TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue
|
||||
- TableColumn[type="selection"] 增加 selectable 属性
|
||||
- 修复 Input textarea 在动态赋值时 autosize 没有触发的问题
|
||||
- 修复 Input Number min max 属性设置后点击加减出现的崩溃的bug
|
||||
- 优化 TimePicker/DatePicker 输入日期行为
|
||||
- 修复 DatePicker 输入禁用状态的日期却生效的问题 #484
|
||||
- 新增 Slider 的 disabled 属性
|
||||
- 新增 Menu 的 menu-trigger 属性
|
||||
- 新增 i18n 的支持
|
||||
|
||||
#### 非兼容性更新
|
||||
|
||||
- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例
|
||||
- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
|
||||
- Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode
|
||||
- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
|
||||
- Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change
|
||||
|
||||
### 1.0.0-rc.7
|
||||
|
||||
*2016-10-13*
|
||||
|
||||
- Upload 新增 Data 属性支持额外数据的传输
|
||||
- DatePicker 修复 `$t` 报错
|
||||
- Popper 重构 vue-popper
|
||||
- Pagination 修复输入后再点击切换，输入框的值不更新
|
||||
- Step: 修复自定义 icon 的样式
|
||||
- 修复 Tree 组件 checkbox 点击失效的问题
|
||||
- Breadcrumb 增加路由跳转的功能
|
||||
- 修复 可清空的 Select 中清空按钮的不恰当动画
|
||||
- DatePicker 修复使用 Tab 键切换时弹出框未隐藏
|
||||
|
||||
### 1.0.0-rc.6
|
||||
|
||||
*2016-10-11*
|
||||
|
||||
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
|
||||
- 修复 TimePicker 错误的隐藏面板
|
||||
- 修复 Table Cell 的样式, #204
|
||||
- 修复 Menu default-active 属性不能为空的问题, #200
|
||||
- 修复 Menu unique-opened 开启后无法展开子菜单的问题, #200
|
||||
- 为 Notification 和 Message 的不同 type 添加独立的调用方法
|
||||
- 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
|
||||
- 新增 Input textarea 类型的 rows, autosize 属性
|
||||
- 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
|
||||
- 新增 DatePicker 禁用日期功能 #253
|
||||
- 修复 多选可搜索的 Select 下拉选项自动展开的问题
|
||||
- 为 Dialog 添加 top 属性
|
||||
- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
|
||||
- Checkbox change 事件现在只能被人为的交互操作所触发
|
||||
- 新增 Checkbox checked 属性
|
||||
- 修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题
|
||||
|
||||
#### 非兼容性更新
|
||||
|
||||
- Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式
|
||||
|
||||
### 1.0.0-rc.5
|
||||
|
||||
*2016-09-30*
|
||||
|
||||
- 修复 Table 头部不同步的问题
|
||||
- 修复 Menu 组件 default-active 绑定动态值无法更新的问题
|
||||
- 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单
|
||||
- 修复 vue-popper 引入 popper 路径错误
|
||||
- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
|
||||
- 修复 Pagination 的图标没有正确切换样式, #163
|
||||
- 修复 Row 组件 align 属性不生效的问题
|
||||
- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
|
||||
- 新增 Menu 组件中 MenuItem 的 route 属性
|
||||
|
||||
#### 非兼容性更新
|
||||
- Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
|
||||
|
||||
### 1.0.0-rc.4
|
||||
|
||||
*2016-09-21*
|
||||
|
||||
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
|
||||
- 修复 Time Picker 时间选择可滚动
|
||||
- 修复 Tooltip 有时会错位的问题
|
||||
- 修复 丢失的组件 css 文件
|
||||
- 修复 Table 在 Safari 下边框没对齐
|
||||
- 修复 TimePicker 图标样式被默认图标样式覆盖
|
||||
- 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
|
||||
- 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
|
||||
- 修复 Table 初次渲染时宽度重新计算 #78
|
||||
- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
|
||||
- 新增 TableColumn 的 align 属性
|
||||
- 新增 autocomplete 的 select 事件
|
||||
|
||||
#### 非兼容性更新
|
||||
- Select 组件样式的 `display` 属性默认值修改为 `block`
|
||||
|
||||
### 1.0.0-rc.3
|
||||
|
||||
*2016-09-09*
|
||||
|
||||
- 修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题
|
||||
- 修复 Steps 样式
|
||||
- 修复 无法安装的问题
|
||||
|
||||
### 1.0.0-rc.2
|
||||
|
||||
*2016-09-09*
|
||||
|
||||
- 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
|
||||
- Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
|
||||
- 修复 Table 自定义模板中渲染静态数据错误
|
||||
- 修复 Table 中被固定列的高度不与其他列的高度协调的问题
|
||||
- 修复 Time Picker 的 `picker-options` 属性
|
||||
- 修复一些组件图标丢失的问题
|
||||
- 修复 远程搜索的 Select 在 Form 中的显示问题
|
||||
- 修复 Input Number 输入小数和非数字值时的问题
|
||||
- 修复 Select 选中 value 为 0 的值时绑定值不更新的问题
|
||||
- 修复 Tree 取消选择某节点后，其同级节点均被取消的问题
|
||||
- 修复 Upload 的 headers 属性设置无效
|
||||
- 修复 Pagination 包含 sizes 子组件时 page-size 无效的问题
|
||||
- 优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs
|
||||
|
||||
#### 非兼容性更新
|
||||
- Menu 组件 `mode` 属性默认值修改为 `vertical`
|
||||
- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档
|
||||
- Popover 现在可以通过 slot 指定 reference
|
||||
|
||||
### 1.0.0-rc.1
|
||||
|
||||
*2016-08-30*
|
||||
|
||||
Element 1.0.0-rc.1 发布
|
||||
4
Makefile
4
Makefile
|
|
@ -17,6 +17,9 @@ dev:
|
|||
new:
|
||||
node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
|
||||
|
||||
new-lang:
|
||||
node build/bin/new-lang.js $(filter-out $@,$(MAKECMDGOALS))
|
||||
|
||||
dist: install
|
||||
npm run dist
|
||||
|
||||
|
|
@ -45,3 +48,4 @@ help:
|
|||
@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 上"
|
||||
@echo " \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t--- 为网站添加新语言. 例如 'make new-lang fr'"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
'use strict';
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var langConfig = require('../../examples/i18n/page.json');
|
||||
|
||||
langConfig.forEach(lang => {
|
||||
try {
|
||||
fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
|
||||
} catch (e) {
|
||||
fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
|
||||
}
|
||||
|
||||
Object.keys(lang.pages).forEach(page => {
|
||||
var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
|
||||
var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
|
||||
var content = fs.readFileSync(templatePath, 'utf8');
|
||||
var pairs = lang.pages[page];
|
||||
|
||||
Object.keys(pairs).forEach(key => {
|
||||
content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
|
||||
});
|
||||
|
||||
fs.writeFileSync(outputPath, content);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
'use strict';
|
||||
|
||||
console.log();
|
||||
process.on('exit', () => {
|
||||
console.log();
|
||||
});
|
||||
|
||||
if (!process.argv[2]) {
|
||||
console.error('[language] is required!');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
var fs = require('fs');
|
||||
const path = require('path');
|
||||
const fileSave = require('file-save');
|
||||
const lang = process.argv[2];
|
||||
// const configPath = path.resolve(__dirname, '../../examples/i18n', lang);
|
||||
|
||||
// 添加到 components.json
|
||||
const componentFile = require('../../examples/i18n/component.json');
|
||||
if (componentFile.some(item => item.lang === lang)) {
|
||||
console.error(`${lang} already exists.`);
|
||||
process.exit(1);
|
||||
}
|
||||
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
componentFile.push(componentNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
|
||||
.write(JSON.stringify(componentFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
||||
// 添加到 page.json
|
||||
const pageFile = require('../../examples/i18n/page.json');
|
||||
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
pageFile.push(pageNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
|
||||
.write(JSON.stringify(pageFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
||||
// 添加到 route.json
|
||||
const routeFile = require('../../examples/i18n/route.json');
|
||||
routeFile.push({ lang });
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
|
||||
.write(JSON.stringify(routeFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
||||
// 添加到 nav.config.json
|
||||
const navFile = require('../../examples/nav.config.json');
|
||||
navFile[lang] = navFile['en-us'];
|
||||
fileSave(path.join(__dirname, '../../examples/nav.config.json'))
|
||||
.write(JSON.stringify(navFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
||||
// docs 下新建对应文件夹
|
||||
try {
|
||||
fs.statSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));
|
||||
} catch (e) {
|
||||
fs.mkdirSync(path.resolve(__dirname, `../../examples/docs/${ lang }`));
|
||||
}
|
||||
|
||||
console.log('DONE!');
|
||||
|
|
@ -83,6 +83,10 @@ export default {
|
|||
filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),
|
||||
content: `## ${chineseName}`
|
||||
},
|
||||
{
|
||||
filename: path.join('../../examples/docs/en-us', `${componentname}.md`),
|
||||
content: `## ${componentname}`
|
||||
},
|
||||
{
|
||||
filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
|
||||
content: `import { createTest, destroyVM } from '../util';
|
||||
|
|
@ -124,12 +128,14 @@ Files.forEach(file => {
|
|||
// 添加到 nav.config.json
|
||||
const navConfigFile = require('../../examples/nav.config.json');
|
||||
|
||||
navConfigFile[2].groups[navConfigFile[2].groups.length - 1].list.push({
|
||||
path: `/${componentname}`,
|
||||
name: `${chineseName} (${componentname})`,
|
||||
title: componentname === chineseName
|
||||
? componentname
|
||||
: `${componentname} ${chineseName}`
|
||||
Object.keys(navConfigFile).forEach(lang => {
|
||||
let groups = navConfigFile[lang][2].groups;
|
||||
groups[groups.length - 1].list.push({
|
||||
path: `/${componentname}`,
|
||||
title: lang === 'zh-CN' && componentname !== chineseName
|
||||
? `${ComponentName} ${chineseName}`
|
||||
: ComponentName
|
||||
});
|
||||
});
|
||||
|
||||
fileSave(path.join(__dirname, '../../examples/nav.config.json'))
|
||||
|
|
|
|||
|
|
@ -114,9 +114,31 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { use } from 'main/locale';
|
||||
import zhLocale from 'main/locale/lang/zh-CN';
|
||||
import enLocale from 'main/locale/lang/en';
|
||||
use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale);
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.path.split('/')[1] || 'zh-CN';
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
lang() {
|
||||
this.localize();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
localize() {
|
||||
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
|
||||
},
|
||||
|
||||
renderAnchorHref() {
|
||||
if (/changelog/g.test(location.href)) return;
|
||||
const anchors = document.querySelectorAll('h2 a,h3 a');
|
||||
|
|
@ -143,6 +165,7 @@
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.localize();
|
||||
this.renderAnchorHref();
|
||||
this.goAnchor();
|
||||
},
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
|
@ -8,8 +8,8 @@
|
|||
<div class="meta">
|
||||
<div class="description">
|
||||
<slot></slot>
|
||||
<el-tooltip effect="dark" content="前往 jsfiddle.net 运行此实例" placement="right">
|
||||
<el-button size="small" type="primary" @click="goJsfiddle">在线运行</el-button>
|
||||
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
|
||||
<el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<slot name="highlight"></slot>
|
||||
|
|
@ -150,6 +150,8 @@
|
|||
</style>
|
||||
|
||||
<script type="text/babel">
|
||||
import compoLang from '../i18n/component.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -201,6 +203,14 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.path.split('/')[1];
|
||||
},
|
||||
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.lang)[0]['demo-block'];
|
||||
},
|
||||
|
||||
blockClass() {
|
||||
return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
|
||||
},
|
||||
|
|
@ -210,7 +220,7 @@
|
|||
},
|
||||
|
||||
controlText() {
|
||||
return this.isExpanded ? '隐藏代码' : '显示代码';
|
||||
return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'];
|
||||
},
|
||||
|
||||
codeArea() {
|
||||
|
|
|
|||
|
|
@ -74,15 +74,30 @@
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.meta.lang;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
let nav = navConfig[this.lang];
|
||||
this.nav = nav[0].children.concat(nav[1]);
|
||||
nav[2].groups.map(group => group.list).forEach(list => {
|
||||
this.nav = this.nav.concat(list);
|
||||
});
|
||||
},
|
||||
|
||||
updateNav() {
|
||||
this.currentComponent = '/' + this.$route.path.split('/')[2];
|
||||
this.currentComponent = '/' + this.$route.path.split('/')[3];
|
||||
for (let i = 0, len = this.nav.length; i < len; i++) {
|
||||
if (this.nav[i].path === this.currentComponent) {
|
||||
this.currentIndex = i;
|
||||
|
|
@ -94,15 +109,12 @@
|
|||
},
|
||||
|
||||
handleNavClick(direction) {
|
||||
this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
this.$router.push(`/${ this.lang }/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.nav = navConfig[0].children.concat(navConfig[1]);
|
||||
navConfig[2].groups.map(group => group.list).forEach(list => {
|
||||
this.nav = this.nav.concat(list);
|
||||
});
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<p class="footer-main-title">Element 1.0 Hydrogen</p>
|
||||
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">反馈建议</a>
|
||||
<a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">贡献指南</a>
|
||||
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
|
||||
<a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<el-popover
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
width="120"
|
||||
popper-class="footer-popover"
|
||||
trigger="hover">
|
||||
<div class="footer-popover-title">饿了么 UED</div>
|
||||
<div class="footer-popover-title">{{ langConfig.eleme }} UED</div>
|
||||
<img src="../assets/images/qrcode.png" alt="">
|
||||
</el-popover>
|
||||
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
|
||||
|
|
@ -123,3 +123,19 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/babel">
|
||||
import compoLang from '../i18n/component.json';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.path.split('/')[1];
|
||||
},
|
||||
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.lang)[0]['footer'];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,27 @@
|
|||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
&:last-child {
|
||||
cursor: default;
|
||||
margin-left: 34px;
|
||||
span {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.nav-lang {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&.active {
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -72,6 +93,10 @@
|
|||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.active::before {
|
||||
content: '';
|
||||
|
|
@ -101,7 +126,7 @@
|
|||
'header-home': isHome
|
||||
}">
|
||||
<div class="container">
|
||||
<h1><router-link to="/">
|
||||
<h1><router-link :to="`/${ lang }`">
|
||||
<img
|
||||
src="../assets/images/element-logo.svg"
|
||||
alt="element-logo"
|
||||
|
|
@ -111,28 +136,45 @@
|
|||
<li class="nav-item">
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/guide">指南
|
||||
:to="`/${ lang }/guide`">{{ langConfig.guide }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/component">组件
|
||||
:to="`/${ lang }/component`">{{ langConfig.components }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/resource"
|
||||
exact>资源
|
||||
:to="`/${ lang }/resource`"
|
||||
exact>{{ langConfig.resource }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span
|
||||
class="nav-lang"
|
||||
:class="{ 'active': lang === 'zh-CN' }"
|
||||
@click="switchLang('zh-CN')">
|
||||
中文
|
||||
</span>
|
||||
<span> / </span>
|
||||
<span
|
||||
class="nav-lang"
|
||||
:class="{ 'active': lang === 'en-US' }"
|
||||
@click="switchLang('en-US')">
|
||||
En
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import compoLang from '../i18n/component.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -142,13 +184,27 @@
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.path'(val) {
|
||||
this.isHome = val === '/';
|
||||
'$route.path'() {
|
||||
this.isHome = this.$route.name === 'home';
|
||||
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lang() {
|
||||
return this.$route.path.split('/')[1] || 'zh-CN';
|
||||
},
|
||||
langConfig() {
|
||||
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchLang(targetLang) {
|
||||
if (this.lang === targetLang) return;
|
||||
this.$router.push(this.$route.path.replace(this.lang, targetLang));
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isHome = this.$route.path === '/';
|
||||
this.isHome = this.$route.name === 'home';
|
||||
function scroll(fn) {
|
||||
window.addEventListener('scroll', () => {
|
||||
fn();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-alert .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Alert
|
||||
|
||||
Displays important alert messages.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Alert components are non-overlay elements in the page that does not disappear automatically.
|
||||
|
||||
::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizable close button
|
||||
|
||||
Customize the close button as texts or other symbols.
|
||||
|
||||
::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="unclosable alert"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="customized close-text"
|
||||
type="info"
|
||||
close-text="Gotcha">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="alert with callback"
|
||||
type="warning"
|
||||
@close="hello">
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With icon
|
||||
|
||||
Displaying an icon improves readability.
|
||||
|
||||
::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### With description
|
||||
|
||||
Description includes a message with more detailed information.
|
||||
|
||||
::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="with description"
|
||||
type="success"
|
||||
description="This is a description.">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### With icon and description
|
||||
|
||||
::: demo At last, this is an example with both icon and description.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| **title** | title **REQUIRED** | string | — | — |
|
||||
| type | component type | string | success/warning/info/error | info |
|
||||
| description | supportive text | string | — | — |
|
||||
| closable | if closable or not | boolean | — | true |
|
||||
| close-text | customized close button text | string | — | — |
|
||||
| show-icon | if a type icon is displayed | boolean | — | false |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | fires when alert is closed | — |
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<style>
|
||||
.demo-badge.demo-box .el-dropdown {
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Badge
|
||||
|
||||
A number or status mark on buttons and icons.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Displays the amount of new messages.
|
||||
|
||||
:::demo The amount is defined with `value` which accepts `Number` or `String`.
|
||||
|
||||
```html
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="clearfix">
|
||||
comments
|
||||
<el-badge class="mark" :value="12" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="clearfix">
|
||||
replies
|
||||
<el-badge class="mark" :value="3" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
### Max value
|
||||
|
||||
You can customize the max value.
|
||||
|
||||
::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
|
||||
|
||||
```html
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizations
|
||||
|
||||
Displays text content other than numbers.
|
||||
|
||||
:::demo When `value` is a `String`, it can display customized text.
|
||||
|
||||
```html
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
```
|
||||
:::
|
||||
|
||||
### Little red dot
|
||||
|
||||
Use a red dot to mark content that needs to be noticed.
|
||||
|
||||
:::demo Use the attribute `is-dot`. It is a `Boolean`.
|
||||
|
||||
```html
|
||||
<el-badge is-dot class="item">query</el-badge>
|
||||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
```
|
||||
:::
|
||||
|
||||
<style scoped>
|
||||
.share-button {
|
||||
width: 36px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin-top: 8px;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@utils-clearfix;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | display value | string, number | — | — |
|
||||
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
|
||||
| is-dot | if a little dot is displayed | boolean | — | false |
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
## Breadcrumb
|
||||
|
||||
Displays the location of the current page, making it easier to browser back.
|
||||
|
||||
### Basic usage
|
||||
|
||||
|
||||
:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Breadcrumb Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | separator character | string | — | / |
|
||||
|
||||
### Breadcrumb Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
|
||||
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<script>
|
||||
import { addClass } from 'wind-dom/src/class';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isLoading2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(event) {
|
||||
console.log(event);
|
||||
alert('button clicked!');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let thirdDemo = demos[2];
|
||||
addClass(thirdDemo, 'intro-block');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-button {
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-box.demo-button .intro-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-button .intro-block .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-button .intro-block .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-button .intro-block .wrapper {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button
|
||||
|
||||
Commonly used button.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Button provides 7 themes defined by the `type` attribute.
|
||||
|
||||
```html
|
||||
<el-button>Default Button</el-button>
|
||||
<el-button type="primary">Primary Button</el-button>
|
||||
<el-button type="text">Text Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled Button
|
||||
|
||||
The `disableds` attribute determines if the button is disabled.
|
||||
|
||||
:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
|
||||
|
||||
```html
|
||||
<el-button :plain="true" :disabled="true">Default Button</el-button>
|
||||
<el-button type="primary" disabled>Primary Button</el-button>
|
||||
<el-button type="text" disabled>Text Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Color Indication
|
||||
|
||||
Different colors represent different meanings.
|
||||
|
||||
:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<span class="wrapper">
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Hover to display color</span>
|
||||
<span class="wrapper">
|
||||
<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" type="info">Info</el-button>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Icon Button
|
||||
|
||||
Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
|
||||
|
||||
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
|
||||
|
||||
```html
|
||||
<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 type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Button Group
|
||||
|
||||
Displayed as a button group, can be used to group a series of similar operations.
|
||||
|
||||
:::demo Use tag `<el-button-group>` to group your buttons.
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="arrow-left">Previous Page</el-button>
|
||||
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
|
||||
</el-button-group>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Loading Button
|
||||
|
||||
Click the button to load data, then the button displays a loading state.
|
||||
|
||||
:::demo Set `loading` attribute to `true` to display loading state.
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Loading</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
|
||||
|
||||
:::demo Use attribute `size` to set additional sizes with `large`, `small` or `mini`.
|
||||
|
||||
```html
|
||||
<el-button type="primary" size="large">Large Button</el-button>
|
||||
<el-button type="primary">Default Button</el-button>
|
||||
<el-button type="primary" size="small">Small Button</el-button>
|
||||
<el-button type="primary" size="mini">Mini Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | button size | string | large/small/mini | — |
|
||||
| type | button type | string | primary/success/warning/danger/info/text | — |
|
||||
| plain | determine whether it's a plain button | Boolean | true,false | false |
|
||||
| disabled | disable the button | boolean | true, false | false |
|
||||
| icon | button icon, accepts an icon name of Element icon component | string | — | — |
|
||||
| autofocus | same as native button's `autofocus` | boolean | — | false |
|
||||
| native-type | same as native button's `type` | string | button/submit/reset | button |
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<script>
|
||||
import dateUtil from 'main/utils/date'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@utils-clearfix;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
## Card
|
||||
Integrate information in a card container.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Card includes title, content and operations.
|
||||
|
||||
:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="line-height: 36px;">Card name</span>
|
||||
<el-button style="float: right;" type="primary">Operation button</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### Simple card
|
||||
|
||||
The header part can be omitted.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### With images
|
||||
|
||||
Display richer content by adding some configs.
|
||||
|
||||
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
|
||||
| body-style | CSS style of body | object| — | { padding: '20px' } |
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
checkList: ['selected and disabled','Option A'],
|
||||
// checkList2: ['Option A'],
|
||||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
isValid: 'valid'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.demo-box.demo-checkbox {
|
||||
.checkbox {
|
||||
margin-right: 5px;
|
||||
|
||||
& + .checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Checkbox
|
||||
|
||||
A group of options for multiple choices.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Checkbox can be used alone to switch between two states.
|
||||
|
||||
:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` should be true or false -->
|
||||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Disabled State
|
||||
|
||||
Disabled state for checkbox.
|
||||
|
||||
::: demo Set the `disabled` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox v-model="checked1" disabled>Option</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>Option</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox group
|
||||
|
||||
It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
|
||||
|
||||
:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. `label` can modify the description following the button of the checkbox. It is also the value of the checkbox. `label` corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="Option A"></el-checkbox>
|
||||
<el-checkbox label="Option B"></el-checkbox>
|
||||
<el-checkbox label="Option C"></el-checkbox>
|
||||
<el-checkbox label="disabled" disabled></el-checkbox>
|
||||
<el-checkbox label="selected and disabled" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkList: ['selected and disabled','Option A']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | value of the checkbox when used inside a `checkbox-group` | string | — | — |
|
||||
| true-label | value of the checkbox if it's checked | string, number | — | — |
|
||||
| false-label | value of the checkbox if it's not checked | string, number | — | — |
|
||||
| disabled | if the checkbox is disabled | boolean | — | false |
|
||||
| checked | if the checkbox is checked | boolean | — | false |
|
||||
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
|
||||
|
||||
### Checkbox-group Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | Event object |
|
||||
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<style>
|
||||
.demo-color-box {
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
height: 74px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
& .value {
|
||||
font-size: 12px;
|
||||
opacity: 0.69;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.demo-color-box-group {
|
||||
.demo-color-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
.demo-color-box:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.demo-color-box:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
.bg-blue-light {
|
||||
background-color: #58b7ff;
|
||||
}
|
||||
.bg-blue,
|
||||
.bg-info {
|
||||
background-color: #20a0ff;
|
||||
}
|
||||
.bg-blue-dark {
|
||||
background-color: #1d8ce0;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: #13CE66;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #f7ba2a;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #ff4949;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
.bg-black-light {
|
||||
background-color: #324057;
|
||||
}
|
||||
.bg-black-lighter {
|
||||
background-color: #475669;
|
||||
}
|
||||
|
||||
.bg-silver {
|
||||
background-color: #8492a6;
|
||||
}
|
||||
.bg-silver-light {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
.bg-silver-lighter {
|
||||
background-color: #c0ccda;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
.bg-gray-light {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
.bg-gray-lighter {
|
||||
background-color: #eff2f7;
|
||||
}
|
||||
|
||||
.bg-white-dark {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.color-gray {
|
||||
color: #5e6d82;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Color
|
||||
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
|
||||
|
||||
### Main Color
|
||||
|
||||
The main color of Element is bright and friendly blue.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Secondary Color
|
||||
|
||||
Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Neutral Color
|
||||
|
||||
Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
|
||||
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
|
||||
<div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
|
||||
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
|
||||
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
|
||||
<div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
|
||||
<div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
|
||||
<div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
|
||||
<div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
## 自定义主题
|
||||
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
|
||||
|
||||
### 安装工具
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。
|
||||
```shell
|
||||
npm i element-theme -D
|
||||
```
|
||||
|
||||
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
```shell
|
||||
npm i element-theme-default@next -D
|
||||
|
||||
# 从 GitHub
|
||||
npm i https://github.com/ElementUI/theme-default -D
|
||||
```
|
||||
|
||||
### 初始化变量文件
|
||||
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
|
||||
|
||||
```shell
|
||||
node_modules/.bin/et -i [可以自定义变量文件目录]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到了所有变量，它们使用 CSS4 的风格定义。大致结构如下：
|
||||
```css
|
||||
:root {
|
||||
|
||||
/* Colors
|
||||
-------------------------- */
|
||||
--color-primary: #20a0ff;
|
||||
--color-success: #13ce66;
|
||||
--color-warning: #f7ba2a;
|
||||
--color-danger: #ff4949;
|
||||
--color-info: #50BFFF;
|
||||
--color-blue: #2e90fe;
|
||||
--color-blue-light: #5da9ff;
|
||||
--color-blue-lighter: rgba(var(--color-blue), 0.12);
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-grey: #C0CCDA;
|
||||
```
|
||||
|
||||
### 修改变量
|
||||
直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
|
||||
```CSS
|
||||
--color-primary: red;
|
||||
```
|
||||
|
||||
### 编译主题
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
|
||||
```shell
|
||||
node_modules/.bin/et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### 引入自定义主题
|
||||
默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
|
||||
|
||||
```javascript
|
||||
import './theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
### 搭配插件按需引入组件主题
|
||||
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
|
||||
```json
|
||||
{
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 [快速上手](./examples/docs/zh-CN/quickstart.md) 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-date-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DatePicker
|
||||
|
||||
Use Date Picker for date input.
|
||||
|
||||
### Enter Date
|
||||
|
||||
Basic date picker measured by 'day'.
|
||||
|
||||
:::demo The measurement is determined by the `type` attribute. You can enable quick options by creating a `picker-options` object with `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="Pick a day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Picker with quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="date"
|
||||
placeholder="Pick a day"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Other measurements
|
||||
|
||||
You can choose week, month or year by extending the standard date picker component.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Week</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="week"
|
||||
format="Week WW"
|
||||
placeholder="Pick a week">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Month</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="month"
|
||||
placeholder="Pick a month">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Year</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
type="year"
|
||||
placeholder="Pick a year">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Date Range
|
||||
|
||||
Picking a date range is supported.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
placeholder="Pick a range"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
type="daterange"
|
||||
align="right"
|
||||
placeholder="Pick a range"
|
||||
:picker-options="pickerOptions2"
|
||||
style="width: 220px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value6: '',
|
||||
value7: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | if the picker is read only | boolean | — | false |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
|
||||
| format | format of the picker | string | year `yyyy` month `MM` day `dd`，<br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
|
||||
### Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. <br>You can change the picker value by emitting the `pick` event.<br> Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: new Date(),
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: '',
|
||||
value13: '',
|
||||
value14: '',
|
||||
value15: '',
|
||||
value16: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-datetime-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-datetime-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-datetime-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DateTimePicker
|
||||
|
||||
Select date and time in one picker.
|
||||
|
||||
### Date and time
|
||||
|
||||
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="Select date and time">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Date and time range
|
||||
|
||||
:::demo You can select date and time range by setting `type` to `datetimerange`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetimerange"
|
||||
placeholder="Select time range"
|
||||
style="width:350px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="Select time range"
|
||||
align="right"
|
||||
style="width:350px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value3: '',
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | if the picker is read only | boolean | — | false |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
|
||||
| format | format of the picker | string | year `yyyy` month `MM` day `dd`，<br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
|
||||
### Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. <br>You can change the picker value by emitting the `pick` event.<br> Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
dialogVisible: false,
|
||||
dialogTinyVisible: false,
|
||||
dialogFullVisible: false,
|
||||
dialogStubbornVisible: false,
|
||||
dialogTableVisible: false,
|
||||
dialogBindVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.$refs.dialogBind.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-dialog {
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.full-image {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Dialog
|
||||
|
||||
Informs users while preserving the current page state.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Dialog pops up a dialog box, and it's quite customizable.
|
||||
|
||||
:::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog.
|
||||
|
||||
```html
|
||||
<el-button type="text" @click.native="dialogVisible = true">click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog title="tips" v-model="dialogVisible" size="tiny">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click.native="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizations
|
||||
|
||||
The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click.native="dialogTableVisible = true" type="text">open a Table nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" v-model="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="Address"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click.native="dialogFormVisible = true" type="text">open a Form nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" v-model="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="Promotion name" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Zones" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="Please select a zone">
|
||||
<el-option label="Zone No.1" value="shanghai"></el-option>
|
||||
<el-option label="Zone No.2" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click.native="dialogFormVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title of Dialog | string | — | — |
|
||||
| size | size of Dialog | string | tiny/small/large/full | small |
|
||||
| top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class | custom class names for Dialog | string | — | — |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | content of Dialog |
|
||||
| footer | content of the Dialog footer |
|
||||
|
||||
### Methods
|
||||
Each `el-dialog` instance has the following methods that can be used to open/close the instance without explicitly changing the value of `v-model`:
|
||||
|
||||
| Method | Description |
|
||||
|------|--------|
|
||||
| open | open the current instance |
|
||||
| close | close the current instance |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| open | triggers when the Dialog opens | — |
|
||||
| close | triggers when the Dialog closes | — |
|
||||
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
|
||||
& + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #20a0ff;
|
||||
}
|
||||
.el-icon-caret-bottom {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-col-2 {
|
||||
margin: -24px;
|
||||
|
||||
.el-col {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eff2f6;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-dropdown .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Dropdown
|
||||
Toggleable menu for displaying lists of links and actions.
|
||||
|
||||
### Basic usage
|
||||
Hover on the dropdown menu to unfold it for more actions.
|
||||
|
||||
:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it.
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Triggering element
|
||||
|
||||
Use the button to trigger the dropdown list.
|
||||
|
||||
:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four.
|
||||
```html
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown split-button type="primary" @click="handleClick">
|
||||
Dropdown List
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
### How to trigger
|
||||
|
||||
Click the triggering element or hover on it.
|
||||
|
||||
:::demo Use the attribute `trigger`. By default, it is `hover`.
|
||||
|
||||
```html
|
||||
<el-row class="block-col-2">
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">hover to trigger</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">click to trigger</span>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
### Dropdown Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| size | menu button size, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| split-button | whether a button group is displayed | boolean | — | false |
|
||||
| size | component size, refer to `Button` component | string | large, small, mini | — |
|
||||
| menu-align | horizontal alignment | string | start/end | end |
|
||||
| trigger | how to trigger | string | hover/click | hover |
|
||||
|
||||
### Dropdown Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| click | if `split-button` is `true`, triggers when left button is clicked | — |
|
||||
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
|
||||
|
||||
### Dropdown Menu Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| command | a command to be dispatched to Dropdown's `command` callback | string | — | — |
|
||||
| disabled | whether the item is disabled | boolean | — | false |
|
||||
| divided | whether a divider is displayed | boolean | — | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,828 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
var age = parseInt(value, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(age)) {
|
||||
callback(new Error('Please input digits'));
|
||||
} else{
|
||||
if (age < 18) {
|
||||
callback(new Error('Age must be greater than 18'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
var validaePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validaePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
},
|
||||
formStacked: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: '',
|
||||
remark: ''
|
||||
},
|
||||
formAlignRight: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
formAlignLeft: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
options: [
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: 'Please select activity resource', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ required: true, message: 'Please input the password', trigger: 'blur' },
|
||||
{ validator: validaePass }
|
||||
],
|
||||
checkPass: [
|
||||
{ required: true, message: 'Please input the password again', trigger: 'blur' },
|
||||
{ validator: validaePass2 }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: 'Please input the age', trigger: 'blur' },
|
||||
{ validator: checkAge, trigger: 'change' }
|
||||
]
|
||||
},
|
||||
dynamicForm: {
|
||||
domains: [{
|
||||
key: 1,
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
},
|
||||
dynamicRule: {
|
||||
email: [
|
||||
{ required: true, message: 'Please input email address', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input correct email address', 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('Submit');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSubmit3(ev) {
|
||||
this.$refs.dynamicForm.validate(valid => {
|
||||
if (valid) {
|
||||
alert('Submit');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
handleReset2() {
|
||||
this.$refs.ruleForm2.resetFields();
|
||||
},
|
||||
handleValidate(prop, errorMsg) {
|
||||
console.log(prop, errorMsg);
|
||||
},
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
},
|
||||
onRuleFormSubmit() {
|
||||
console.log('onRuleFormSubmit');
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicForm.domains.indexOf(item)
|
||||
if (index !== -1) {
|
||||
this.dynamicForm.domains.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicForm.domains.push({
|
||||
key: this.dynamicForm.domains.length,
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-form {
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-form {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-form-normal {
|
||||
width: 480px;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.demo-form-stacked {
|
||||
width: 270px;
|
||||
|
||||
.el-select .el-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.demo-ruleForm {
|
||||
width: 480px;
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Form
|
||||
|
||||
Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.
|
||||
|
||||
### Basic form
|
||||
|
||||
It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`.
|
||||
|
||||
:::demo In each `form` component, you need a `form-item` field to be the container of your input item.
|
||||
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery">
|
||||
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Inline form
|
||||
|
||||
When the vertical space is limited and the form is relatively simple, you can put it in one line.
|
||||
|
||||
:::demo Set the `inline` attribute to `true` and the form will be inline.
|
||||
|
||||
```html
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
|
||||
</el-form-item><el-form-item>
|
||||
<el-select v-model="formInline.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item><el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alignment
|
||||
|
||||
Depending on your design, there are several different ways to align your label element.
|
||||
|
||||
#### Top
|
||||
|
||||
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
|
||||
|
||||
```html
|
||||
<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="formStacked.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-input v-model="formStacked.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formStacked.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formStacked: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Right
|
||||
|
||||
:::demo When `label-position` is omitted, labels will align to the right
|
||||
|
||||
```html
|
||||
<el-form :model="formAlignRight" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="formAlignRight.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Promote area">
|
||||
<el-input v-model="formAlignRight.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Form of activity">
|
||||
<el-input v-model="formAlignRight.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formAlignRight: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Left
|
||||
|
||||
:::demo When `label-position` is set to `top`, labels will align to the left.
|
||||
|
||||
```html
|
||||
<el-form :model="formAlignLeft" label-position="left" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="formAlignLeft.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Promotion area">
|
||||
<el-input v-model="formAlignLeft.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formAlignLeft.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formAlignLeft: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Validation
|
||||
|
||||
Form component allows you to verify your data, helping you find and correct errors.
|
||||
|
||||
:::demo Just add the `rule` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery">
|
||||
<el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="Sponsorship"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">Create</el-button>
|
||||
<el-button @click="handleReset">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: 'Please select activity resource', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleReset() {
|
||||
this.$refs.ruleForm.resetFields();
|
||||
},
|
||||
handleSubmit(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom validation rules
|
||||
|
||||
:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit2">Submit</el-button>
|
||||
<el-button @click="handleReset2">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
var age = parseInt(value, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(age)) {
|
||||
callback(new Error('Please input digits'));
|
||||
} else{
|
||||
if (age < 18) {
|
||||
callback(new Error('Age must be greater than 18'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ required: true, message: 'Please input the password', trigger: 'blur' },
|
||||
{ validator: validatePass }
|
||||
],
|
||||
checkPass: [
|
||||
{ required: true, message: 'Please input the password again', trigger: 'blur' },
|
||||
{ validator: validatePass2 }
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: 'Please input the age', trigger: 'blur' },
|
||||
{ validator: checkAge, trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleReset2() {
|
||||
this.$refs.ruleForm2.resetFields();
|
||||
},
|
||||
handleSubmit2(ev) {
|
||||
this.$refs.ruleForm2.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Delete or add form items dynamically
|
||||
|
||||
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
|
||||
|
||||
```html
|
||||
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
|
||||
<el-form-item prop="email" label="Email">
|
||||
<el-input v-model="dynamicForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in dynamicForm.domains"
|
||||
:label="'Domain' + index"
|
||||
:key="domain.key"
|
||||
:prop="'domains:' + index"
|
||||
:rules="{
|
||||
type: 'object', required: true,
|
||||
fields: {
|
||||
value: { required: true, message: 'domain can not be null', trigger: 'blur' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">Delete</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit3">Submit</el-button>
|
||||
<el-button @click="addDomain">New domain</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicForm: {
|
||||
domains: [{
|
||||
key: 1,
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
},
|
||||
dynamicRule: {
|
||||
email: [
|
||||
{ required: true, message: 'Please input email address', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit3(ev) {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicForm.domains.indexOf(item)
|
||||
if (index !== -1) {
|
||||
this.dynamicForm.domains.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicForm.domains.push({
|
||||
key: this.dynamicForm.domains.length,
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| model| data of form component | object | — | — |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| inline | whether the form is inline | boolean | — | false |
|
||||
| label-position | position of label | string | left/right/top | right |
|
||||
| label-width | width of label, and all form items will inherit from `Form` | string | — | — |
|
||||
| label-suffix | suffix of the label | string | — | — |
|
||||
|
||||
### Form Methods
|
||||
|
||||
| Method | Description |
|
||||
| ---- | ---- |
|
||||
| validate(cb) | the method to validate the whole form |
|
||||
| validateField(prop, cb) | the method to validate a certain form item |
|
||||
| resetFields | reset all the fields and remove validation result |
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| prop | a key of `model` | string | keys of model that passed to `form` |
|
||||
| label | label | string | — | — |
|
||||
| label-width | width of label, e.g. '50px' | string | — | — |
|
||||
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# Components Document
|
||||
|
||||
<script>
|
||||
import { addClass } from 'examples/dom/class.js';
|
||||
|
||||
module.exports = {
|
||||
ready() {
|
||||
addClass(this.$el.parentNode, 'no-toc')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
## 国际化
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
|
||||
```javascript
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```javascript
|
||||
// 按需引入 Element
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// 设置语言
|
||||
locale.use(lang)
|
||||
|
||||
// 引入组件
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
|
||||
|
||||
**webpack.config.js**
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
- 汉语
|
||||
- 英语
|
||||
- 德语
|
||||
- 葡萄牙语
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script>
|
||||
var iconList = require('examples/icon.json');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: iconList
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
font-size: 24px;
|
||||
color: #8492a6;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo-icon .source > button {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon-list li {
|
||||
float: left;
|
||||
width: 16.66%;
|
||||
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;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
color: #99a9bf;
|
||||
}
|
||||
& i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
color: #8492a6;
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(92, 182, 255);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon
|
||||
|
||||
Element provides a set of common icons.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Just assign the class name to `el-icon-iconName`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Icons
|
||||
|
||||
<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,110 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1,
|
||||
num3: 5
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-input-number {
|
||||
.el-input-number + .el-input-number {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## InputNumber
|
||||
|
||||
Input numerical values with a customizable range.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.num1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num2" :disabled="true"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num2: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps
|
||||
|
||||
Allows you to define incremental steps.
|
||||
|
||||
:::demo Add `step` attribute to set the step.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num3" :step="2"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num3: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----| ----| ---| ----| -----|
|
||||
|value | binding value| number | — | — |
|
||||
|min | the minimum allowed value | number | — | 0 |
|
||||
|max | the maximum allowed value | number | — | `Infinity` |
|
||||
|step | incremental step | number | — | 1 |
|
||||
|size | size of the component | string | large/small| — |
|
||||
|disabled| whether the component is disabled | boolean | — | false |
|
||||
|
||||
### Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ---- | -----|
|
||||
|change | triggers when the value changes | value after change |
|
||||
|
|
@ -0,0 +1,518 @@
|
|||
<script>
|
||||
var Vue = require('vue');
|
||||
Vue.component('my-item', {
|
||||
functional: true,
|
||||
render: function (h, ctx) {
|
||||
var item = ctx.props.item;
|
||||
return h('li', ctx.data, [
|
||||
h('div', { attrs: { class: 'value' } }, [item.value]),
|
||||
h('span', { attrs: { class: 'link' } }, [item.link])
|
||||
]);
|
||||
},
|
||||
props: {
|
||||
item: { type: Object, required: true }
|
||||
}
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
input: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: '',
|
||||
textarea: '',
|
||||
select: '',
|
||||
state1: '',
|
||||
state2: '',
|
||||
state3: '',
|
||||
state4: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
|
||||
cb(results);
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
console.log(results);
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-input {
|
||||
.el-select .el-input {
|
||||
width: 100px;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
.el-input {
|
||||
width: 180px;
|
||||
|
||||
& + .el-input,
|
||||
& + .el-textarea {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.el-textarea {
|
||||
width: 414px;
|
||||
}
|
||||
.el-input-group {
|
||||
min-width: 260px;
|
||||
}
|
||||
.el-input-group + .el-input-group {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.el-autocomplete {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-input {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 10px 5px;
|
||||
}
|
||||
.el-autocomplete {
|
||||
margin: 10px 0 0;
|
||||
|
||||
.el-input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tac {
|
||||
text-align: center;
|
||||
|
||||
.el-autocomplete {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.el-row.border-grid {
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
}
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Input
|
||||
|
||||
Input data using mouse or keyboard.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input">
|
||||
</el-input>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
::: demo Disable the Input with the `disabled` attribute.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input1"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input with icon
|
||||
|
||||
Add an icon to indicate input type.
|
||||
|
||||
::: demo You can add an icon at the end of Input by setting the `icon` attribute.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
icon="time"
|
||||
v-model="input2"
|
||||
@click="handleIconClick">
|
||||
</el-input>
|
||||
```
|
||||
:::
|
||||
|
||||
### Textarea
|
||||
|
||||
Resizable for entering multiple lines of text information.
|
||||
|
||||
::: demo Add attribute `type="textarea"` to change `input` into native `textarea`.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Please input"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
```
|
||||
### Mixed input
|
||||
|
||||
Prepend or append an element, generally a label or a button.
|
||||
|
||||
::: demo Use `slot` to distribute elements that prepend or append to Input.
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-input placeholder="Please input" v-model="input5" style="width: 300px;">
|
||||
<el-select v-model="select" slot="prepend">
|
||||
<el-option label="restaurant" value="1"></el-option>
|
||||
<el-option label="order number" value="2"></el-option>
|
||||
<el-option label="tel" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="search"></el-button>
|
||||
</el-input>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||||
```html
|
||||
<div class="inline-input">
|
||||
<el-input
|
||||
size="large"
|
||||
placeholder="Please input"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Please input"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Please input"
|
||||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Auto complete
|
||||
|
||||
You can get some recommended tips based on the current input.
|
||||
|
||||
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
||||
```html
|
||||
<el-row class="inline-input border-grid">
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">list suggestions when activated</div>
|
||||
<el-autocomplete
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12" class="tac">
|
||||
<div class="text">list suggestions on input</div>
|
||||
<el-autocomplete
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state1: '',
|
||||
state2: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return suggestions
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom template
|
||||
|
||||
Customize how suggestions are displayed.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
class="my-autocomplete"
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
custom-item="my-item"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
|
||||
<script>
|
||||
var Vue = require('vue');
|
||||
Vue.component('my-item', {
|
||||
functional: true,
|
||||
render: function (h, ctx) {
|
||||
var item = ctx.props.item;
|
||||
return h('li', ctx.data, [
|
||||
h('div', { attrs: { class: 'value' } }, [item.value]),
|
||||
h('span', { attrs: { class: 'link' } }, [item.link])
|
||||
]);
|
||||
},
|
||||
props: {
|
||||
item: { type: Object, required: true }
|
||||
}
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? link.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return recommended data
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Remote search
|
||||
|
||||
Search data from server-side.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input API
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----| ----| ----| ---- | ----- |
|
||||
|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
|
||||
|value| binding value | string/number| — | — |
|
||||
|maxlength| maximum Input text length| number| — | — |
|
||||
|minlength| minimum Input text length| number | — | — |
|
||||
|placeholder| placeholder of Input| string | — | — |
|
||||
|disabled | whether Input is disabled | boolean | — | false |
|
||||
|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
|
||||
|icon | icon name | string | — | — |
|
||||
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
|
||||
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false |
|
||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
|max | same as `max` in native input | * | — | — |
|
||||
|min | same as `min` in native input | * | — | — |
|
||||
|autofocus | same as `autofocus` in native input | boolean | — | false |
|
||||
|form | same as `form` in native input | string | — | — |
|
||||
|
||||
|
||||
### Input Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|click | triggers when the icon inside Input is clicked | event object |
|
||||
|
||||
### Autocomplete API
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
|----| ----| ----| ---- | -----|
|
||||
|placeholder| the placeholder of Autocomplete| string | — | — |
|
||||
|disabled | whether Autocomplete is disabled | boolean | — | false|
|
||||
|value | binding value | string | — | — |
|
||||
|custom-item | component name of your customized suggestion list item | string | — | — |
|
||||
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
||||
|
||||
### Autocomplete Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|select | triggers when a suggestion is clicked | suggestion being clicked |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
## 安装
|
||||
|
||||
### npm 安装
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
|
||||
```shell
|
||||
npm i element-ui@next -D
|
||||
```
|
||||
**由于当前还处于 rc 阶段，所以仍然需要通过 @next 的方式获取最新版本。**
|
||||
|
||||
### CDN
|
||||
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0-rc.8/lib/theme-default/index.css">
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0-rc.8/lib/index.js"></script>
|
||||
```
|
||||
|
||||
### Hello world
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0-rc.8/lib/theme-default/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click.native="visible = true">按钮</el-button>
|
||||
<el-dialog v-model="visible" title="Hello world">
|
||||
<p>欢迎使用 Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.0.0-rc.8/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<style>
|
||||
.demo-layout {
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout
|
||||
|
||||
Quickly and easily create layouts with the basic 24-column.
|
||||
|
||||
### Basic layout
|
||||
|
||||
Create basic grid layout using columns.
|
||||
|
||||
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Column spacing
|
||||
|
||||
Column spacing is supported.
|
||||
|
||||
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Hybrid layout
|
||||
|
||||
Form a more complex hybrid layout by combining the basic 1/24 columns.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Column offset
|
||||
|
||||
You can specify column offsets.
|
||||
|
||||
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
|
||||
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alignment
|
||||
|
||||
Flexible alignment of columns.
|
||||
|
||||
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Row Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| gutter | grid spacing | number | — | 0 |
|
||||
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
|
||||
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
|
||||
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
|
||||
|
||||
### Col Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| **span** | number of column the grid spans, **required** | number | — | — |
|
||||
| offset | number of spacing on the left side of the grid | number | — | 0 |
|
||||
| push | number of columns that grid moves to the right | number | — | 0 |
|
||||
| pull | number of columns that grid moves to the left | number | — | 0 |
|
||||
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<style>
|
||||
.demo-loading .el-table {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading: true,
|
||||
loading2: true,
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Loading
|
||||
|
||||
Show animation while loading data.
|
||||
|
||||
### Loading inside a container
|
||||
|
||||
Displays animation in a container (such as a table) while loading data.
|
||||
|
||||
:::demo We provide a custom directive `v-loading`. You just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading.body="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Loading text
|
||||
|
||||
You can customize a text message.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
element-loading-text="Loading..."
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Full screen loading
|
||||
|
||||
Show a full screen animation while loading data.
|
||||
|
||||
:::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click.native="openFullScreen"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
Full screen loading for 3 seconds
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<style>
|
||||
.demo-box.demo-menu {
|
||||
.el-menu-demo {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.el-menu-vertical-demo {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #e0e6ed;
|
||||
margin: 35px -24px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.tac {
|
||||
text-align: center;
|
||||
|
||||
.el-menu-vertical-demo {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleopen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleclose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleselect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## NavMenu
|
||||
|
||||
Menu that provides navigation for your website.
|
||||
|
||||
### Top bar
|
||||
|
||||
Top bar NavMenu can be used in a variety of scenarios.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3">Orders</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleselect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3">Orders </el-menu-item>
|
||||
</el-menu>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Side bar
|
||||
|
||||
Vertical NavMenu with sub-menus.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="8">
|
||||
<h5>With icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item one</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
|
||||
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>Without icons</h5>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" theme="dark">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">Navigator One</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item two</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">Navigator Two</el-menu-item>
|
||||
<el-menu-item index="3">Navigator Three</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h5>Groups</h5>
|
||||
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
|
||||
<el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
|
||||
<el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
|
||||
<!-- <el-submenu index="5">
|
||||
<template slot="title">Navigator Five</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="5-1">item one</el-menu-item>
|
||||
<el-menu-item index="5-2">item two</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="5-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-submenu> -->
|
||||
</el-menu-item-group>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Menu Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | menu display mode | string | horizontal/vertical | vertical |
|
||||
| theme | theme color | string | light/dark | light |
|
||||
| default-active | index of currently active menu | string | — | — |
|
||||
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
|
||||
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
|
||||
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover |
|
||||
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false |
|
||||
|
||||
|
||||
### Menu Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu |
|
||||
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
|
||||
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
|
||||
|
||||
### SubMenu Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | unique identification | string | — | — |
|
||||
|
||||
### Menu-Item Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | unique identification | string | — | — |
|
||||
| route | Vue Router object | object | — | — |
|
||||
|
||||
### Menu-Group Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | group title | string | — | — |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('This is a message', 'Title', {
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
message: 'Delete completed',
|
||||
type: 'success'
|
||||
});
|
||||
}, 200);
|
||||
}).catch(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
message: 'Delete canceled',
|
||||
type: 'info'
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$prompt('Please input your email', 'Tips', {
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: 'Invalid Email'
|
||||
}).then(({ value }) => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Your email is:' + value
|
||||
});
|
||||
}, 200);
|
||||
}).catch(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
message: 'This is a message',
|
||||
showCancelButton: true
|
||||
}).then(action => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## MessageBox
|
||||
|
||||
A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.
|
||||
|
||||
### Alert
|
||||
|
||||
Alert interrupts user operation until the user confirms.
|
||||
|
||||
:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('This is a message', 'Title', {
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Confirm
|
||||
|
||||
Confirm is used to ask users' confirmation.
|
||||
|
||||
:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open2">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Delete completed'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Prompt
|
||||
|
||||
Prompt is used when user input is required.
|
||||
|
||||
:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open3">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$prompt('Please input your e-mail', 'Tip', {
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: 'Invalid Email'
|
||||
}).then(value => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Your email is:' + value
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization
|
||||
|
||||
Can be customized to show various content.
|
||||
|
||||
:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text. The confirm button also has these fields. A complete list of fields can be found at the end of this documentation.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click.native="open4">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
message: 'This is a message',
|
||||
showCancelButton: true
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
Element has added the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a vue instance you can call `MessageBox` like what we did in this page.
|
||||
|
||||
### Local import
|
||||
|
||||
Import `MessageBox`:
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
```
|
||||
|
||||
The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`.
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title of the MessageBox | string | — | — |
|
||||
| message | content of the MessageBox | string | — | — |
|
||||
| type | message type, used for icon display | string | success/info/<br>warning/error | — |
|
||||
| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
|
||||
| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
|
||||
| showConfirmButton | whether to show a confirm button | boolean | — | true |
|
||||
| cancelButtonText | text content of cancel button | string | — | Cancel |
|
||||
| confirmButtonText | text content of confirm button | string | — | OK |
|
||||
| cancelButtonClass | custom class name of cancel button | string | — | — |
|
||||
| confirmButtonClass | custom class name of confirm button | string | — | — |
|
||||
| showInput | whether to show an input | boolean | — | false (true when called with prompt) |
|
||||
| inputPlaceholder | placeholder of input | string | — | — |
|
||||
| inputPattern | regexp for the input | regexp | — | — |
|
||||
| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
|
||||
| inputErrorMessage | error message when validation fails | string | — | Illegal input |
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message');
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$message({
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('Oops, this is a error message.');
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-message {
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Message
|
||||
|
||||
Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Displays at the top, and disappears after 3 seconds.
|
||||
|
||||
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string as parameter, and it will be shown as the main body.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open">Show message</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Types
|
||||
|
||||
Used to show the feedback of Success, Warning, Message and Error activities.
|
||||
|
||||
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open2">success</el-button>
|
||||
<el-button :plain="true" @click.native="open3">warning</el-button>
|
||||
<el-button :plain="true" @click.native="open">message</el-button>
|
||||
<el-button :plain="true" @click.native="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('Oops, this is a error message.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Closable
|
||||
|
||||
A close button can be added.
|
||||
|
||||
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click.native="open5">message</el-button>
|
||||
<el-button :plain="true" @click.native="open6">success</el-button>
|
||||
<el-button :plain="true" @click.native="open7">warning</el-button>
|
||||
<el-button :plain="true" @click.native="open8">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
|
||||
|
||||
### Local import
|
||||
|
||||
Import `Message`:
|
||||
|
||||
```javascript
|
||||
import { Message } from 'element-ui';
|
||||
```
|
||||
|
||||
In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
|
||||
|
||||
### Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| message | message text | string | — | — |
|
||||
| type | message type | string | success/warning/info/error | info |
|
||||
| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
|
||||
| showClose | whether to show a close button | boolean | — | false |
|
||||
| onClose | callback function when closed with the message instance as the parameter | function | — | — |
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'Title',
|
||||
message: 'This is a reminder'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: 'This is a message that does not automatically close',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification is closed');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-notification {
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Notification
|
||||
|
||||
Displays a global notification message at the upper right corner of the page.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open2">
|
||||
Won't close automatically
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$notify({
|
||||
title: 'Title',
|
||||
message: 'This is a reminder'
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: 'This is a message that does not automatically close',
|
||||
duration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With types
|
||||
|
||||
We provide four types: success, warning, info and error.
|
||||
|
||||
::: demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open3">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open4">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open5">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click.native="open6">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
|
||||
|
||||
### Local import
|
||||
|
||||
Import `Notification`:
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
```
|
||||
|
||||
In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`.
|
||||
|
||||
### Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| message | description text | string | — | — |
|
||||
| type | notification type | string | success/warning/info/error | — |
|
||||
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
|
||||
| onClose | callback function when closed | function | — | — |
|
||||
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
## Pagination
|
||||
|
||||
If you have too much data to display in one page, use pagination.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have few pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have more than 7 pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Small Pagination
|
||||
|
||||
Use small pagination in the case of limited space.
|
||||
|
||||
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### More elements
|
||||
|
||||
Add more modules based on your scenario.
|
||||
|
||||
:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Total item count</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Change page size</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Jump to</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">All combined</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`${val} items per page`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`${val} items per page`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let firstDemo = demos[0];
|
||||
let lastDemo = demos[demos.length - 1];
|
||||
firstDemo.classList.add('first');
|
||||
lastDemo.classList.add('last');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-pagination .source.first {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-pagination .first .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
float: left;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .first .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-pagination .source.last {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-pagination .last .block {
|
||||
padding: 30px 24px;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration + .el-pagination {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin: 5px 20px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | whether to use small pagination | boolean | — | false |
|
||||
| page-size | item count of each page | number | — | 10 |
|
||||
| total | total item count | number | — | — |
|
||||
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
|
||||
| current-page | current page number | number | — | 1 |
|
||||
| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| size-change | triggers when `page-size` changes | the new `page-size` |
|
||||
| current-change | triggers when `current-page` changes | the new `current-page` |
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
gridData2: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$positive: true
|
||||
}],
|
||||
gridData3: [{
|
||||
tag: 'Home',
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-08',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-06',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-07',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: [],
|
||||
model: ''
|
||||
};
|
||||
},
|
||||
|
||||
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 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Popover
|
||||
|
||||
### Basic usage
|
||||
|
||||
Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
|
||||
|
||||
:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>Hover to activate</el-button>
|
||||
<el-button v-popover:popover2>Click to activate</el-button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Focus to activate</el-button>
|
||||
</el-popover>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested information
|
||||
|
||||
Other components can be nested in popover. Following is an example of nested table.
|
||||
|
||||
:::demo replace the `content` attribute with a default `slot`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="date"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="name"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="address"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested operation
|
||||
|
||||
Of course, you can nest other operations. It's more light-weight than using a dialog.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click.native="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click.native="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | how the popover is triggered | string | click/focus/hover | click |
|
||||
| title | popover title | string | — | — |
|
||||
| content | popover content, can be replaced with a default `slot` | string | — | — |
|
||||
| width | popover width | string, number | — | Min width 150px |
|
||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value(v-model) | whether popover is visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | fade-in-linear |
|
||||
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| — | text content of popover |
|
||||
| reference | HTML element that triggers popover |
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
## Progress
|
||||
|
||||
Progress is used to show the progress of current operation, and inform the user the current status.
|
||||
|
||||
### Linear progress bar (external percentage)
|
||||
|
||||
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Linear progress bar (internal percentage)
|
||||
|
||||
In this case the percentage takes no additional space.
|
||||
|
||||
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Circular progress bar
|
||||
|
||||
:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --- | ---- | ---- | ---- | ---- |
|
||||
| **percentage** | percentage, **required** | number | 0-100 | 0 |
|
||||
| type | the type of progress bar | string | line/circle | line |
|
||||
| stroke-width | the width of progress bar | number | — | 6 |
|
||||
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
|
||||
| status | the current status of progress bar | string | success/exception | — |
|
||||
| width | the canvas width of circle progress bar | number | — | 126 |
|
||||
| show-text | whether to show percentage | boolean | — | true |
|
||||
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
## Quickstart
|
||||
|
||||
Element UI is a background components library that help you develop your background projects faster and easier.
|
||||
|
||||
### Install
|
||||
|
||||
```bash
|
||||
$ npm install element-ui@next --save
|
||||
```
|
||||
|
||||
### Register components
|
||||
|
||||
Import all element-ui components
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import 'element-ui/lib/theme-default/index.css'
|
||||
|
||||
// use Vue.use to register a plugin
|
||||
Vue.use(element)
|
||||
```
|
||||
|
||||
Or just import some components you need
|
||||
|
||||
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
|
||||
|
||||
|
||||
```javascript
|
||||
import {
|
||||
Select,
|
||||
Button
|
||||
// ...
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.component(Select.name, Select)
|
||||
Vue.component(Button.name, Button)
|
||||
```
|
||||
And it will be converted to
|
||||
|
||||
```javascript
|
||||
import Select from 'element-ui/lib/select';
|
||||
import 'element-ui/lib/theme-default/select.css';
|
||||
import Button from 'element-ui/lib/button';
|
||||
import 'element-ui/lib/theme-default/button.css';
|
||||
|
||||
Vue.component(Select.name, Select);
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
### Use babel-plugin-component
|
||||
|
||||
Configure `.bablerc`
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": ["xxx", ["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-default"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
### Import components by \<style\> and \<script\> tags
|
||||
|
||||
Be careful, **import vue.js before element**, just like if you want to use a jquery-plugin, first of all, you must import jquery.
|
||||
|
||||
This is a [demo](https://codepen.io/QingWei-Li/pen/ozYpNA) about how to use it by cdn, and we use unpkg cdn in this case.
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
|
||||
|
||||
<!-- body -->
|
||||
|
||||
<!--import script -->
|
||||
<!-- you need import Vue.js before import element -->
|
||||
<script src="//unpkg.com/vue@2.0.0-rc.6/dist/vue.js"></script>
|
||||
<script src="//unpkg.com/element-ui@1.0.0-rc.4/lib/index.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
radio1: 'selected and disabled',
|
||||
radio2: 3,
|
||||
radio3: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio
|
||||
|
||||
A single selection is made in a set of alternatives.
|
||||
|
||||
### How to use
|
||||
|
||||
As the option is visible by default, there should not be too many options. If too many options, the Select component is recommended.
|
||||
|
||||
Creating a radio component is easy, you just need to bind a variable by `v-bind` directive, and it means that the value of bound variable is equals to the value of `label` of which the `radio` you select. The type of `label` is `String` or `Number`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
|
||||
<el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
`disabled` attribute is used to disable radio button. You just need to add `disabled` attribute, and default value is `true`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="diabaled">optionA</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio button group
|
||||
|
||||
Applicable to scenes selecting from multiple mutex options.
|
||||
|
||||
Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable in `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event to respond to the change of bound value.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="3">optionA</el-radio>
|
||||
<el-radio :label="6">optionB</el-radio>
|
||||
<el-radio :label="9">optionC</el-radio>
|
||||
</el-radio-group>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Button style
|
||||
|
||||
Radio with button styles.
|
||||
|
||||
You just need to change `<el-radio>` element into `<el-radio-button>` element. Element also provides `size` attribute for the buttons array. There are two options: `large` and `small` if not default.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="New York" size="small"></el-radio-button>
|
||||
<el-radio-button label="Washington" size="large"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Radio Attributes
|
||||
|
||||
Attribute | Description | Type | options | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
label | the value of radio | string, number | --- | ---
|
||||
disabled | whether disabled or not | boolean | --- | false
|
||||
|
||||
### Radio-group Attributes
|
||||
|
||||
Attribute | Description | Type | options | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
size | the size of radio button | string | large, small | ---
|
||||
|
||||
### Radio-group Events
|
||||
|
||||
Event | Description | callback parameters
|
||||
--- | --- | ---
|
||||
change | event triggered when the bound variable changes | the label value of the radio which you select
|
||||
|
||||
### Radio-button Attributes
|
||||
|
||||
Attribute | Description | Type | options | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
label | the value of radio | string, number | --- | ---
|
||||
disabled | whether disabled or not | boolean | --- | false
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: 3.7
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let firstDemo = document.querySelector('.source');
|
||||
firstDemo.style.padding = '0';
|
||||
firstDemo.style.display = 'flex';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-rate .block {
|
||||
display: inline-block;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-rate .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Rate
|
||||
|
||||
Rate component
|
||||
|
||||
### How to use
|
||||
|
||||
:::demo This component separate rate into three different levels and add colors to different rate (there is no color by default). Add colors by attribute `colors`. And using `low-threshold` and `high-threshold` to set thrasholds between different levels
|
||||
|
||||
``` html
|
||||
<div class="block">
|
||||
<span class="demonstration">no color by default</span>
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">color for different levels</span>
|
||||
<el-rate
|
||||
v-model="value2"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Help Text
|
||||
|
||||
Using help text to indicate the rate
|
||||
|
||||
:::demo Add attribute `show-text` to the component to display help text at the right side. The help texts for each rate can be defined by `texts`. `texts` is array, its length should be `max`.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
show-text>
|
||||
</el-rate>
|
||||
```
|
||||
:::
|
||||
|
||||
### Additional Icon
|
||||
|
||||
You can use different icons to distinguish different rate components.
|
||||
|
||||
:::demo You can customize the icons for different level by attribute `icon-classes`. Following example also uses `void-icon-class` to set the icon when rate is empty.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
```
|
||||
:::
|
||||
|
||||
### Read-only
|
||||
|
||||
Only display the rate and allow to set half star.
|
||||
|
||||
:::demo Use attribute `disabled` to make the component read-only. Meanwhile, add `show-text` to display the rate value at the right side. Additionally, you can use attribute `text-template` to create a template, it contains a string `{value}`, and `{value}` will be converted to rate value.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
disabled
|
||||
show-text
|
||||
text-color="#ff9900"
|
||||
text-template="{value}">
|
||||
</el-rate>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| max | Max rate | number | — | 5 |
|
||||
| disabled | Read-only | boolean | — | false |
|
||||
| allow-half | Allow set half star or not | boolean | — | false |
|
||||
| low-threshold | Threshold value for low and medium level，this is value itself will be in low level | number | — | 2 |
|
||||
| high-threshold | Threshold value for medium and high level，this is value itself will be in high level | number | — | 4 |
|
||||
| colors | Color array for icon, it should contain 3 colors, each one for a level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
|
||||
| void-color | Color of unselected icon | string | — | #C6D1DE |
|
||||
| disabled-void-color | Color of unselected read-only icon | string | — | #EFF2F7 |
|
||||
| icon-classes | Array of class names of icon, it should contain 3 elements，each of them is associated with a rate level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
|
||||
| void-icon-class | The class name of unselected icon | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | The class name of unselected read-only icon | string | — | el-icon-star-on |
|
||||
| show-text | Display help text or not | boolean | — | false |
|
||||
| text-color | Color of help text | string | — | 1F2D3D |
|
||||
| texts | Help text array | array | — | ['Bad', 'Disappoint', 'Normal', 'Satisfy', 'Surprise'] |
|
||||
| text-template | Help text template when the component is read-only| string | — | {value} |
|
||||
|
||||
### Events
|
||||
| Event | Description | Callback |
|
||||
|---------- |-------- |---------- |
|
||||
| change | Trigerred when rate value is changed | value after changing |
|
||||
|
|
@ -0,0 +1,613 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
options2: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
options3: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}]
|
||||
}, {
|
||||
label: 'City Name',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
options4: [],
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: [],
|
||||
value6: '',
|
||||
value7: [],
|
||||
value8: '',
|
||||
value9: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.list = this.states.map(item => { return { value: item, label: item }; });
|
||||
},
|
||||
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-select .el-select {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Select
|
||||
|
||||
|
||||
When there are too many options, use the drop-down menu to display and select the content.
|
||||
|
||||
### How to use
|
||||
|
||||
Basic radio that can be used in many scenarios.
|
||||
|
||||
:::demo The value of `v-model` is the value attribute of `el-option` that is currently selected.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With disabled options
|
||||
|
||||
:::demo Setting the value of `disabled` in `el-option` to true to disable this option.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2">
|
||||
<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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled state
|
||||
|
||||
The disabled state of select component.
|
||||
|
||||
:::demo Set `disabled` attribute for `el-select` to set it disabled.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" 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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With radio that can reset the select
|
||||
|
||||
With reset radio, you can reset the select component to default state.
|
||||
|
||||
:::demo Setting `clearable` attribute for `el-select` can reset the select component. What you should notice is that `clearable` attribute is only for radio select component.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Basic checkbox
|
||||
|
||||
Basic checkbox can be used in many scenarios, which uses Tag to show the selected option.
|
||||
|
||||
:::demo Set `multiple` attribute for `el-select` to enable checkbox mode, and then the value of `v-model` is the array of selected options.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" 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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom templates
|
||||
|
||||
You can customize the alternative options.
|
||||
|
||||
:::demo Insert the customized HTML templates into the slot of `el-option`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Grouping
|
||||
|
||||
Display the alternatives in a grouping manner.
|
||||
|
||||
:::demo Use `el-option-group` to group the alternatives, its `label` attribute stands for the name of the group.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7">
|
||||
<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: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}]
|
||||
}, {
|
||||
label: 'City name',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Searchable
|
||||
|
||||
You can use the search function to find options quickly.
|
||||
|
||||
:::demo Add `filterable` attribute for `el-select` to enable search function. By default, select will find all the options whose `label` attribute contains the input value. If you want to use other search logic, you can pass the `filter-method`. `filter-method` is a `Function` that will be called when the input value changed, and its parameter is the current input value.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" 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: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Remote Search
|
||||
|
||||
Search the data from the server, and enter the keyword to find.
|
||||
|
||||
:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function`, that will be called when the input value changed, and its parameter is the current input value. What you should notice is that if `el-option` is rendered by the `v-for` directive, and you should add `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Select Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| multiple | Whether in checkbox mode | boolean | — | false |
|
||||
| disabled | Whether disabled or not | boolean | — | false |
|
||||
| clearable | Whether the Options can be cleared when single selected | boolean | — | false |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| placeholder | placeholder | string | — | Please make a choice |
|
||||
| filterable | Whether searchable | boolean | — | false |
|
||||
| filter-method | customized filter method | function | — | — |
|
||||
| remote | Whether remote search | boolean | — | false |
|
||||
| remote-method | the method for remote search | function | — | — |
|
||||
| loading | Whether loading from the remote server | boolean | — | false |
|
||||
|
||||
### Select Events
|
||||
| Event name | Description | Call back Params |
|
||||
|---------|---------|---------|
|
||||
| change | Trigged when the selected value changes | current selected value |
|
||||
|
||||
### Option Group Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | The name of the group | string | — | — |
|
||||
| disabled | Whether to disable all the Options in this group | boolean | — | false |
|
||||
|
||||
### Option Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | the value of Option | string/number/object | — | — |
|
||||
| label | the label of Option, by default is the same as `value` | string/number | — | — |
|
||||
| disabled | Whether to disable the Option or not | boolean | — | false |
|
||||
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 0,
|
||||
value4: 0,
|
||||
value5: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-slider .source {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .demonstration + .el-slider {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Slider
|
||||
|
||||
Select within a fixed interval by dragging the slider.
|
||||
|
||||
### How to use
|
||||
|
||||
The current value is displayed when the slider is being dragged.
|
||||
|
||||
:::demo Customize the initial value of the slider by setting the binding value.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default value</span>
|
||||
<el-slider v-model="value1"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Customized initial value</span>
|
||||
<el-slider v-model="value2"></el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Discrete value
|
||||
|
||||
The options can be discrete.
|
||||
|
||||
:::demo Change the value of `step` to change the step size. You can display breakpoints by setting the `show-step` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints are not displayed</span>
|
||||
<el-slider
|
||||
v-model="value3"
|
||||
:step="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Displays the breakpoints</span>
|
||||
<el-slider
|
||||
v-model="value4"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: 0,
|
||||
value4: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Slide with input box
|
||||
|
||||
Set the exact value via the input box.
|
||||
|
||||
:::demo Set the `show-input` attribute to display an inputbox on the right.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value5"
|
||||
show-input>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| min | The minimum value | number | — | 0 |
|
||||
| max | The maximum value | number | — | 100 |
|
||||
| step | Step size | number | — | 1 |
|
||||
| show-input | Whether to display the input box | boolean | — | false |
|
||||
| show-stops | Whether to display breakpoints | boolean | — | false |
|
||||
|
||||
## Events
|
||||
| Event | Description | Callback |
|
||||
|---------- |-------- |---------- |
|
||||
| change | Triggered when the value changes | the Value after the change |
|
||||
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps
|
||||
|
||||
Step-by-step guide to guide the user to complete the task in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
|
||||
|
||||
### How to use
|
||||
|
||||
Simple step bar.
|
||||
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is adaptive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="active" finish-status="success">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click.native="next">Next step</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar that contains status
|
||||
|
||||
Shows the status of the step for each step.
|
||||
|
||||
:::demo Use `title` attribute to set the name of the step, or override the attribute setting with `slot`. We have list all the slot name for you at the end of the document.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="1" finish-status="success">
|
||||
<el-step title="Done"></el-step>
|
||||
<el-step title="Processing"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with description
|
||||
|
||||
There is description for each step.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :space="200" :active="1">
|
||||
<el-step title="Step 1" description="description"></el-step>
|
||||
<el-step title="Step 2" description="description"></el-step>
|
||||
<el-step title="Step 3" description="description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with icon
|
||||
|
||||
|
||||
A variety of custom icons can be used in the step bar.
|
||||
|
||||
:::demo The icon is set by the `icon` property, The types of icons can be found in the document for the Icon component, in addition, you can customize the icon through the slot name.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" :active="1">
|
||||
<el-step title="Step 1" icon="edit"></el-step>
|
||||
<el-step title="Step 2" icon="upload"></el-step>
|
||||
<el-step title="Step 3" icon="picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical step bar
|
||||
|
||||
Vertical step bars.
|
||||
|
||||
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
|
||||
|
||||
```html
|
||||
<el-steps :space="100" direction="vertical" :active="1">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps Attributes
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| space | The spacing of each step, will be adaptive spacing if not set | Number | — | — |
|
||||
| direction | display direction | string | vertical/horizontal | horizontal |
|
||||
| active | Sets the current activation step | number | — | 0 |
|
||||
| process-status | Sets the status of current step | string | wait/process/finish/error/success | process |
|
||||
| finish-status | Sets the status of end step | string | wait/process/finish/error/success | finish |
|
||||
|
||||
### Step Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | Title | string | — | — |
|
||||
| description | Description | string | — | — |
|
||||
| icon | Icon| Icons provided by Element Icon, can be written through the slot if you want to use <br> custom icon| string | — |
|
||||
|
||||
### Step Slot
|
||||
| name | Description |
|
||||
|----|----|
|
||||
| icon | Icon |
|
||||
| title | Title |
|
||||
| description | Description |
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
## switch
|
||||
|
||||
Switch component is used for switching the component between two opposing state.
|
||||
|
||||
### How to use
|
||||
|
||||
Use `v-model` directly to bind a **boolean** value to this component and control the opposing states. Additionally you can add `on-text` or `off-text` attribute to show the message when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the backgroundcolor of this component in different states.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
on-text=""
|
||||
off-text="">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949">
|
||||
</el-switch>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### disabled
|
||||
|
||||
`disabled` attribute means whether the component need to be disabled or not.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-text=""
|
||||
off-text=""
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
disabled>
|
||||
</el-switch>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
----| ----| ----| ----|----
|
||||
disbaled | Disable the component or not | boolean | --- | false
|
||||
width| The width of component | number | --- | 58 (with text) / 46 (no text)
|
||||
on-close-icon| If component is in 'on' state, set the classes of icon | string | ---| ---
|
||||
off-close-icon|If component is in 'off' state, set the classes of icon| string | ---| ---
|
||||
on-text | If component is in 'on' state, set the text of component | string | --- | ON
|
||||
off-text | If component is in 'off' state, set the text of component | string | --- | OFF
|
||||
on-color | If component is in 'on' state, set the background color of component | string | --- | <span style="background-color: #20A0FF">#20A0FF</span>
|
||||
off-color | If component is in 'off' state, set the background color of component | string | --- | <span style="background-color: #C0CCDA">#C0CCDA</span>
|
||||
name| The name of component | string | --- | ---
|
||||
|
||||
### Events
|
||||
|
||||
Event | Description | Callback Parameter
|
||||
---- | ----| ----
|
||||
change | Change the state and then trigger the callback function | ---
|
||||
|
||||
|
|
@ -0,0 +1,911 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}],
|
||||
tableData2: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
$positive: true
|
||||
}],
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-08',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-06',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'The Grove, 189 The Grove Dr, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.singleSelection = val;
|
||||
},
|
||||
|
||||
handleMultipleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
singleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
},
|
||||
|
||||
multipleSelection(val) {
|
||||
console.log('selection: ', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Table
|
||||
|
||||
Display multiple data in same or similar format.
|
||||
You can sort, filter, compare or other custom actions on your data.
|
||||
|
||||
|
||||
|
||||
### Basic Table
|
||||
|
||||
Usage with basic table.
|
||||
|
||||
:::demo
|
||||
When set attribute `data` of component `el-table` with an object array, you can set attribute `property` to correspond to the key of object in the data array in `el-table-column`, and set the attribute `label` to define the column name.
|
||||
You can also use the attribute `width` to define the width of columns.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Strped Table
|
||||
|
||||
Striped table adds zebra-stripes to a table, so you can easily distinguish between different rows of data.
|
||||
|
||||
:::demo
|
||||
Attribute `stripe` could get it. It accepts a `Boolean` parameter, whose default value is false. Set it to true to turn it on.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table with border
|
||||
|
||||
:::demo
|
||||
By default, table component has no border in vertical. If you need it, you can set attribute `border` to `Boolean` value true. It accepts boolean type value. Turn on it by setting to `true`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table with status
|
||||
|
||||
You can highlight your table content to distinguish between "success, information, warning, danger" and others.
|
||||
|
||||
|
||||
:::demo
|
||||
Add customer background color to display the line in certain status. If some line has the field which is true in the array `custom-criteria`, it will be set the corresponding background color in the array `custom-background-colors`.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData2"
|
||||
style="width: 100%"
|
||||
:custom-criteria="['$info', '$positive']"
|
||||
:custom-background-colors="['#C9E5F5', '#E2F0E4']">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData2: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu',
|
||||
$positive: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table with fixed header
|
||||
|
||||
When there are too many rows with so much data in vertical orientation, you could use a fixed header.
|
||||
|
||||
:::demo
|
||||
By setting the atrribute `height` of element `el-table`, you can fix the table header without any othercodes.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
height="250"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table with fixed column
|
||||
|
||||
When so many columns and so much data in horizontal orientation, you can set the first column fixed.
|
||||
|
||||
:::demo
|
||||
Set the attribute `fixed-column-count`, it accepts a `Number` which indicates the number of columns to be fixed from the left.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:fixed-column-count="1"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="state"
|
||||
label="state"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="city"
|
||||
label="City"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address"
|
||||
width="300">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="zip"
|
||||
label="Zip"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table with fixed columns and header
|
||||
|
||||
When so much data in vertical and horizontal orientation, you could set certain column and header fixed.
|
||||
|
||||
:::demo Fix columns and header at the same time with set attribute at the same time.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
:fixed-column-count="1"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="250">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="150">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="state"
|
||||
label="state"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="city"
|
||||
label="City"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address"
|
||||
width="300">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="zip"
|
||||
label="Zip"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
state: 'Shanghai',
|
||||
city: 'Putuo district',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Single Select
|
||||
|
||||
When select a row , display with certain background color.
|
||||
|
||||
:::demo
|
||||
You can choose one row or more with the table component. You can select one row (`single`) or several rows(`multiple`) by setting the attribute `selection-mode`. If you don't need it, set it to `none`. `selectselectionchange` event will be triggered when the table row is selected. It accepts a parameter `value` which is the corresponding object when the table is generated. The example below shows the attribute `allow-no-selection`, which accepts a `Boolean` type. If `true`, it is allowed to be empty. With setting to `false` by default, the default value the first object of the data array. If you wanna display index, you can add a new element `el-table-column`. Set attribute `type` to `index`, you will see the index starting with 1 .
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
selection-mode="single"
|
||||
@selectionchange="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
allow-no-selection>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'Shanghai'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Lily',
|
||||
address: 'Beijing'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Nathan',
|
||||
address: 'Guangzhou'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Natalia',
|
||||
address: 'Chengdu'
|
||||
}],
|
||||
singleSelection: {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.singleSelection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Multiple Select
|
||||
|
||||
Use Checkbox to choose multiple options.
|
||||
|
||||
|
||||
:::demo
|
||||
There is not much difference between Multiple Select and Single Select, except that the argument in the` selectionchange` event is changed from object to object array. A column is needed to display the checkbox: manually adding an `el-table-column`, and setting the` type` to `selection`. Attributes `inline-template` and `show-tooltip-when-overflow` are used to show other Attributes in the example below.
|
||||
|
||||
When the attribute `inline-template` is set, you can use the object of `row` to replace the setting of attribute `property`.
|
||||
|
||||
By default, if the content is too much, the extra content will display in the new line. If you wanna show content in one line, use attribute `show-tooltip-when-overflow`, which accepts the `Boolean` type. When set true the extra content will show in tooltip when hover on it.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData3"
|
||||
selection-mode="multiple"
|
||||
style="width: 100%"
|
||||
@selectionchange="handleMultipleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
inline-template
|
||||
label="Date"
|
||||
width="120">
|
||||
<div>{{ row.date }}</div>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="120">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address"
|
||||
show-tooltip-when-overflow>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData3: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}],
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Order
|
||||
|
||||
Sort the data to find or compare data quickly.
|
||||
|
||||
:::demo
|
||||
Set attribute `sortable` to a certain column to sort the data
|
||||
based on the column . It accepts the `Boolean` type with an default value `false`. In the example below we use attribute `formatter` to format the value of certain column. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
property="date"
|
||||
label="Date"
|
||||
sortable
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
property="address"
|
||||
label="Address"
|
||||
:formatter="formatter">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'Putuo District of Shanghai Jinsha River Road 1518 Lane',
|
||||
zip: 'CA 90036'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Table Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| data | data to display | array | — | — |
|
||||
| height | table 's height, default is null, meaning height is set automatically | string | — | — |
|
||||
| stripe | whether stripe table or not| boolean | — | false |
|
||||
| border | whether has border in vertical orientation or not | boolean | — | false |
|
||||
| fit | whether width of column automatically distract or not | boolean | — | true |
|
||||
| selection-mode | select mode | string | single/multiple/none | none |
|
||||
| allow-no-selection | whether is allowed to be empty or not in Single Select | boolean | — | false |
|
||||
| fixed-column-count | fixed columns counts | number | — | 0 |
|
||||
|
||||
### Table Events
|
||||
| Event | Description | Paramters |
|
||||
| ---- | ---- | ---- |
|
||||
| selectionchange | triggered when selection changes | selected |
|
||||
| cellmouseenter | triggered when hovering on cell| row, column, cell, event |
|
||||
| cellmouseleave | triggered when hovering leave cell | row, column, cell, event |
|
||||
| cellclick | triggered when clicking cell| row, column, cell, event |
|
||||
|
||||
### Table-column Attributes
|
||||
| Paramters | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | title | string | — | — |
|
||||
| property | field name corresponding to the column name | string | — | — |
|
||||
| width | column width | string | — | — |
|
||||
| sortable | whether can be sort or not | boolean | — | false |
|
||||
| resizable | whether width of the column will change when dragged (If need it, you should set attribute `border` of `el-table` to true) ） | boolean | — | false |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring with 1) | string | selection/index | — |
|
||||
| formatter | function that formats content, which has two parameters row and column | function | — | — |
|
||||
| show-tooltip-when-overflow | if cell content is too long , the extra content will hide. Hovering on it the extra content will show in tooltip | Boolean | — | false |
|
||||
| inline-template | when using the attribute, you could customize the content which the column. Refer to the date column in Multiple Select, getting row data by `row` object, getting current context by _self in JSX. In this case you don't need set the attribute `property`. | — | — |
|
||||
| align | Alignment | String | left, center, right | left |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
## Tabs
|
||||
|
||||
Divide data collections which have related contents however belong to different types.
|
||||
|
||||
### How to use
|
||||
|
||||
Basic and concise tabs.
|
||||
|
||||
:::demo Tabs provide a selective card functionality and it can be achieved only by using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, you can write content in the label; In the next example, we add a `active-name` attribute in `el-tabs`, which can take a `String` value. It means an active card. In the `el-tab-pane` you can set corresponding `name` attribute,if there is no `name`, then the default sequence is `1`/`2`/`3`/`4`. In the example, the selected card is card 2. Since there's no `name`, then set `active-name` to `2` can reach the same goal.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs>
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Card Style
|
||||
|
||||
Selective card style tabs.
|
||||
|
||||
:::demo Set `type` to `card` can get a selective card style tab.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Closable
|
||||
|
||||
Closable tabs.
|
||||
|
||||
:::demo You can set `closable` attribute in `el-tabs`.It accept `Boolean` and it will be closable when the boolean is `true`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleRemove(tab) {
|
||||
console.log(tab);
|
||||
},
|
||||
handleClick(tab) {
|
||||
console.log(tab);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Border card
|
||||
|
||||
Border card tabs.
|
||||
|
||||
:::demo Set `type` to `border-card`.
|
||||
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="User Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Config Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Role Admin"></el-tab-pane>
|
||||
<el-tab-pane label="Task Compensation"></el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Tabs Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | Tabs type | string | card, border-card | — |
|
||||
| closable | If can close the tab | boolean | true, false | false |
|
||||
| active-name | Name of the selected card | string | — | Name of first selective card |
|
||||
|
||||
### Tabs Events
|
||||
|
||||
| Event name | Description | Callback parameter |
|
||||
|---------- |-------- |---------- |
|
||||
| tab-click | Hook function when tab is clicked | Clicked tab |
|
||||
| tab-remove | Hook function when tab is removed | Removed tab |
|
||||
|
||||
### Tab-pane Attributes
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | Card label | string | — | — |
|
||||
| name | The identifier corresponding to the activeName of the selective card, representing the alias of the selective card | string | — | The ordinal number of the selective card in the sequence, i.e. the first one is '1' |
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: 'Label one', type: '' },
|
||||
{ key: 2, name: 'Label Two', type: 'gray' },
|
||||
{ key: 5, name: 'Label Three', type: 'primary' },
|
||||
{ key: 3, name: 'Label Four', type: 'success' },
|
||||
{ key: 4, name: 'Label Five', type: 'warning' },
|
||||
{ key: 6, name: 'Label Six', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.splice(this.tags.indexOf(tag), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-tag {
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag
|
||||
|
||||
Used for marking and selection.
|
||||
|
||||
### How to use
|
||||
|
||||
::: demo It's defined by the `type` attribute, which is optional.
|
||||
|
||||
```html
|
||||
<el-tag>Label One</el-tag>
|
||||
<el-tag type="gray">Label Two</el-tag>
|
||||
<el-tag type="primary">Label Three</el-tag>
|
||||
<el-tag type="success">Label Four</el-tag>
|
||||
<el-tag type="warning">Label Five</el-tag>
|
||||
<el-tag type="danger">Label Six</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Removable Label
|
||||
|
||||
:::demo Set the `closable` attribute to define a removeable tag, it can accepts a `Boolean` and you can set it with `true`. The removal of default label is accompanied by a gradient animation. If you don't want to use it, you can set the `close-transition` attribute, it accepts a `Boolean`, and will be turn off if set true. Setting the `close` event to handle the callback function after closing.
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:closable="true"
|
||||
:type="tag.type"
|
||||
:key="tag"
|
||||
:close-transition="false"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ key: 1, name: 'Label One', type: '' },
|
||||
{ key: 2, name: 'Label Two', type: 'gray' },
|
||||
{ key: 5, name: 'Label Three', type: 'primary' },
|
||||
{ key: 3, name: 'Label Four', type: 'success' },
|
||||
{ key: 4, name: 'Label Five', type: 'warning' },
|
||||
{ key: 6, name: 'Label Six', type: 'danger' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.splice(this.tags.indexOf(tag), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Parameter | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | 'primary', 'gray', 'success', 'warning', 'danger' | — |
|
||||
| closable | Whether it can be closed | boolean | — | false |
|
||||
| close-transition | Whether gradient animation is disabled or not | boolean | — | false |
|
||||
| hit | Is there a border stroke| boolean | — | false |
|
||||
|
||||
|
||||
### Events
|
||||
| Event | Description | Callback |
|
||||
|---------- |-------- |---------- |
|
||||
| close | The event fired when the tab is closed | — |
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-date-editor + .el-date-editor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## TimePicker
|
||||
|
||||
Use Time Picker for time input.
|
||||
|
||||
### Fixed time picker
|
||||
|
||||
Provide a list of fixed time for users to choose.
|
||||
|
||||
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="Select time">
|
||||
</el-time-select>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arbitrary time picker
|
||||
|
||||
Can pick an arbitrary time.
|
||||
|
||||
:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Fixed time range
|
||||
|
||||
If start time is picked at first, then the end time will change accordingly.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-time-select
|
||||
placeholder="Start time"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="End time"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arbitrary time range
|
||||
|
||||
Can pick an arbitrary time range.
|
||||
|
||||
:::demo We can pick a time range by adding an `is-range` attribute.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value3"
|
||||
placeholder="Pick a time range">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | if the picker is read only | boolean | — | false |
|
||||
| placeholder | placeholder | string | — | — |
|
||||
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| align | alignment | left/center/right | left |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
|
||||
### Time Select Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| start | start time | string | — | 09:00 |
|
||||
| end | end time | string | — | 18:00 |
|
||||
| step | time step | string | — | 00:30 |
|
||||
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
|
||||
|
||||
### Time Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | available time range，e.g.<br>`'18:30:00 - 20:30:00'`<br>or<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
# Tooltips
|
||||
|
||||
|
||||
Display prompt information for mouse hover.
|
||||
|
||||
|
||||
---
|
||||
|
||||
##How to use
|
||||
|
||||
There are 9 ways to display your prompt information multi-formly. You could get it by the demo below.
|
||||
|
||||
|
||||
|
||||
:::demo
|
||||
Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[oritation]-[Alignment]` with four oritations `top`,`left`, `right`,`bottom` and three alignments `start`,`end`, null, default alignment is null.
|
||||
Look at the code `placement="left-end"`, with this code in tooltip component you will see the prompt information will display on the left to the element which you are hovering and bottom of the tooltip aligns with the bottom of the element which you are hovering.
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
|
||||
<el-button>top-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
|
||||
<el-button>top</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
|
||||
<el-button>top-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
|
||||
<el-button>left-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
|
||||
<el-button>left</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
|
||||
<el-button>left-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
|
||||
<el-button>right-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
|
||||
<el-button>right</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
|
||||
<el-button>right-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
|
||||
<el-button>bottom-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
|
||||
<el-button>bottom</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
|
||||
<el-button>bottom-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Theme
|
||||
|
||||
Tooltip has two themes：`dark` and `light`。
|
||||
|
||||
|
||||
:::demo
|
||||
Set `effect` to modify theme, default value is `dark`.
|
||||
|
||||
```html
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### More Content
|
||||
|
||||
Display multiple lines of text or set format of the text .
|
||||
|
||||
:::demo
|
||||
Distribute task of the attribute `content` to the ‘Signature’ `slot` as an alternative.
|
||||
```html
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">multiple lines<br/>second line</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### Advanced Extensions
|
||||
|
||||
In addition to basic usages, there are some attributes that allow you to customize your own ：
|
||||
|
||||
`transition` attribute allows you to customerize the animation in which the tooltip shows or hides , default value is `fade-in-linear`.
|
||||
|
||||
`disabled` attribute allows you disable the `tooltip` 's prompt function. You just only set it to `boolean` type with value `true`.
|
||||
|
||||
Actually it is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
|
||||
|
||||
Of cause, component Tooltip is powerful. You can see API below.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
|
||||
<el-button @click.native="disabled=true">click to close tooltip function</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
.slide-fade-enter, .expand-fade-leave-active {
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| effect | themes authrozied | String | `dark`, `light` | dark |
|
||||
| content | display content, `slot#content` insert it into DOM by `slot#content` | String | — | — |
|
||||
| placement | position of Tooltip | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom |
|
||||
| value(v-model) | status show or not | Boolean | — | false |
|
||||
| disabled | Tooltip work or not | Boolean | — | false |
|
||||
| offset | offset of the position | Number | — | 0 |
|
||||
| transition | define gradient animation | String | — | `fade-in-linear` |
|
||||
| visible-arrow | display Tooltip arrow or not, more info go to [Vue-popper](https://github.com/element-component/vue-popper) page | Boolean | — | true |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) paramters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| openDelay | show in delay, unit is millisecond | Number | — | 0 |
|
||||
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<style>
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var data = [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}];
|
||||
|
||||
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: {
|
||||
loadNode(node, resolve) {
|
||||
console.log(node);
|
||||
if (node.level === -1) {
|
||||
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
|
||||
}
|
||||
if (node.level > 4) return resolve([]);
|
||||
var hasChild;
|
||||
if (node.data.name === 'Root1') {
|
||||
hasChild = true;
|
||||
} else if (node.data.name === 'Root2') {
|
||||
hasChild = false;
|
||||
} else {
|
||||
hasChild = Math.random() > 0.5;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
## Tree
|
||||
|
||||
Display information can be unfolded or folded in a clear hierarchy.
|
||||
|
||||
### How to use
|
||||
|
||||
Display the basic tree structure.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree :data="data" :props="defaultProps"></el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Options
|
||||
|
||||
Used for level selection. In the following example, the layer data is unpredictable when the data is clicked(ps: the data is acquired when clicked the current layer). If there is no lower layer data, the pull-down button is disappeared.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree :data="regions" :props="props" :load="loadNode" lazy show-checkbox></el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
regions: [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
'name': 'region2'
|
||||
}],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
},
|
||||
count: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes(true));
|
||||
},
|
||||
|
||||
loadNode(node, resolve) {
|
||||
console.log(node);
|
||||
if (node.level === -1) {
|
||||
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
|
||||
}
|
||||
var hasChild = Math.random() > 0.5;
|
||||
if (node.level > 4) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
var data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + this.count++
|
||||
}, {
|
||||
name: 'zone' + this.count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| data | Show the data | array | — | — |
|
||||
| props | Configuration options, to see the following table | object | — | — |
|
||||
| load | Method for loading subtree data | function(node, resolve) | — | — |
|
||||
|
||||
### props
|
||||
|
||||
| Attribute | Description | Type | Options | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | Specifies that a node label is a property value of a node object | string | — | — |
|
||||
| children | The specified subtree is a property value of the node object | string | — | — |
|
||||
|
||||
### Method
|
||||
|
||||
`Tree` has the following method, which returns the currently selected array of nodes.
|
||||
|
||||
| Method | Description | Parameter |
|
||||
|---------- |-------- |---------- |
|
||||
| getCheckedNodes | If the node can be selected(`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. <br>If the parameter is `true`, it only returns the currently selected array of sub-nodes.|
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Callback |
|
||||
|---------- |-------- |---------- |
|
||||
| node-click | Callback when the node is clicked | The instance that corresponds to the node in the array passed to the `data` property |
|
||||
| check-change | Callback when the selected state of the node changes | Three parameters: <br>The instance that corresponds to the node in the array passed to the `data` property, <br>whether the node itself is selected, <br>whether there are selected nodes in the subtree of the node|
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<style>
|
||||
.demo-typo-box {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
border: 1px solid #eaeefb;
|
||||
font-size: 40px;
|
||||
color: #1f2d3d;
|
||||
text-align: center;
|
||||
line-height: 162px;
|
||||
padding-bottom: 36px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: 17px;
|
||||
border-radius: 4px;
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-top: 1px solid #eaeefb;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
text-indent: 10px;
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
}
|
||||
.demo-typo-size {
|
||||
.h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-regular {
|
||||
font-size: 14px;
|
||||
}
|
||||
.text-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
.text-smaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
.color-dark-light {
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
.typo-PingFang {
|
||||
font-family: 'PingFang SC';
|
||||
}
|
||||
.typo-Hiragino {
|
||||
font-family: 'Hiragino Sans GB';
|
||||
}
|
||||
.typo-Microsoft {
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
/* English */
|
||||
.typo-Helvetica-Neue {
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
.typo-Helvetica {
|
||||
font-family: 'Helvetica';
|
||||
}
|
||||
.typo-Arial {
|
||||
font-family: 'Arial';
|
||||
}
|
||||
</style>
|
||||
|
||||
## Typography
|
||||
|
||||
We create a font convention to ensure the best presentation across different platforms.
|
||||
|
||||
### Chinese Font
|
||||
|
||||
<div class="demo-typo-box typo-PingFang">
|
||||
和畅惠风
|
||||
<div class="name">PingFang SC</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Hiragino">
|
||||
和畅惠风
|
||||
<div class="name">Hiragino Sans GB</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Microsoft">
|
||||
和畅惠风
|
||||
<div class="name">Microsoft YaHei</div>
|
||||
</div>
|
||||
|
||||
### English / Numberic Font
|
||||
|
||||
<div class="demo-typo-box typo-Helvetica-neue">
|
||||
RGag
|
||||
<div class="name">Helvetica Neue</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Helvetica">
|
||||
RGag
|
||||
<div class="name">Helvetica</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Arial">
|
||||
RGag
|
||||
<div class="name">Arial</div>
|
||||
</div>
|
||||
|
||||
### Font-family
|
||||
|
||||
```css
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
```
|
||||
|
||||
### Font Convention
|
||||
|
||||
<table class="demo-typo-size">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h1">Main Title</td>
|
||||
<td class="h1">Build with Element</td>
|
||||
<td class="color-dark-light">20px Extra large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h2">Title</td>
|
||||
<td class="h2">Build with Element</td>
|
||||
<td class="color-dark-light">18px large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h3">Small Title</td>
|
||||
<td class="h3">Build with Element</td>
|
||||
<td class="color-dark-light">16px Medium</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-regular">Body</td>
|
||||
<td class="text-regular">Build with Element</td>
|
||||
<td class="color-dark-light">14px Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-small">Body (small)</td>
|
||||
<td class="text-small">Build with Element</td>
|
||||
<td class="color-dark-light">13px Extra Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-smaller">help text</td>
|
||||
<td class="text-smaller">Build with Element</td>
|
||||
<td class="color-dark-light">12px Extra Extra Small</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
## Upload
|
||||
|
||||
|
||||
Upload your files by `click` or `drag` event
|
||||
|
||||
### Click to upload files
|
||||
|
||||
Add `slot` attribute to customize the type of upload button and text hints.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-upload
|
||||
action="http://jsonplaceholder.typicode.com/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove">
|
||||
<el-button size="small" type="primary">click to upload</el-button>
|
||||
<div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Drag to upload
|
||||
|
||||
You can drag your file to certain field to upload it.
|
||||
|
||||
Specifying the `type` attribute as `drag` will change the upload control to a drag-and-drop style. Additionally, you can use the `multiple` attribute to control whether multiple-selections are supported or not. And `on-preview` and `on-remove` are hook functions that will be called after clicked on the uploaded file link and after clicked to remove the uploaded file, respectively.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-upload
|
||||
action="http://jsonplaceholder.typicode.com/"
|
||||
type="drag"
|
||||
:multiple="true"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
|
||||
<div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Upload single image
|
||||
|
||||
This mode is specifically for uploading image, and the thumbnail will display in origin place.
|
||||
|
||||
`thumbnail-mode` attribute allows you to force the upload content to image only, and can display the thumbnail of the uploaded image.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-upload
|
||||
action="http://jsonplaceholder.typicode.com/"
|
||||
type="drag"
|
||||
:thumbnail-mode="true"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-dragger__text">drag file to here or <em>click to upload</em></div>
|
||||
<div class="el-upload__tip" slot="tip">only jpg/png allowed,and the size must be less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
Attribute| Description | Type | options | Default
|
||||
----| ----| ----| ----| ----
|
||||
action | required, the location you upload to | string | --- |---
|
||||
headers | optional, set request headers | object | --- | ---
|
||||
multiple | optional, whether multiple-selections are supported or not| boolean | --- | ---
|
||||
file | optional, The field name of the uploaded file | string | --- | ---
|
||||
with-credentials | send cookies or not | boolean | --- | ---
|
||||
show-uploadList | show the uploaded file list or not | boolean | --- |---
|
||||
type | the type of upload control | string | select, drag | select
|
||||
accept | optional, limits the type of upload file, but if the upload type is `drag`, you can upload all the file types | string | --- | ---
|
||||
on-preview | optional, hook function when click the uploaded files | function(file) | --- | ---
|
||||
on-remove | optional, hook function when remove the files | function(file, fileList) | --- | ---
|
||||
on-success | optional, hook function when upload files successfully | function(file, fileList) | --- | ---
|
||||
on-error | optional, hook function when some errors occured | function(err, file, fileList) | --- | ---
|
||||
before-upload | optional, hook function before upload the file, the parameter is the file that uploaded, if the hook function return `false` or `Promise` value, it will end upload progress | function(file) | --- | ---
|
||||
thumbnail-mode | whether image mode is set or not, the image mode will display the picture thumbnails | boolean | --- | false
|
||||
|
||||
|
||||
|
|
@ -39,63 +39,32 @@
|
|||
|
||||
::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
|
||||
```html
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -105,43 +74,12 @@
|
|||
|
||||
::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
|
||||
```html
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -151,52 +89,21 @@
|
|||
|
||||
::: demo
|
||||
```html
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -206,48 +113,17 @@
|
|||
|
||||
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
|
||||
```html
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -257,62 +133,31 @@
|
|||
|
||||
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
|
||||
```html
|
||||
<template>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
百分比不占用额外控件，适用于文件上传等场景。
|
||||
|
||||
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。
|
||||
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
|
||||
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.tags.$remove(tag);
|
||||
this.tags.splice(this.tags.indexOf(tag), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
## 自定义主题
|
||||
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
|
||||
|
||||
### 安装工具
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。
|
||||
```shell
|
||||
npm i element-theme -D
|
||||
```
|
||||
|
||||
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
```shell
|
||||
npm i element-theme-default@next -D
|
||||
|
||||
# 从 GitHub
|
||||
npm i https://github.com/ElementUI/theme-default -D
|
||||
```
|
||||
|
||||
### 初始化变量文件
|
||||
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
|
||||
|
||||
```shell
|
||||
node_modules/.bin/et -i [可以自定义变量文件目录]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到了所有变量，它们使用 CSS4 的风格定义。大致结构如下：
|
||||
```css
|
||||
:root {
|
||||
|
||||
/* Colors
|
||||
-------------------------- */
|
||||
--color-primary: #20a0ff;
|
||||
--color-success: #13ce66;
|
||||
--color-warning: #f7ba2a;
|
||||
--color-danger: #ff4949;
|
||||
--color-info: #50BFFF;
|
||||
--color-blue: #2e90fe;
|
||||
--color-blue-light: #5da9ff;
|
||||
--color-blue-lighter: rgba(var(--color-blue), 0.12);
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-grey: #C0CCDA;
|
||||
```
|
||||
|
||||
### 修改变量
|
||||
直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
|
||||
```CSS
|
||||
--color-primary: red;
|
||||
```
|
||||
|
||||
### 编译主题
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
|
||||
```shell
|
||||
node_modules/.bin/et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### 引入自定义主题
|
||||
默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
|
||||
|
||||
```javascript
|
||||
import './theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
### 搭配插件按需引入组件主题
|
||||
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
|
||||
```json
|
||||
{
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
如果不清楚 `babel-plugin-component` 是什么，请阅读 [快速上手](./examples/docs/zh-CN/quickstart.md) 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
## 国际化
|
||||
|
||||
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
|
||||
|
||||
```javascript
|
||||
// 完整引入 Element
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
或
|
||||
|
||||
```javascript
|
||||
// 按需引入 Element
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// 设置语言
|
||||
locale.use(lang)
|
||||
|
||||
// 引入组件
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。
|
||||
|
||||
**webpack.config.js**
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
目前 Element 内置了以下语言：
|
||||
- 汉语
|
||||
- 英语
|
||||
- 德语
|
||||
- 葡萄牙语
|
||||
|
||||
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
|
@ -50,4 +50,4 @@ npm i element-ui -D
|
|||
</script>
|
||||
</html>
|
||||
```
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import entry from './app';
|
||||
import VueRouter from 'vue-router';
|
||||
import configRouter from './route.config';
|
||||
import routes from './route.config';
|
||||
import Element from 'main/index.js';
|
||||
import 'packages/theme-default/src/index.css';
|
||||
import demoBlock from './components/demo-block.vue';
|
||||
|
|
@ -21,7 +21,7 @@ Vue.component('footer-nav', FooterNav);
|
|||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
base: __dirname,
|
||||
routes: configRouter
|
||||
routes
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
[
|
||||
{
|
||||
"lang": "zh-CN",
|
||||
"demo-block": {
|
||||
"hide-text": "隐藏代码",
|
||||
"show-text": "显示代码",
|
||||
"button-text": "在线运行",
|
||||
"tooltip-text": "前往 jsfiddle.net 运行此实例"
|
||||
},
|
||||
"footer": {
|
||||
"feedback": "反馈建议",
|
||||
"contribution": "贡献指南",
|
||||
"eleme": "饿了么"
|
||||
},
|
||||
"header": {
|
||||
"guide": "指南",
|
||||
"components": "组件",
|
||||
"resource": "资源"
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "en-US",
|
||||
"demo-block": {
|
||||
"hide-text": "Hide",
|
||||
"show-text": "Expand",
|
||||
"button-text": "Try it!",
|
||||
"tooltip-text": "Run this demo on jsfiddle.net"
|
||||
},
|
||||
"footer": {
|
||||
"feedback": "Feedback",
|
||||
"contribution": "Contribution",
|
||||
"eleme": "Eleme"
|
||||
},
|
||||
"header": {
|
||||
"guide": "Guide",
|
||||
"components": "Component",
|
||||
"resource": "Resource"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
[
|
||||
{
|
||||
"lang": "zh-CN",
|
||||
"pages": {
|
||||
"index": {
|
||||
"titleSize": "46",
|
||||
"theatreSize": "46",
|
||||
"paraHeight": "1.8",
|
||||
"theatreParam": "",
|
||||
"typingFunc": ".addScene('产品设计师', 1800, -5, 800)\n .addScene('交互设计师', 1800, -5, 500)\n .addScene('视觉设计师', 1800, -5, 700)\n .addScene('产品经理', 1800, -4, 600)\n .addScene('前端工程师', 1800, -5, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 0.5, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:只为守护世界和平', 300, -6, 1000)\n .addScene('让你少加班', 300, -5)\n .addScene('line2:只为这样的你: ', 400)",
|
||||
"1": "网站快速成型工具",
|
||||
"2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。",
|
||||
"3": "指南",
|
||||
"4": "了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。",
|
||||
"5": "查看详情",
|
||||
"6": "组件",
|
||||
"7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
|
||||
"8": "资源",
|
||||
"9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
"1": "更新日志",
|
||||
"2": "zh-CN"
|
||||
},
|
||||
"design": {
|
||||
"1": "设计原则",
|
||||
"2": "一致",
|
||||
"3": "Consistency",
|
||||
"4": "反馈",
|
||||
"5": "Feedback",
|
||||
"6": "效率",
|
||||
"7": "Efficiency",
|
||||
"8": "可控",
|
||||
"9": "Controllability",
|
||||
"10": "一致性 Consistency",
|
||||
"11": "与现实生活一致：",
|
||||
"12": "与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
|
||||
"13": "在界面中一致：",
|
||||
"14": "所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。",
|
||||
"15": "反馈 Feedback",
|
||||
"16": "控制反馈：",
|
||||
"17": "通过界面样式和交互动效让用户可以清晰的感知自己的操作；",
|
||||
"18": "页面反馈：",
|
||||
"19": "操作后，通过页面元素的变化清晰地展现当前状态。",
|
||||
"20": "效率 Efficiency",
|
||||
"21": "简化流程：",
|
||||
"22": "设计简洁直观的操作流程；",
|
||||
"23": "清晰明确：",
|
||||
"24": "语言表达清晰且表意明确，让用户快速理解进而作出决策；",
|
||||
"25": "帮助用户识别：",
|
||||
"26": "界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。",
|
||||
"27": "可控 Controllability",
|
||||
"28": "用户决策：",
|
||||
"29": "根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；",
|
||||
"30": "结果可控：",
|
||||
"31": "用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"
|
||||
},
|
||||
"guide": {
|
||||
"1": "设计原则",
|
||||
"2": "导航"
|
||||
},
|
||||
"nav": {
|
||||
"1": "导航",
|
||||
"2": "导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。",
|
||||
"3": "选择合适的导航",
|
||||
"4": "选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。",
|
||||
"5": "侧栏导航",
|
||||
"6": "可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。",
|
||||
"7": "一级类目",
|
||||
"8": "适用于结构简单的网站：只有一级页面时，不需要使用面包屑。",
|
||||
"9": "二级类目",
|
||||
"10": "侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。",
|
||||
"11": "三级类目",
|
||||
"12": "适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。",
|
||||
"13": "顶部导航",
|
||||
"14": "顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。",
|
||||
"15": "适用于导航较少，页面篇幅较长的网站。"
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.2",
|
||||
"1": "资源",
|
||||
"2": "这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。",
|
||||
"3": "Axure Components",
|
||||
"4": "通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件",
|
||||
"5": "下载",
|
||||
"6": "Sketch Template",
|
||||
"7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格",
|
||||
"8": "组件交互文档",
|
||||
"9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "en-US",
|
||||
"pages": {
|
||||
"index": {
|
||||
"titleSize": "50",
|
||||
"theatreSize": "42",
|
||||
"paraHeight": "1.6",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designer', 1800, -16, 800)\n .addScene('UI designer', 1800, -11, 800)\n .addScene('UX designer', 1800, -11, 800)\n .addScene('product manager', 1800, -15, 800)\n .addScene('FE developer', 1800, -12, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:Just for ', 500)",
|
||||
"1": "A Desktop UI Library",
|
||||
"2": "Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.",
|
||||
"3": "Guide",
|
||||
"4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
|
||||
"5": "View Detail",
|
||||
"6": "Component",
|
||||
"7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
|
||||
"8": "Resource",
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency."
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
"1": "Changelog",
|
||||
"2": "en-US"
|
||||
},
|
||||
"design": {
|
||||
"1": "Design Disciplines",
|
||||
"2": "Consistency",
|
||||
"3": "",
|
||||
"4": "Feedback",
|
||||
"5": "",
|
||||
"6": "Efficiency",
|
||||
"7": "",
|
||||
"8": "Controllability",
|
||||
"9": "",
|
||||
"10": "Consistency",
|
||||
"11": "Consistent with real life: ",
|
||||
"12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to;",
|
||||
"13": "Consistent within interface: ",
|
||||
"14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.",
|
||||
"15": "Feedback",
|
||||
"16": "Operation feedback: ",
|
||||
"17": "enable the users to clearly perceive their operations by style updates and interactive effects;",
|
||||
"18": "Visual feedback: ",
|
||||
"19": "reflect current state by updating or rearranging elements of the page.",
|
||||
"20": "Efficiency",
|
||||
"21": "Simplify the process: ",
|
||||
"22": "keep operating process simple and intuitive;",
|
||||
"23": "Definite and clear: ",
|
||||
"24": "enunciate your intentions clearly so that the users can quickly understand and make decisions;",
|
||||
"25": "Easy to identify: ",
|
||||
"26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.",
|
||||
"27": "Controllability",
|
||||
"28": "Decision making: ",
|
||||
"29": "giving advices about operations is acceptable, but do not make decisions for the users;",
|
||||
"30": "Controlled consequences: ",
|
||||
"31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
|
||||
},
|
||||
"guide": {
|
||||
"1": "Design Disciplines",
|
||||
"2": "Navigation"
|
||||
},
|
||||
"nav": {
|
||||
"1": "Navigation",
|
||||
"2": "Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.",
|
||||
"3": "Choose the right navigation",
|
||||
"4": "An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation",
|
||||
"5": "Side Navigation",
|
||||
"6": "Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.",
|
||||
"7": "Level 1 categories",
|
||||
"8": "Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.",
|
||||
"9": "Level 2 categories",
|
||||
"10": "Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.",
|
||||
"11": "Level 3 categories",
|
||||
"12": "Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.",
|
||||
"13": "Top Navigation",
|
||||
"14": "Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.",
|
||||
"15": "Suitable for sites with few navigations and large chunks."
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.6",
|
||||
"1": "Resource",
|
||||
"2": "Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.",
|
||||
"3": "Axure Components",
|
||||
"4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
|
||||
"5": "Download",
|
||||
"6": "Sketch Template",
|
||||
"7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
|
||||
"8": "Interaction Design Documentation",
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective."
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
[
|
||||
{
|
||||
"lang": "zh-CN"
|
||||
},
|
||||
{
|
||||
"lang": "en-US"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,270 +1,430 @@
|
|||
[
|
||||
{
|
||||
"name": "开发指南",
|
||||
"children": [{
|
||||
"path": "/installation",
|
||||
"name": "安装"
|
||||
},{
|
||||
"path": "/quickstart",
|
||||
"name": "快速上手"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"name": "更新日志",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
"name": "基础组件",
|
||||
"groups": [{
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"children": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"name": "布局 (layout)",
|
||||
"title": "Layout 布局",
|
||||
"description": ""
|
||||
"path": "/installation",
|
||||
"name": "安装"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"name": "色彩 (color)",
|
||||
"title": "Color 色彩",
|
||||
"description": ""
|
||||
"path": "/quickstart",
|
||||
"name": "快速上手"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"name": "字体 (typography)",
|
||||
"title": "Typography 字体",
|
||||
"description": ""
|
||||
"path": "/i18n",
|
||||
"name": "国际化"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"name": "图标 (icon)",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"name": "按钮 (button)",
|
||||
"title": "Button 按钮",
|
||||
"description": "常用的操作按钮"
|
||||
"path": "/custom-theme",
|
||||
"name": "自定义主题"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
"name": "更新日志",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
"name": "基础组件",
|
||||
"groups": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"name": "单选框 (radio)",
|
||||
"title": "Radio 单选框",
|
||||
"description": "用于在多个备选项选中单个选项。"
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"title": "Color 色彩"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"title": "Typography 字体"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"name": "多选框 (checkbox)",
|
||||
"title": "Checkbox 多选框",
|
||||
"description": "用于在多个可选项中进行多项选择。"
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio 单选框"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"title": "Input 输入框"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"title": "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"title": "Select 选择器"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch 开关"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"title": "Slider 滑块"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"title": "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"title": "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"title": "Upload 上传"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"title": "Rate 评分"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"title": "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"name": "输入框 (input)",
|
||||
"title": "Input 输入框"
|
||||
"groupName": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"title": "Table 表格"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag 标签"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress 进度条"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"title": "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"title": "Pagination 分页"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"name": "计数器 (input-number)",
|
||||
"title": "InputNumber 计数器"
|
||||
"groupName": "Notice",
|
||||
"list": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"title": "Alert 警告"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"title": "Message 消息提示"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"title": "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"title": "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"name": "选择器 (select)",
|
||||
"title": "Select 选择器",
|
||||
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
|
||||
"groupName": "Navigation",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"title": "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"title": "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"title": "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"title": "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps 步骤"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"name": "开关 (switch)",
|
||||
"title": "Switch 开关",
|
||||
"description": "用于两种对立状态的切换。"
|
||||
"groupName": "Others",
|
||||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"title": "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"title": "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card 卡片"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"en-US": [
|
||||
{
|
||||
"name": "Development",
|
||||
"children": [
|
||||
{
|
||||
"path": "/installation",
|
||||
"name": "Installation"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"name": "滑块 (slider)",
|
||||
"title": "Slider 滑块",
|
||||
"description": "通过拖动滑块在一个固定区间内进行选择"
|
||||
"path": "/quickstart",
|
||||
"name": "Quick Start"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"name": "时间选择器（time-picker）",
|
||||
"title": "TimePicker 时间选择器",
|
||||
"description": "用于选择或输入时间"
|
||||
"path": "/i18n",
|
||||
"name": "Internationalization"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"name": "日期选择器（date-picker）",
|
||||
"title": "DatePicker 日期选择器",
|
||||
"description": "用于选择或输入时间"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"name": "日期时间选择器",
|
||||
"title": "DateTimePicker 日期时间选择器",
|
||||
"description": "用于选择或输入日期时间"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"name": "上传 (upload)",
|
||||
"title": "Upload 上传",
|
||||
"description": "文件上传组件"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"name": "评分 (rate)",
|
||||
"title": "Rate 评分"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"name": "表单 (form)",
|
||||
"title": "Form 表单",
|
||||
"description": "一个多功能的并带有字段验证的表单组件"
|
||||
"path": "/custom-theme",
|
||||
"name": "Custom Theme"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"name": "表格 (table)",
|
||||
"title": "Table 表格",
|
||||
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"name": "标签 (tag)",
|
||||
"title": "Tag 标签",
|
||||
"description": "Tag 标签"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"name": "进度条 (progress)",
|
||||
"title": "Progress 进度条",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"name": "tree (tree)",
|
||||
"title": "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"name": "分页 (pagination)",
|
||||
"title": "Pagination 分页",
|
||||
"description": "当数据量过多时, 使用分页分解数据"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"name": "标记 (badge)",
|
||||
"title": "Badge 标记",
|
||||
"description": "出现在按钮、图标旁的数字或状态标记"
|
||||
}
|
||||
]
|
||||
"name": "Changelog",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
"groupName": "Notice",
|
||||
"list": [
|
||||
"name": "Components",
|
||||
"groups": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"name": "警告 (alert)",
|
||||
"title": "Alert 警告",
|
||||
"description": "用于页面中展示重要的提示信息"
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"title": "Color"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"name": "加载 (loading)",
|
||||
"title": "Loading 加载",
|
||||
"description": "加载数据时显示"
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"title": "Input"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"title": "InputNumber"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"title": "Select"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"title": "Slider"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"title": "TimePicker"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"title": "DatePicker"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "DateTimePicker"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"title": "Upload"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"title": "Rate"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"title": "Form"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"name": "消息提示 (message)",
|
||||
"title": "Message 消息提示",
|
||||
"description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
|
||||
"groupName": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"title": "Table"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"title": "Tree"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"title": "Pagination"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"name": "弹框 (message-box)",
|
||||
"title": "MessageBox 弹框"
|
||||
"groupName": "Notice",
|
||||
"list": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"title": "Alert"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"title": "Message"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"title": "MessageBox"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"title": "Notification"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"name": "通知 (notification)",
|
||||
"title": "Notification 通知",
|
||||
"description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
|
||||
"groupName": "Navigation",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"title": "NavMenu"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"title": "Tabs"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"title": "Breadcrumb"
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"title": "Dropdown"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Others",
|
||||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"title": "Tooltip"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"title": "Popover"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Navigation",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"name": "导航菜单 (menu)",
|
||||
"title": "NavMenu 导航菜单",
|
||||
"description": "富展现的标签页"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"name": "标签页 (tabs)",
|
||||
"title": "Tabs 标签页",
|
||||
"description": "富展现的标签页"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"name": "面包屑 (breadcrumb)",
|
||||
"title": "Breadcrumb 面包屑",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"name": "下拉菜单 (dropdown)",
|
||||
"title": "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"name": "步骤条 (steps)",
|
||||
"title": "Steps 步骤",
|
||||
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Others",
|
||||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"name": "对话框 (dialog)",
|
||||
"title": "Dialog 对话框",
|
||||
"description": "在保留当前页面状态的情况下, 告知用户信息并承载相关操作。"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"name": "文字提示 (tooltip)",
|
||||
"title": "Tooltip 文字提示",
|
||||
"description": "优雅地展示文字提示信息"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"name": "弹出框 (popover)",
|
||||
"title": "Popover 弹出框",
|
||||
"description": "收纳具体内容和相关操作, 激活后弹出展现"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"name": "卡片 (card)",
|
||||
"title": "Card 卡片",
|
||||
"description": "将信息聚合在卡片容器中展示"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,166 +0,0 @@
|
|||
<style>
|
||||
.page-changelog {
|
||||
padding-bottom: 100px;
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
padding: 0;
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #475669;
|
||||
}
|
||||
&:hover a {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.timeline {
|
||||
margin: 0 0 0 105px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
color: #5e6d82;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
background-color: #eaeefa;
|
||||
}
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
line-height: 1.8;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: -10px;
|
||||
|
||||
h3:before {
|
||||
left: -33px;
|
||||
top: 10px;
|
||||
width: 17px;
|
||||
height: @width;
|
||||
background-color: #20a0ff;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
circle: 4px #5e6d82;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -31px;
|
||||
top: 13px;
|
||||
circle: 13px transparent;
|
||||
border: 2px solid #20a0ff;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin: 50px 0 10px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
position: absolute;
|
||||
left: -127px;
|
||||
font-style: normal;
|
||||
top: 6px;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<el-button class="fr">
|
||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
|
||||
</el-button>
|
||||
更新日志
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
<change-log ref="changeLog"></change-log>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../CHANGELOG.md';
|
||||
export default {
|
||||
components: {
|
||||
ChangeLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
count: 3
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const changeLog = this.$refs.changeLog;
|
||||
const changeLogNodes = changeLog.$el.children;
|
||||
let a = changeLogNodes[1].querySelector('a');
|
||||
a && a.remove();
|
||||
let release = changeLogNodes[1].textContent.trim();
|
||||
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
|
||||
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
||||
let node = changeLogNodes[i];
|
||||
a = changeLogNodes[i].querySelector('a');
|
||||
a && a.remove();
|
||||
if (node.tagName !== 'H3') {
|
||||
fragments += changeLogNodes[i].outerHTML;
|
||||
} else {
|
||||
release = changeLogNodes[i].textContent.trim();
|
||||
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
}
|
||||
}
|
||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
||||
|
||||
changeLog.$el.remove();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<style>
|
||||
.page-component {
|
||||
padding-bottom: 95px;
|
||||
}
|
||||
.page-component {
|
||||
.content {
|
||||
margin-left: -1px;
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 45px 0 15px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #eaeefb;
|
||||
background-color: #EFF2F7;
|
||||
}
|
||||
td, th {
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 10px;
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-component">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<side-nav :data="navsData" base="/component"></side-nav>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<router-view class="content"></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { navs } from '../route.config';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navsData: navs
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>设计原则</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>一致</h4>
|
||||
<span>Consistency</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>反馈</h4>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>效率</h4>
|
||||
<span>Efficiency</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>可控</h4>
|
||||
<span>Controllability</span>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>一致性 Consistency</h3>
|
||||
<ul>
|
||||
<li><strong>与现实生活一致：</strong>与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</li>
|
||||
<li><strong>在界面中一致：</strong>所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</li>
|
||||
</ul>
|
||||
<h3>反馈 Feedback</h3>
|
||||
<ul>
|
||||
<li><strong>控制反馈：</strong>通过界面样式和交互动效让用户可以清晰的感知自己的操作；</li>
|
||||
<li><strong>页面反馈：</strong>操作后，通过页面元素的变化清晰地展现当前状态。</li>
|
||||
</ul>
|
||||
<h3>效率 Efficiency</h3>
|
||||
<ul>
|
||||
<li><strong>简化流程：</strong>设计简洁直观的操作流程；</li>
|
||||
<li><strong>清晰明确：</strong>语言表达清晰且表意明确，让用户快速理解进而作出决策；</li>
|
||||
<li><strong>帮助用户识别：</strong>界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</li>
|
||||
</ul>
|
||||
<h3>可控 Controllability</h3>
|
||||
<ul>
|
||||
<li><strong>用户决策：</strong>根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</li>
|
||||
<li><strong>结果可控：</strong>用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Design Disciplines</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>Consistency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>Feedback</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>Efficiency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>Controllability</h4>
|
||||
<span></span>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>Consistency</h3>
|
||||
<ul>
|
||||
<li><strong>Consistent with real life: </strong>in line with the process and logic of real life, and comply with languages and habits that the users are used to;</li>
|
||||
<li><strong>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</li>
|
||||
</ul>
|
||||
<h3>Feedback</h3>
|
||||
<ul>
|
||||
<li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects;</li>
|
||||
<li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</li>
|
||||
</ul>
|
||||
<h3>Efficiency</h3>
|
||||
<ul>
|
||||
<li><strong>Simplify the process: </strong>keep operating process simple and intuitive;</li>
|
||||
<li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions;</li>
|
||||
<li><strong>Easy to identify: </strong>the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</li>
|
||||
</ul>
|
||||
<h3>Controllability</h3>
|
||||
<ul>
|
||||
<li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users;</li>
|
||||
<li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<style>
|
||||
.page-guide {
|
||||
padding: 55px 0 95px;
|
||||
|
||||
.content {
|
||||
padding-left: 25px;
|
||||
margin-left: -1px;
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 30px;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #99a9bf;
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
background-color: #5e6d82;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #5e6d82;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-guide">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<router-view class="content"></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: 'Design Disciplines'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: 'Navigation'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<style scoped>
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.nav-demos {
|
||||
p {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
h5 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
padding: 15px;
|
||||
background-color: #F9FAFC;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dialog-img {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
|
||||
.imgWrap {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #373737;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.zoom-enter-active,
|
||||
.zoom-leave-active {
|
||||
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.zoom-enter,
|
||||
.zoom-leave-active {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Navigation</h2>
|
||||
<div class="block">
|
||||
<p>Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Choose the right navigation</h3>
|
||||
<p>An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Side Navigation</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">
|
||||
<p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p>
|
||||
</el-col>
|
||||
<el-col :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 1 categories</h5>
|
||||
<p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 2 categories</h5>
|
||||
<p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 3 categories</h5>
|
||||
<p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Top Navigation</h3>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p>
|
||||
</el-col>
|
||||
<el-col :span="14" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
||||
<p>Suitable for sites with few navigations and large chunks.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
|
||||
</transition>
|
||||
<transition name="zoom">
|
||||
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
|
||||
<div class="imgWrap" :style="imgStyle">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: '',
|
||||
imgBound: {},
|
||||
showDialog: false,
|
||||
imgStyle: {},
|
||||
imgWrapStyle: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showDialog(val) {
|
||||
document.body.style.overflow = val ? 'hidden' : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enlarge(imgWidth, ev) {
|
||||
var imgNode = ev.target;
|
||||
// var bound = imgNode.getBoundingClientRect();
|
||||
var offset = {};
|
||||
var doc = document;
|
||||
|
||||
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
|
||||
offset.top = 100;
|
||||
|
||||
this.imgUrl = imgNode.src;
|
||||
this.imgBound = imgNode.getBoundingClientRect();
|
||||
|
||||
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
this.imgStyle.width = imgWidth + 'px';
|
||||
this.showDialog = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
<style scoped>
|
||||
.page-resource {
|
||||
padding-top: 55px;
|
||||
}
|
||||
.cards {
|
||||
margin: 35px auto 110px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 11px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
.card {
|
||||
height: 394px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: bottom .3s;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 75px auto 35px;
|
||||
height: 87px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
a {
|
||||
height: 42px;
|
||||
width: 190px;
|
||||
display: inline-block;
|
||||
line-height: @height;
|
||||
font-size: 14px;
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>Resource</h2>
|
||||
<p>Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.</p>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Axure-Components.svg" alt="">
|
||||
<h3>Axure Components</h3>
|
||||
<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
|
||||
<h3>Sketch Template</h3>
|
||||
<p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Module.svg" alt="">
|
||||
<h3>Interaction Design Documentation</h3>
|
||||
<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<style>
|
||||
.page-guide {
|
||||
padding: 55px 0 95px;
|
||||
|
||||
.content {
|
||||
padding-left: 25px;
|
||||
margin-left: -1px;
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 30px;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #99a9bf;
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
background-color: #5e6d82;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #5e6d82;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-guide">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<side-nav :data="navsData" base="/guide"></side-nav>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<router-view class="content"></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: '设计原则'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: '导航'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
<style scoped>
|
||||
.actor {
|
||||
min-height: 65px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 50px;
|
||||
vertical-align: -8px;
|
||||
margin-left: 5px;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
animation: blink 400ms infinite alternate;
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
position: relative;
|
||||
height: 420px;
|
||||
color: #fff;
|
||||
margin-bottom: 130px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
.banner-sky {
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
bottom: -15px;
|
||||
width: 100%;
|
||||
margin-top: -140px;
|
||||
transform: skewY(-5deg);
|
||||
transform-origin: center;
|
||||
background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
|
||||
}
|
||||
img.banner-stars {
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.banner-desc {
|
||||
padding-top: 110px;
|
||||
padding-left: 30px;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
font-size: 46px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
opacity: .8;
|
||||
width: 420px;
|
||||
line-height: 1.8;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all .3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: #20a0ff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid #eaeefb;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
background: #20a0ff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
|
||||
}
|
||||
}
|
||||
@keyframes blink {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<div class="banner-sky"></div>
|
||||
<img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
|
||||
<div class="container">
|
||||
<div class="banner-desc">
|
||||
<h2>网站快速成型工具</h2>
|
||||
<div id="line2" class="actor"></div>
|
||||
<p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。</p>
|
||||
</div>
|
||||
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>指南</h3>
|
||||
<p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/guide/design"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>组件</h3>
|
||||
<p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/component/layout"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>资源</h3>
|
||||
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/resource"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import theaterJS from 'theaterjs';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
function typing(theater) {
|
||||
theater
|
||||
.addScene('产品设计师', 1800, -5, 800)
|
||||
.addScene('交互设计师', 1800, -5, 500)
|
||||
.addScene('视觉设计师', 1800, -5, 700)
|
||||
.addScene('产品经理', 1800, -4, 600)
|
||||
.addScene('前端工程师', 1800, -5, 800)
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
});
|
||||
}
|
||||
var theater = theaterJS();
|
||||
theater
|
||||
.on('type:start, erase:start', function() {
|
||||
theater.getCurrentActor().$element.classList.add('typing');
|
||||
})
|
||||
.on('type:end, erase:end', function() {
|
||||
theater.getCurrentActor().$element.classList.remove('typing');
|
||||
});
|
||||
theater
|
||||
.addActor('line2', { speed: 0.5, accuracy: 1 })
|
||||
.addScene(2600)
|
||||
.addScene('line2:只为守护世界和平', 300, -6, 1000)
|
||||
.addScene('让你少加班', 300, -5)
|
||||
.addScene('line2:只为这样的你: ', 400)
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<style scoped>
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.nav-demos {
|
||||
p {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
h5 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
padding: 15px;
|
||||
background-color: #F9FAFC;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dialog-img {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
|
||||
.imgWrap {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #373737;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.zoom-enter-active,
|
||||
.zoom-leave-active {
|
||||
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.zoom-enter,
|
||||
.zoom-leave-active {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>导航</h2>
|
||||
<div class="block">
|
||||
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>选择合适的导航</h3>
|
||||
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>侧栏导航</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">
|
||||
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
|
||||
</el-col>
|
||||
<el-col :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
|
||||
<h5>一级类目</h5>
|
||||
<p>适用于结构简单的网站：只有一级页面时，不需要使用面包屑。</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
|
||||
<h5>二级类目</h5>
|
||||
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
|
||||
<h5>三级类目</h5>
|
||||
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>顶部导航</h3>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
|
||||
</el-col>
|
||||
<el-col :span="14" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
||||
<p>适用于导航较少，页面篇幅较长的网站；</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
|
||||
</transition>
|
||||
<transition name="zoom">
|
||||
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
|
||||
<div class="imgWrap" :style="imgStyle">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: '',
|
||||
imgBound: {},
|
||||
showDialog: false,
|
||||
imgStyle: {},
|
||||
imgWrapStyle: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showDialog(val) {
|
||||
document.body.style.overflow = val ? 'hidden' : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enlarge(imgWidth, ev) {
|
||||
var imgNode = ev.target;
|
||||
// var bound = imgNode.getBoundingClientRect();
|
||||
var offset = {};
|
||||
var doc = document;
|
||||
|
||||
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
|
||||
offset.top = 100;
|
||||
|
||||
this.imgUrl = imgNode.src;
|
||||
this.imgBound = imgNode.getBoundingClientRect();
|
||||
|
||||
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
this.imgStyle.width = imgWidth + 'px';
|
||||
this.showDialog = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
<el-button class="fr">
|
||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
|
||||
</el-button>
|
||||
Changelog
|
||||
<%= 1 >
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../../CHANGELOG.en-US.md';
|
||||
import ChangeLog from '../../../CHANGELOG.<%= 2 >.md';
|
||||
export default {
|
||||
components: {
|
||||
ChangeLog
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2><%= 1 ></h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4><%= 2 ></h4>
|
||||
<span><%= 3 ></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4><%= 4 ></h4>
|
||||
<span><%= 5 ></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4><%= 6 ></h4>
|
||||
<span><%= 7 ></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4><%= 8 ></h4>
|
||||
<span><%= 9 ></span>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3><%= 10 ></h3>
|
||||
<ul>
|
||||
<li><strong><%= 11 ></strong><%= 12 ></li>
|
||||
<li><strong><%= 13 ></strong><%= 14 ></li>
|
||||
</ul>
|
||||
<h3><%= 15 ></h3>
|
||||
<ul>
|
||||
<li><strong><%= 16 ></strong><%= 17 ></li>
|
||||
<li><strong><%= 18 ></strong><%= 19 ></li>
|
||||
</ul>
|
||||
<h3><%= 20 ></h3>
|
||||
<ul>
|
||||
<li><strong><%= 21 ></strong><%= 22 ></li>
|
||||
<li><strong><%= 23 ></strong><%= 24 ></li>
|
||||
<li><strong><%= 25 ></strong><%= 26 ></li>
|
||||
</ul>
|
||||
<h3><%= 27 ></h3>
|
||||
<ul>
|
||||
<li><strong><%= 28 ></strong><%= 29 ></li>
|
||||
<li><strong><%= 30 ></strong><%= 31 ></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -69,11 +69,11 @@
|
|||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: '设计原则'
|
||||
name: '<%= 1 >'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: '导航'
|
||||
name: '<%= 2 >'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -47,12 +47,12 @@
|
|||
.banner-desc {
|
||||
padding-top: 110px;
|
||||
padding-left: 30px;
|
||||
font-size: 42px;
|
||||
font-size: <%= theatreSize >px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
font-size: <%= titleSize >px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
font-size: 14px;
|
||||
opacity: .8;
|
||||
width: 420px;
|
||||
line-height: 1.6;
|
||||
line-height: <%= paraHeight >;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 1.6;
|
||||
line-height: <%= paraHeight >;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
|
|
@ -163,9 +163,9 @@
|
|||
<img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
|
||||
<div class="container">
|
||||
<div class="banner-desc">
|
||||
<h2>A Desktop UI Library</h2>
|
||||
<h2><%= 1 ></h2>
|
||||
<div id="line2" class="actor"></div>
|
||||
<p>Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.</p>
|
||||
<p><%= 2 ></p>
|
||||
</div>
|
||||
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
|
||||
</div>
|
||||
|
|
@ -175,36 +175,36 @@
|
|||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>Guide</h3>
|
||||
<p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p>
|
||||
<h3><%= 3 ></h3>
|
||||
<p><%= 4 ></p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/guide/design"
|
||||
exact>View Detail
|
||||
exact><%= 5 >
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>Component</h3>
|
||||
<p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p>
|
||||
<h3><%= 6 ></h3>
|
||||
<p><%= 7 ></p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/component/layout"
|
||||
exact>View Detail
|
||||
exact><%= 5 >
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>Resource</h3>
|
||||
<p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p>
|
||||
<h3><%= 8 ></h3>
|
||||
<p><%= 9 ></p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/resource"
|
||||
exact>View Detail
|
||||
exact><%= 5 >
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -219,17 +219,13 @@
|
|||
mounted() {
|
||||
function typing(theater) {
|
||||
theater
|
||||
.addScene('product designer', 1800, -16, 800)
|
||||
.addScene('UI designer', 1800, -11, 800)
|
||||
.addScene('UX designer', 1800, -11, 800)
|
||||
.addScene('product manager', 1800, -15, 800)
|
||||
.addScene('FE developer', 1800, -12, 800)
|
||||
<%= typingFunc >
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
});
|
||||
}
|
||||
var theater = theaterJS({ maxSpeed: 100 });
|
||||
var theater = theaterJS(<%= theatreParam >);
|
||||
theater
|
||||
.on('type:start, erase:start', function() {
|
||||
theater.getCurrentActor().$element.classList.add('typing');
|
||||
|
|
@ -238,9 +234,7 @@
|
|||
theater.getCurrentActor().$element.classList.remove('typing');
|
||||
});
|
||||
theater
|
||||
.addActor('line2', { speed: 1, accuracy: 1 })
|
||||
.addScene(2600)
|
||||
.addScene('line2:Just for ', 500)
|
||||
<%= typingInvoke >
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
|
|
@ -76,42 +76,42 @@
|
|||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>导航</h2>
|
||||
<h2><%= 1 ></h2>
|
||||
<div class="block">
|
||||
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。</p>
|
||||
<p><%= 2 ></p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>选择合适的导航</h3>
|
||||
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。</p>
|
||||
<h3><%= 3 ></h3>
|
||||
<p><%= 4 ></p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>侧栏导航</h3>
|
||||
<h3><%= 5 ></h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">
|
||||
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
|
||||
<p><%= 6 ></p>
|
||||
</el-col>
|
||||
<el-col :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
|
||||
<h5>一级类目</h5>
|
||||
<p>适用于结构简单的网站：只有一级页面时，不需要使用面包屑。</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
|
||||
<h5>二级类目</h5>
|
||||
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
|
||||
<h5>三级类目</h5>
|
||||
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="<%= 7 >" @click="enlarge(846, $event)">
|
||||
<h5><%= 7 ></h5>
|
||||
<p><%= 8 ></p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="<%= 9 >" @click="enlarge(846, $event)">
|
||||
<h5><%= 9 ></h5>
|
||||
<p><%= 10 ></p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="<%= 11 >" @click="enlarge(846, $event)">
|
||||
<h5><%= 11 ></h5>
|
||||
<p><%= 12 ></p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>顶部导航</h3>
|
||||
<h3><%= 13 ></h3>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
|
||||
<p><%= 14 ></p>
|
||||
</el-col>
|
||||
<el-col :span="14" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
||||
<p>适用于导航较少，页面篇幅较长的网站。</p>
|
||||
<p><%= 15 ></p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
color: #99a9bf;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
line-height: <%= paraHeight >;
|
||||
}
|
||||
a {
|
||||
height: 42px;
|
||||
|
|
@ -78,32 +79,32 @@
|
|||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>资源</h2>
|
||||
<p>这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。</p>
|
||||
<h2><%= 1 ></h2>
|
||||
<p><%= 2 ></p>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Axure-Components.svg" alt="">
|
||||
<h3>Axure Components</h3>
|
||||
<p>通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">下载</a>
|
||||
<h3><%= 3 ></h3>
|
||||
<p><%= 4 ></p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
|
||||
<h3>Sketch Template</h3>
|
||||
<p>从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">下载</a>
|
||||
<h3><%= 6 ></h3>
|
||||
<p><%= 7 ></p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Module.svg" alt="">
|
||||
<h3>组件交互文档</h3>
|
||||
<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">下载</a>
|
||||
<h3><%= 8 ></h3>
|
||||
<p><%= 9 ></p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<style>
|
||||
.page-changelog {
|
||||
padding-bottom: 100px;
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
padding: 0;
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #475669;
|
||||
}
|
||||
&:hover a {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.timeline {
|
||||
margin: 0 0 0 105px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
color: #5e6d82;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
background-color: #eaeefa;
|
||||
}
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
line-height: 1.8;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: -10px;
|
||||
|
||||
h3:before {
|
||||
left: -33px;
|
||||
top: 10px;
|
||||
width: 17px;
|
||||
height: @width;
|
||||
background-color: #20a0ff;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
circle: 4px #5e6d82;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -31px;
|
||||
top: 13px;
|
||||
circle: 13px transparent;
|
||||
border: 2px solid #20a0ff;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin: 50px 0 10px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
position: absolute;
|
||||
left: -127px;
|
||||
font-style: normal;
|
||||
top: 6px;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<el-button class="fr">
|
||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
|
||||
</el-button>
|
||||
更新日志
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
<change-log ref="changeLog"></change-log>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../../CHANGELOG.zh-CN.md';
|
||||
export default {
|
||||
components: {
|
||||
ChangeLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
count: 3
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const changeLog = this.$refs.changeLog;
|
||||
const changeLogNodes = changeLog.$el.children;
|
||||
let a = changeLogNodes[1].querySelector('a');
|
||||
a && a.remove();
|
||||
let release = changeLogNodes[1].textContent.trim();
|
||||
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
|
||||
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
||||
let node = changeLogNodes[i];
|
||||
a = changeLogNodes[i].querySelector('a');
|
||||
a && a.remove();
|
||||
if (node.tagName !== 'H3') {
|
||||
fragments += changeLogNodes[i].outerHTML;
|
||||
} else {
|
||||
release = changeLogNodes[i].textContent.trim();
|
||||
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
}
|
||||
}
|
||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
||||
|
||||
changeLog.$el.remove();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<style>
|
||||
.page-component {
|
||||
padding-bottom: 95px;
|
||||
}
|
||||
.page-component {
|
||||
.content {
|
||||
margin-left: -1px;
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 45px 0 15px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #eaeefb;
|
||||
background-color: #EFF2F7;
|
||||
}
|
||||
td, th {
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 10px;
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-component">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<router-view class="content"></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import navsData from '../../nav.config.json';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>设计原则</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>一致</h4>
|
||||
<span>Consistency</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>反馈</h4>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>效率</h4>
|
||||
<span>Efficiency</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>可控</h4>
|
||||
<span>Controllability</span>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>一致性 Consistency</h3>
|
||||
<ul>
|
||||
<li><strong>与现实生活一致：</strong>与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</li>
|
||||
<li><strong>在界面中一致：</strong>所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</li>
|
||||
</ul>
|
||||
<h3>反馈 Feedback</h3>
|
||||
<ul>
|
||||
<li><strong>控制反馈：</strong>通过界面样式和交互动效让用户可以清晰的感知自己的操作；</li>
|
||||
<li><strong>页面反馈：</strong>操作后，通过页面元素的变化清晰地展现当前状态。</li>
|
||||
</ul>
|
||||
<h3>效率 Efficiency</h3>
|
||||
<ul>
|
||||
<li><strong>简化流程：</strong>设计简洁直观的操作流程；</li>
|
||||
<li><strong>清晰明确：</strong>语言表达清晰且表意明确，让用户快速理解进而作出决策；</li>
|
||||
<li><strong>帮助用户识别：</strong>界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</li>
|
||||
</ul>
|
||||
<h3>可控 Controllability</h3>
|
||||
<ul>
|
||||
<li><strong>用户决策：</strong>根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</li>
|
||||
<li><strong>结果可控：</strong>用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
<style scoped>
|
||||
.actor {
|
||||
min-height: 65px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 50px;
|
||||
vertical-align: -8px;
|
||||
margin-left: 5px;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
animation: blink 400ms infinite alternate;
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
position: relative;
|
||||
height: 420px;
|
||||
color: #fff;
|
||||
margin-bottom: 130px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
.banner-sky {
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
bottom: -15px;
|
||||
width: 100%;
|
||||
margin-top: -140px;
|
||||
transform: skewY(-5deg);
|
||||
transform-origin: center;
|
||||
background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
|
||||
}
|
||||
img.banner-stars {
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.banner-desc {
|
||||
padding-top: 110px;
|
||||
padding-left: 30px;
|
||||
font-size: 46px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
font-size: 46px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
opacity: .8;
|
||||
width: 420px;
|
||||
line-height: 1.8;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all .3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: #20a0ff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid #eaeefb;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
background: #20a0ff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
|
||||
}
|
||||
}
|
||||
@keyframes blink {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<div class="banner-sky"></div>
|
||||
<img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
|
||||
<div class="container">
|
||||
<div class="banner-desc">
|
||||
<h2>网站快速成型工具</h2>
|
||||
<div id="line2" class="actor"></div>
|
||||
<p>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。</p>
|
||||
</div>
|
||||
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>指南</h3>
|
||||
<p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/guide/design"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>组件</h3>
|
||||
<p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/component/layout"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>资源</h3>
|
||||
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/resource"
|
||||
exact>查看详情
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import theaterJS from 'theaterjs';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
function typing(theater) {
|
||||
theater
|
||||
.addScene('产品设计师', 1800, -5, 800)
|
||||
.addScene('交互设计师', 1800, -5, 500)
|
||||
.addScene('视觉设计师', 1800, -5, 700)
|
||||
.addScene('产品经理', 1800, -4, 600)
|
||||
.addScene('前端工程师', 1800, -5, 800)
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
});
|
||||
}
|
||||
var theater = theaterJS();
|
||||
theater
|
||||
.on('type:start, erase:start', function() {
|
||||
theater.getCurrentActor().$element.classList.add('typing');
|
||||
})
|
||||
.on('type:end, erase:end', function() {
|
||||
theater.getCurrentActor().$element.classList.remove('typing');
|
||||
});
|
||||
theater
|
||||
.addActor('line2', { speed: 0.5, accuracy: 1 })
|
||||
.addScene(2600)
|
||||
.addScene('line2:只为守护世界和平', 300, -6, 1000)
|
||||
.addScene('让你少加班', 300, -5)
|
||||
.addScene('line2:只为这样的你: ', 400)
|
||||
.addScene((done) => {
|
||||
typing(theater);
|
||||
done();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
<style scoped>
|
||||
.page-resource {
|
||||
padding-top: 55px;
|
||||
}
|
||||
.cards {
|
||||
margin: 35px auto 110px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 11px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
.card {
|
||||
height: 394px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: bottom .3s;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 75px auto 35px;
|
||||
height: 87px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
a {
|
||||
height: 42px;
|
||||
width: 190px;
|
||||
display: inline-block;
|
||||
line-height: @height;
|
||||
font-size: 14px;
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>资源</h2>
|
||||
<p>这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。</p>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Axure-Components.svg" alt="">
|
||||
<h3>Axure Components</h3>
|
||||
<p>通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">下载</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
|
||||
<h3>Sketch Template</h3>
|
||||
<p>从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">下载</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/Module.svg" alt="">
|
||||
<h3>组件交互文档</h3>
|
||||
<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>
|
||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">下载</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,81 +1,96 @@
|
|||
import navConfig from './nav.config.json';
|
||||
import langs from './i18n/route.json';
|
||||
|
||||
const registerRoute = (config) => {
|
||||
let route = [{
|
||||
path: '/component',
|
||||
redirect: '/component/installation',
|
||||
component: require('./pages/component.vue'),
|
||||
children: []
|
||||
}];
|
||||
function addRoute(page) {
|
||||
const component = page.path === '/changelog' ? require('./pages/changelog.vue') : require(`./docs/zh-CN${page.path}.md`);
|
||||
const registerRoute = (navConfig) => {
|
||||
let route = [];
|
||||
Object.keys(navConfig).forEach((lang, index) => {
|
||||
let navs = navConfig[lang];
|
||||
route.push({
|
||||
path: `/${ lang }/component`,
|
||||
redirect: `/${ lang }/component/installation`,
|
||||
component: require(`./pages/${ lang }/component.vue`),
|
||||
children: []
|
||||
});
|
||||
navs.forEach(nav => {
|
||||
if (nav.groups) {
|
||||
nav.groups.forEach(group => {
|
||||
group.list.forEach(nav => {
|
||||
addRoute(nav, lang, index);
|
||||
});
|
||||
});
|
||||
} else if (nav.children) {
|
||||
nav.children.forEach(nav => {
|
||||
addRoute(nav, lang, index);
|
||||
});
|
||||
} else {
|
||||
addRoute(nav, lang, index);
|
||||
}
|
||||
});
|
||||
});
|
||||
function addRoute(page, lang, index) {
|
||||
const component = page.path === '/changelog'
|
||||
? require(`./pages/${ lang }/changelog.vue`)
|
||||
: require(`./docs/${ lang }${page.path}.md`);
|
||||
let child = {
|
||||
path: page.path.slice(1),
|
||||
meta: {
|
||||
title: page.title || page.name,
|
||||
description: page.description
|
||||
description: page.description,
|
||||
lang
|
||||
},
|
||||
component: component.default || component
|
||||
};
|
||||
|
||||
route[0].children.push(child);
|
||||
route[index].children.push(child);
|
||||
}
|
||||
config
|
||||
.map(nav => {
|
||||
if (nav.groups) {
|
||||
nav.groups.map(group => {
|
||||
group.list.map(page => {
|
||||
addRoute(page);
|
||||
});
|
||||
});
|
||||
} else if (nav.children) {
|
||||
nav.children.map(page => {
|
||||
addRoute(page);
|
||||
});
|
||||
} else {
|
||||
addRoute(nav);
|
||||
}
|
||||
});
|
||||
|
||||
return { route, navs: config };
|
||||
return route;
|
||||
};
|
||||
|
||||
const route = registerRoute(navConfig);
|
||||
let route = registerRoute(navConfig);
|
||||
|
||||
let guideRoute = {
|
||||
path: '/guide',
|
||||
name: '指南',
|
||||
redirect: '/guide/design',
|
||||
component: require('./pages/guide.vue'),
|
||||
children: [{
|
||||
path: 'design',
|
||||
name: '设计原则',
|
||||
component: require('./pages/design.vue')
|
||||
}, {
|
||||
path: 'nav',
|
||||
name: '导航',
|
||||
component: require('./pages/nav.vue')
|
||||
}]
|
||||
function generateMiscRoutes(lang) {
|
||||
let guideRoute = {
|
||||
path: `/${ lang }/guide`, // 指南
|
||||
redirect: `/${ lang }/guide/design`,
|
||||
component: require(`./pages/${ lang }/guide.vue`),
|
||||
children: [{
|
||||
path: 'design', // 设计原则
|
||||
meta: { lang },
|
||||
component: require(`./pages/${ lang }/design.vue`)
|
||||
}, {
|
||||
path: 'nav', // 导航
|
||||
meta: { lang },
|
||||
component: require(`./pages/${ lang }/nav.vue`)
|
||||
}]
|
||||
};
|
||||
|
||||
let resourceRoute = {
|
||||
path: `/${ lang }/resource`, // 资源
|
||||
meta: { lang },
|
||||
component: require(`./pages/${ lang }/resource.vue`)
|
||||
};
|
||||
|
||||
let indexRoute = {
|
||||
path: `/${ lang }`, // 首页
|
||||
meta: { lang },
|
||||
name: 'home',
|
||||
component: require(`./pages/${ lang }/index.vue`)
|
||||
};
|
||||
|
||||
return [guideRoute, resourceRoute, indexRoute];
|
||||
};
|
||||
|
||||
let resourceRoute = {
|
||||
path: '/resource',
|
||||
name: '资源',
|
||||
component: require('./pages/resource.vue')
|
||||
};
|
||||
|
||||
let indexRoute = {
|
||||
path: '/',
|
||||
name: '首页',
|
||||
component: require('./pages/index.vue')
|
||||
};
|
||||
|
||||
route.route = route.route.concat([indexRoute, guideRoute, resourceRoute]);
|
||||
|
||||
route.route.push({
|
||||
path: '*',
|
||||
component: require('./docs/zh-CN/home.md')
|
||||
langs.forEach(lang => {
|
||||
route = route.concat(generateMiscRoutes(lang.lang));
|
||||
});
|
||||
|
||||
export const navs = route.navs;
|
||||
export default route.route;
|
||||
route = route.concat([{
|
||||
path: '/',
|
||||
redirect: '/zh-CN'
|
||||
}, {
|
||||
path: '*',
|
||||
redirect: '/zh-CN'
|
||||
}]);
|
||||
|
||||
export default route;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
],
|
||||
"scripts": {
|
||||
"bootstrap": "npm i",
|
||||
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js",
|
||||
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js",
|
||||
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
|
||||
|
|
@ -23,7 +23,8 @@
|
|||
"pub": "git checkout master && git pull eleme master --rebase && sh build/release.sh",
|
||||
"pub:all": "npm run dist:all && lerna publish",
|
||||
"test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "karma start test/unit/karma.conf.js"
|
||||
"test:watch": "karma start test/unit/karma.conf.js",
|
||||
"i18n": "node build/bin/i18n.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
Loading…
Reference in New Issue