Skip to content

E
Element
Commit 4ccb8ea9 authored by 杨奕's avatar 杨奕 Committed by FuryBean
Browse files
Options

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 master
parent a11e8d11
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 10036 additions and 2470 deletions
.gitignore
View file @ 4ccb8ea9
...@@ -7,6 +7,9 @@ lerna-debug.log.* ...@@ -7,6 +7,9 @@ lerna-debug.log.*
lib lib
.idea .idea
examples/element-ui examples/element-ui
examples/pages/en-US
examples/pages/zh-CN
fe.element/element-ui fe.element/element-ui
.npmrc .npmrc
coverage coverage
yarn.lock
CHANGELOG.en-US.md 0 → 100644
View file @ 4ccb8ea9
## 更新日志
### 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 发布
Makefile
View file @ 4ccb8ea9
...@@ -17,6 +17,9 @@ dev: ...@@ -17,6 +17,9 @@ dev:
new: new:
node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS)) node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
new-lang:
node build/bin/new-lang.js $(filter-out $@,$(MAKECMDGOALS))
dist: install dist: install
npm run dist npm run dist
...@@ -45,3 +48,4 @@ help: ...@@ -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 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\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 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'"
build/bin/i18n.js 0 → 100644
View file @ 4ccb8ea9
'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);
});
});
build/bin/new-lang.js 0 → 100644
View file @ 4ccb8ea9
'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!');
build/bin/new.js
View file @ 4ccb8ea9
...@@ -83,6 +83,10 @@ export default { ...@@ -83,6 +83,10 @@ export default {
filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`), filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),
content: `## ${chineseName}` content: `## ${chineseName}`
}, },
{
filename: path.join('../../examples/docs/en-us', `${componentname}.md`),
content: `## ${componentname}`
},
{ {
filename: path.join('../../test/unit/specs', `${componentname}.spec.js`), filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
content: `import { createTest, destroyVM } from '../util'; content: `import { createTest, destroyVM } from '../util';
...@@ -124,12 +128,14 @@ Files.forEach(file => { ...@@ -124,12 +128,14 @@ Files.forEach(file => {
// 添加到 nav.config.json // 添加到 nav.config.json
const navConfigFile = require('../../examples/nav.config.json'); const navConfigFile = require('../../examples/nav.config.json');
navConfigFile[2].groups[navConfigFile[2].groups.length - 1].list.push({ Object.keys(navConfigFile).forEach(lang => {
path: `/${componentname}`, let groups = navConfigFile[lang][2].groups;
name: `${chineseName} (${componentname})`, groups[groups.length - 1].list.push({
title: componentname === chineseName path: `/${componentname}`,
? componentname title: lang === 'zh-CN' && componentname !== chineseName
: `${componentname} ${chineseName}` ? `${ComponentName} ${chineseName}`
: ComponentName
});
}); });
fileSave(path.join(__dirname, '../../examples/nav.config.json')) fileSave(path.join(__dirname, '../../examples/nav.config.json'))
......
examples/app.vue
View file @ 4ccb8ea9
...@@ -114,9 +114,31 @@ ...@@ -114,9 +114,31 @@
</template> </template>
<script> <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 { export default {
name: 'app', name: 'app',
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
}
},
watch: {
lang() {
this.localize();
}
},
methods: { methods: {
localize() {
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
},
renderAnchorHref() { renderAnchorHref() {
if (/changelog/g.test(location.href)) return; if (/changelog/g.test(location.href)) return;
const anchors = document.querySelectorAll('h2 a,h3 a'); const anchors = document.querySelectorAll('h2 a,h3 a');
...@@ -143,6 +165,7 @@ ...@@ -143,6 +165,7 @@
}, },
mounted() { mounted() {
this.localize();
this.renderAnchorHref(); this.renderAnchorHref();
this.goAnchor(); this.goAnchor();
}, },
......
examples/assets/images/element-logo.svg 100755 → 100644
View file @ 4ccb8ea9
File mode changed from 100755 to 100644
examples/components/demo-block.vue
View file @ 4ccb8ea9
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<div class="meta"> <div class="meta">
<div class="description"> <div class="description">
<slot></slot> <slot></slot>
<el-tooltip effect="dark" content="前往 jsfiddle.net 运行此实例" placement="right"> <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
<el-button size="small" type="primary" @click="goJsfiddle">在线运行</el-button> <el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<slot name="highlight"></slot> <slot name="highlight"></slot>
...@@ -150,6 +150,8 @@ ...@@ -150,6 +150,8 @@
</style> </style>
<script type="text/babel"> <script type="text/babel">
import compoLang from '../i18n/component.json';
export default { export default {
data() { data() {
return { return {
...@@ -201,6 +203,14 @@ ...@@ -201,6 +203,14 @@
}, },
computed: { computed: {
lang() {
return this.$route.path.split('/')[1];
},
langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['demo-block'];
},
blockClass() { blockClass() {
return `demo-${ this.$router.currentRoute.path.split('/').pop() }`; return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
}, },
...@@ -210,7 +220,7 @@ ...@@ -210,7 +220,7 @@
}, },
controlText() { controlText() {
return this.isExpanded ? '隐藏代码' : '显示代码'; return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'];
}, },
codeArea() { codeArea() {
......
examples/components/footer-nav.vue
View file @ 4ccb8ea9
...@@ -74,15 +74,30 @@ ...@@ -74,15 +74,30 @@
}; };
}, },
computed: {
lang() {
return this.$route.meta.lang;
}
},
watch: { watch: {
'$route.path'() { '$route.path'() {
this.setNav();
this.updateNav(); this.updateNav();
} }
}, },
methods: { 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() { 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++) { for (let i = 0, len = this.nav.length; i < len; i++) {
if (this.nav[i].path === this.currentComponent) { if (this.nav[i].path === this.currentComponent) {
this.currentIndex = i; this.currentIndex = i;
...@@ -94,15 +109,12 @@ ...@@ -94,15 +109,12 @@
}, },
handleNavClick(direction) { 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() { created() {
this.nav = navConfig[0].children.concat(navConfig[1]); this.setNav();
navConfig[2].groups.map(group => group.list).forEach(list => {
this.nav = this.nav.concat(list);
});
this.updateNav(); this.updateNav();
} }
}; };
......
examples/components/footer.vue
View file @ 4ccb8ea9
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="container"> <div class="container">
<div class="footer-main"> <div class="footer-main">
<p class="footer-main-title">Element 1.0 Hydrogen</p> <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/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">贡献指南</a> <a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
</div> </div>
<div class="footer-social"> <div class="footer-social">
<el-popover <el-popover
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
width="120" width="120"
popper-class="footer-popover" popper-class="footer-popover"
trigger="hover"> 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=""> <img src="../assets/images/qrcode.png" alt="">
</el-popover> </el-popover>
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i> <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
...@@ -123,3 +123,19 @@ ...@@ -123,3 +123,19 @@
} }
} }
</style> </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>
examples/components/header.vue
View file @ 4ccb8ea9
...@@ -61,6 +61,27 @@ ...@@ -61,6 +61,27 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-left: 20px; 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 { a {
text-decoration: none; text-decoration: none;
...@@ -72,6 +93,10 @@ ...@@ -72,6 +93,10 @@
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
&.active {
font-weight: 700;
}
&.active::before { &.active::before {
content: ''; content: '';
...@@ -101,7 +126,7 @@ ...@@ -101,7 +126,7 @@
'header-home': isHome 'header-home': isHome
}"> }">
<div class="container"> <div class="container">
<h1><router-link to="/"> <h1><router-link :to="`/${ lang }`">
<img <img
src="../assets/images/element-logo.svg" src="../assets/images/element-logo.svg"
alt="element-logo" alt="element-logo"
...@@ -111,28 +136,45 @@ ...@@ -111,28 +136,45 @@
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
active-class="active" active-class="active"
to="/guide">指南 :to="`/${ lang }/guide`">{{ langConfig.guide }}
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
active-class="active" active-class="active"
to="/component">组件 :to="`/${ lang }/component`">{{ langConfig.components }}
</router-link> </router-link>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
active-class="active" active-class="active"
to="/resource" :to="`/${ lang }/resource`"
exact>资源 exact>{{ langConfig.resource }}
</router-link> </router-link>
</li> </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> </ul>
</div> </div>
</header> </header>
</div> </div>
</template> </template>
<script> <script>
import compoLang from '../i18n/component.json';
export default { export default {
data() { data() {
return { return {
...@@ -142,13 +184,27 @@ ...@@ -142,13 +184,27 @@
}; };
}, },
watch: { watch: {
'$route.path'(val) { '$route.path'() {
this.isHome = val === '/'; this.isHome = this.$route.name === 'home';
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`; 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() { mounted() {
this.isHome = this.$route.path === '/'; this.isHome = this.$route.name === 'home';
function scroll(fn) { function scroll(fn) {
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
fn(); fn();
......
examples/docs/en-US/alert.md 0 → 100644
View file @ 4ccb8ea9
<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 | — |
examples/docs/en-US/badge.md 0 → 100644
View file @ 4ccb8ea9
<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 |
\ No newline at end of file
examples/docs/en-US/breadcrumb.md 0 → 100644
View file @ 4ccb8ea9
## 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 |
examples/docs/en-US/button.md 0 → 100644
View file @ 4ccb8ea9
<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 |
\ No newline at end of file
examples/docs/en-US/card.md 0 → 100644
View file @ 4ccb8ea9
<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' } |
examples/docs/en-US/checkbox.md 0 → 100644
View file @ 4ccb8ea9
<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 |
examples/docs/en-US/color.md 0 → 100644
View file @ 4ccb8ea9
<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>
\ No newline at end of file
examples/docs/en-US/custom-theme.md 0 → 100644
View file @ 4ccb8ea9
## 自定义主题
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)。
examples/docs/en-US/date-picker.md 0 → 100644
View file @ 4ccb8ea9
<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 | — | — |
\ No newline at end of file
examples/docs/en-US/datetime-picker.md 0 → 100644
View file @ 4ccb8ea9
<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 | — | — |
examples/docs/en-US/dialog.md 0 → 100644
View file @ 4ccb8ea9
<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 | — |
examples/docs/en-US/dropdown.md 0 → 100644
View file @ 4ccb8ea9
<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 |
examples/docs/en-US/form.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/home.md 0 → 100644
View file @ 4ccb8ea9
# Components Document
<script>
import { addClass } from 'examples/dom/class.js';
module.exports = {
ready() {
addClass(this.$el.parentNode, 'no-toc')
}
}
</script>
\ No newline at end of file
examples/docs/en-US/i18n.md 0 → 100644
View file @ 4ccb8ea9
## 国际化
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) 添加一个语言配置文件即可。
examples/docs/en-US/icon.md 0 → 100644
View file @ 4ccb8ea9
<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>
\ No newline at end of file
examples/docs/en-US/input-number.md 0 → 100644
View file @ 4ccb8ea9
<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 |
\ No newline at end of file
examples/docs/en-US/input.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/installation.md 0 → 100644
View file @ 4ccb8ea9
## 安装
### 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 使用，请阅读下一节：快速上手。
examples/docs/en-US/layout.md 0 → 100644
View file @ 4ccb8ea9
<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 |
examples/docs/en-US/loading.md 0 → 100644
View file @ 4ccb8ea9
<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>
```
:::
examples/docs/en-US/menu.md 0 → 100644
View file @ 4ccb8ea9
<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 | — | — |
examples/docs/en-US/message-box.md 0 → 100644
View file @ 4ccb8ea9
<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 |
\ No newline at end of file
examples/docs/en-US/message.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/notification.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/pagination.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/popover.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/progress.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/quickstart.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/radio.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/rate.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/select.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/slider.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/steps.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/switch.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/table.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/tabs.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/tag.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/time-picker.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/tooltip.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/tree.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/typography.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/en-US/upload.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/zh-CN/layout.md
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/zh-CN/progress.md
View file @ 4ccb8ea9
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
百分比不占用额外控件，适用于文件上传等场景。 百分比不占用额外控件，适用于文件上传等场景。
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
......
examples/docs/zh-CN/tag.md
View file @ 4ccb8ea9
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.$remove(tag); this.tags.splice(this.tags.indexOf(tag), 1);
} }
} }
} }
......
examples/docs/zh-cn/custom-theme.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/zh-cn/i18n.md 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/docs/zh-CN/installation.md → examples/docs/zh-cn/installation.md
View file @ 4ccb8ea9
...@@ -50,4 +50,4 @@ npm i element-ui -D ...@@ -50,4 +50,4 @@ npm i element-ui -D
</script> </script>
</html> </html>
``` ```
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
\ No newline at end of file
examples/entry.js
View file @ 4ccb8ea9
import Vue from 'vue'; import Vue from 'vue';
import entry from './app'; import entry from './app';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import configRouter from './route.config'; import routes from './route.config';
import Element from 'main/index.js'; import Element from 'main/index.js';
import 'packages/theme-default/src/index.css'; import 'packages/theme-default/src/index.css';
import demoBlock from './components/demo-block.vue'; import demoBlock from './components/demo-block.vue';
...@@ -21,7 +21,7 @@ Vue.component('footer-nav', FooterNav); ...@@ -21,7 +21,7 @@ Vue.component('footer-nav', FooterNav);
const router = new VueRouter({ const router = new VueRouter({
mode: 'hash', mode: 'hash',
base: __dirname, base: __dirname,
routes: configRouter routes
}); });
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line
......
examples/i18n/component.json 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/i18n/page.json 0 → 100644
View file @ 4ccb8ea9
This diff is collapsed.
examples/i18n/route.json 0 → 100644
View file @ 4ccb8ea9
[
{
"lang": "zh-CN"
},
{
"lang": "en-US"
}
]
examples/nav.config.json
View file @ 4ccb8ea9
This diff is collapsed.
examples/pages/changelog.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/component.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/en-US/design.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/en-US/guide.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/en-US/nav.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/en-US/resource.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/guide.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/index.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/nav.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/zh-CN/changelog.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/zh-CN/component.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/zh-CN/design.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/zh-CN/index.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/pages/zh-CN/resource.vue deleted 100644 → 0
View file @ a11e8d11
This diff is collapsed.
examples/route.config.js
View file @ 4ccb8ea9
This diff is collapsed.
package.json
View file @ 4ccb8ea9
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment