github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Chore: speeding up doc building (#14510)

pull/14541/head
hetech 2019-03-01 18:35:08 +08:00 committed by iamkun
parent 91fb5c5571
commit 5b0d8ec6d9
244 changed files with 1548 additions and 15773 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.fr-FR.md
View File

@ -870,4 +870,4 @@
- Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet
##
<i><sup><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.
<i><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.

26
build/md-loader/config.js Normal file
View File

@ -0,0 +1,26 @@
const Config = require('markdown-it-chain');
const anchorPlugin = require('markdown-it-anchor');
const slugify = require('transliteration').slugify;
const containers = require('./containers');
const overWriteFenceRule = require('./fence');
const config = new Config();
config
.options.html(true).end()
.plugin('anchor').use(anchorPlugin, [
{
level: 2,
slugify: slugify,
permalink: true,
permalinkBefore: true
}
]).end()
.plugin('containers').use(containers).end();
const md = config.toMd();
overWriteFenceRule(md);
module.exports = md;

24
build/md-loader/containers.js Normal file
View File

@ -0,0 +1,24 @@
const mdContainer = require('markdown-it-container');
module.exports = md => {
md.use(mdContainer, 'demo', {
validate(params) {
return params.trim().match(/^demo\s*(.*)$/);
},
render(tokens, idx) {
const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
const description = m && m.length > 1 ? m[1] : '';
const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
return `<demo-block>
<div>${md.render(description)}</div>
<!--element-demo: ${content}:element-demo-->
`;
}
return '</demo-block>';
}
});
md.use(mdContainer, 'tip');
md.use(mdContainer, 'warning');
};

14
build/md-loader/fence.js Normal file
View File

@ -0,0 +1,14 @@
// 覆盖默认的 fence 渲染策略
module.exports = md => {
const defaultRender = md.renderer.rules.fence;
md.renderer.rules.fence = (tokens, idx, options, env, self) => {
const token = tokens[idx];
// 判断该 fence 是否在 :::demo 内
const prevToken = tokens[idx - 1];
const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
if (token.info === 'html' && isInDemoContainer) {
return `<template slot="highlight"><pre v-pre><code class="html">${md.utils.escapeHtml(token.content)}</code></pre></template>`;
}
return defaultRender(tokens, idx, options, env, self);
};
};

67
build/md-loader/index.js Normal file
View File

@ -0,0 +1,67 @@
const {
stripScript,
stripTemplate,
genInlineComponentText
} = require('./util');
const md = require('./config');
module.exports = function(source) {
const content = md.render(source);
const startTag = '<!--element-demo:';
const startTagLen = startTag.length;
const endTag = ':element-demo-->';
const endTagLen = endTag.length;
let componenetsString = '';
let id = 0; // demo 的 id
let output = []; // 输出的内容
let start = 0; // 字符串开始位置
let commentStart = content.indexOf(startTag);
let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
while (commentStart !== -1 && commentEnd !== -1) {
output.push(content.slice(start, commentStart));
const commentContent = content.slice(commentStart + startTagLen, commentEnd);
const html = stripTemplate(commentContent);
const script = stripScript(commentContent);
let demoComponentContent = genInlineComponentText(html, script);
const demoComponentName = `element-demo${id}`;
output.push(`<${demoComponentName} slot="source" />`);
componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;
// 重新计算下一次的位置
id++;
start = commentEnd + endTagLen;
commentStart = content.indexOf(startTag, start);
commentEnd = content.indexOf(endTag, commentStart + startTagLen);
}
// 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签
// todo: 优化这段逻辑
let pageScript = '';
if (componenetsString) {
pageScript = `<script>
export default {
name: 'component-doc',
components: {
${componenetsString}
}
}
</script>`;
} else if (content.indexOf('<script>') === 0) { // 硬编码，有待改善
start = content.indexOf('</script>') + '</script>'.length;
pageScript = content.slice(0, start);
}
output.push(content.slice(start));
return `
<template>
<section class="content element-doc">
${output.join('')}
</section>
</template>
${pageScript}
`;
};

79
build/md-loader/util.js Normal file
View File

@ -0,0 +1,79 @@
const { compileTemplate } = require('@vue/component-compiler-utils');
const compiler = require('vue-template-compiler');
function stripScript(content) {
const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
return result && result[2] ? result[2].trim() : '';
}
function stripStyle(content) {
const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
return result && result[2] ? result[2].trim() : '';
}
// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
function stripTemplate(content) {
content = content.trim();
if (!content) {
return content;
}
return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
}
function pad(source) {
return source
.split(/\r?\n/)
.map(line => ` ${line}`)
.join('\n');
}
function genInlineComponentText(template, script) {
// https://github.com/vuejs/vue-loader/blob/master/lib/loaders/templateLoader.js#L29
const finalOptions = {
source: `<div>${template}</div>`,
filename: 'inline-component', // TODO：这里有待调整
compiler
};
const compiled = compileTemplate(finalOptions);
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
console.warn(tip);
});
}
// errors
if (compiled.errors && compiled.errors.length) {
console.error(
`\n Error compiling template:\n${pad(compiled.source)}\n` +
compiled.errors.map(e => ` - ${e}`).join('\n') +
'\n'
);
}
let demoComponentContent = `
${compiled.code}
`;
// todo: 这里采用了硬编码有待改进
script = script.trim();
if (script) {
script = script.replace(/export\s+default/, 'const democomponentExport =');
} else {
script = 'const democomponentExport = {}';
}
demoComponentContent = `(function demo() {
${demoComponentContent}
${script}
return {
...democomponentExport,
render,
staticRenderFns
}
})()`;
return demoComponentContent;
}
module.exports = {
stripScript,
stripStyle,
stripTemplate,
genInlineComponentText
};

34
build/strip-tags.js
View File

@ -1,34 +0,0 @@
/*!
* strip-tags <https://github.com/jonschlinkert/strip-tags>
*
* Copyright (c) 2015 Jon Schlinkert, contributors.
* Licensed under the MIT license.
*/
'use strict';
var cheerio = require('cheerio');
exports.strip = function(str, tags) {
var $ = cheerio.load(str, {decodeEntities: false});
if (!tags || tags.length === 0) {
return str;
}
tags = !Array.isArray(tags) ? [tags] : tags;
var len = tags.length;
while (len--) {
$(tags[len]).remove();
}
return $.html();
};
exports.fetch = function(str, tag) {
var $ = cheerio.load(str, {decodeEntities: false});
if (!tag) return str;
return $(tag).html();
};

86
build/webpack.demo.js
View File

@ -7,30 +7,12 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const md = require('markdown-it')();
const slugify = require('transliteration').slugify;
const striptags = require('./strip-tags');
const config = require('./config');
const isProd = process.env.NODE_ENV === 'production';
const isPlay = !!process.env.PLAY_ENV;
function convert(str) {
str = str.replace(/(&#x)(\w{4});/gi, function($0) {
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
});
return str;
}
function wrap(render) {
return function() {
return render.apply(this, arguments)
.replace('<code v-pre class="', '<code class="hljs ')
.replace('<code>', '<code class="hljs">');
};
}
const webpackConfig = {
mode: process.env.NODE_ENV,
entry: isProd ? {
@ -93,67 +75,24 @@ const webpackConfig = {
},
{
test: /\.md$/,
loaders: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
preventExtract: true,
raw: true,
preprocess: function(MarkdownIt, source) {
MarkdownIt.renderer.rules.table_open = function() {
return '<table class="table">';
};
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
return source;
},
use: [
[require('markdown-it-anchor'), {
level: 2,
slugify: slugify,
permalink: true,
permalinkBefore: true
}],
[require('markdown-it-container'), 'demo', {
validate: function(params) {
return params.trim().match(/^demo\s*(.*)$/);
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : '';
var content = tokens[idx + 1].content;
var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
var script = striptags.fetch(content, 'script');
var style = striptags.fetch(content, 'style');
var jsfiddle = { html: html, script: script, style: style };
var descriptionHTML = description
? md.render(description)
: '';
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
<div class="source" slot="source">${html}</div>
${descriptionHTML}
<div class="highlight" slot="highlight">`;
}
return '</div></demo-block>\n';
}
}],
[require('markdown-it-container'), 'tip'],
[require('markdown-it-container'), 'warning']
]
}
{
loader: path.resolve(__dirname, './md-loader/index.js')
}
]
},
{
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
loader: 'url-loader',
// todo: 这种写法有待调整
query: {
limit: 10000,
name: path.posix.join('static', '[name].[hash:7].[ext]')
@ -189,6 +128,11 @@ const webpackConfig = {
};
if (isProd) {
webpackConfig.externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
'highlight.js': 'hljs'
};
webpackConfig.plugins.push(
new MiniCssExtractPlugin({
filename: '[name].[contenthash:7].css'

36
examples/components/demo-block.vue
View File

@ -4,13 +4,17 @@
:class="[blockClass, { 'hover': hovering }]"
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<div class="source">
<slot name="source"></slot>
</div>
<div class="meta" ref="meta">
<div class="description" v-if="$slots.default">
<slot></slot>
</div>
<div class="highlight">
<slot name="highlight"></slot>
</div>
</div>
<div
class="demo-block-control"
ref="control"
@ -179,11 +183,17 @@
<script type="text/babel">
import compoLang from '../i18n/component.json';
import Element from 'main/index.js';
import { stripScript, stripStyle, stripTemplate } from '../util';
const { version } = Element;
export default {
data() {
return {
jsfiddle: {
script: '',
html: '',
style: ''
},
hovering: false,
isExpanded: false,
fixedControl: false,
@ -191,13 +201,6 @@
};
},
props: {
jsfiddle: Object,
default() {
return {};
}
},
methods: {
goJsfiddle() {
const { script, html, style } = this.jsfiddle;
@ -299,6 +302,25 @@
}
},
created() {
const highlight = this.$slots.highlight;
if (highlight && highlight[0]) {
let code = '';
let cur = highlight[0];
if (cur.tag === 'pre' && (cur.children && cur.children[0])) {
cur = cur.children[0];
if (cur.tag === 'code') {
code = cur.children[0].text;
}
}
if (code) {
this.jsfiddle.html = stripTemplate(code);
this.jsfiddle.script = stripScript(code);
this.jsfiddle.style = stripStyle(code);
}
}
},
mounted() {
this.$nextTick(() => {
let highlight = this.$el.getElementsByClassName('highlight')[0];

8
examples/components/header.vue
View File

@ -55,9 +55,15 @@
height: 100%;
line-height: 80px;
background: transparent;
@utils-clearfix;
padding: 0;
margin: 0;
&::before, &::after {
display: table;
content: "";
}
&::after {
clear: both;
}
}
.nav-gap {

7
examples/demo-styles/alert.scss Normal file
View File

@ -0,0 +1,7 @@
.demo-block.demo-alert .el-alert {
margin: 20px 0 0;
}
.demo-block.demo-alert .el-alert:first-child {
margin: 0;
}

19
examples/demo-styles/badge.scss Normal file
View File

@ -0,0 +1,19 @@
.demo-badge.demo-block .el-dropdown {
vertical-align: middle;
}
.demo-badge.demo-block {
.share-button {
width: 36px;
padding: 10px;
}
.mark {
margin-top: 8px;
line-height: 1;
float: right;
}
.item {
margin-right: 40px;
}
}

44
examples/demo-styles/border.scss Normal file
View File

@ -0,0 +1,44 @@
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div {
width: 100%;
height: 0;
border: 1px solid #eee;
}
.demo-border .line .dashed {
border: 2px dashed #eee;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title {
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value {
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #d7dae2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}

21
examples/demo-styles/button.scss Normal file
View File

@ -0,0 +1,21 @@
.demo-block.demo-button {
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-button + .el-button {
margin-left: 10px;
}
.el-button-group {
.el-button + .el-button {
margin-left: 0;
}
& + .el-button-group {
margin-left: 10px;
}
}
}

33
examples/demo-styles/card.scss Normal file
View File

@ -0,0 +1,33 @@
.demo-block.demo-card {
.text {
font-size: 14px;
}
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.item {
margin-bottom: 18px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.box-card {
width: 480px;
}
}

47
examples/demo-styles/carousel.scss Normal file
View File

@ -0,0 +1,47 @@
.demo-carousel .block {
padding: 30px;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-carousel .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-carousel .el-carousel__container {
text-align: center;
}
.demo-carousel .el-carousel__item {
h3 {
color: #fff;
font-size: 18px;
line-height: 300px;
margin: 0;
}
&:nth-child(2n) {
background-color: #99a9bf;
}
&:nth-child(2n + 1) {
background-color: #d3dce6;
}
}
.demo-carousel .small h3 {
font-size: 14px;
line-height: 150px;
}
.demo-carousel .medium h3 {
font-size: 14px;
line-height: 200px;
}

28
examples/demo-styles/cascader.scss Normal file
View File

@ -0,0 +1,28 @@
.demo-cascader {
.el-cascader {
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
.demo-cascader .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-cascader .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

7
examples/demo-styles/collapse.scss Normal file
View File

@ -0,0 +1,7 @@
.demo-collapse {
.el-collapse-item__header {
.header-icon {
margin-left: 5px;
}
}
}

20
examples/demo-styles/color-picker.scss Normal file
View File

@ -0,0 +1,20 @@
.demo-color-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-color-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}

72
examples/demo-styles/color.scss Normal file
View File

@ -0,0 +1,72 @@
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0 !important;
border-radius: 4px 4px 4px 4px !important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
margin: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-transparent {
border: 1px solid #fcc3c3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
}
.demo-color-box-lite {
color: #303133;
}

43
examples/demo-styles/container.scss Normal file
View File

@ -0,0 +1,43 @@
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#chang-jian-ye-mian-bu-ju + .demo-container {
.el-header,
.el-footer {
text-align: center;
}
.el-aside {
background-color: #d3dce6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
& > .source > .el-container {
margin-bottom: 40px;
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;
}
&:nth-child(7) .el-aside {
line-height: 320px;
}
}
}

36
examples/demo-styles/date-picker.scss Normal file
View File

@ -0,0 +1,36 @@
.demo-block.demo-date-picker .source > div {
padding: 0;
display: flex;
flex-wrap: wrap;
}
.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 .container {
flex: 1;
border-right: solid 1px #eff2f6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #eff2f6;
}
}
&:last-child {
border-right: none;
}
}
.demo-date-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

21
examples/demo-styles/datetime-picker.scss Normal file
View File

@ -0,0 +1,21 @@
.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;
}

20
examples/demo-styles/dialog.scss Normal file
View File

@ -0,0 +1,20 @@
.demo-block.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;
}
.el-button--text {
margin-right: 15px;
}
}

37
examples/demo-styles/dropdown.scss Normal file
View File

@ -0,0 +1,37 @@
.demo-block {
.el-dropdown {
vertical-align: top;
& + .el-dropdown {
margin-left: 15px;
}
}
.el-dropdown-link {
cursor: pointer;
color: #409eff;
}
.el-icon-arrow-down {
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;
}

73
examples/demo-styles/form.scss Normal file
View File

@ -0,0 +1,73 @@
.demo-form.demo-zh-CN {
.el-select .el-input {
width: 380px;
}
.el-form {
width: 460px;
}
.line {
text-align: center;
}
.el-checkbox-group {
width: 320px;
margin: 0;
padding: 0;
list-style: none;
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.el-checkbox {
float: left;
width: 160px;
padding-right: 20px;
margin: 0;
padding: 0;
+ .el-checkbox {
margin-left: 0;
}
}
}
.demo-form-normal {
width: 460px;
}
.demo-form-inline {
width: auto;
.el-input {
width: 150px;
}
> * {
margin-right: 10px;
}
}
.demo-ruleForm {
width: 460px;
.el-select .el-input {
width: 360px;
}
}
.demo-dynamic {
.el-input {
margin-right: 10px;
width: 270px;
vertical-align: top;
}
}
.fr {
float: right;
}
}

8
examples/demo-styles/i18n.scss Normal file
View File

@ -0,0 +1,8 @@
ul.language-list {
color: #5e6d82;
font-size: 14px;
padding-left: 20px;
li {
line-height: 1.8;
}
}

69
examples/demo-styles/icon.scss Normal file
View File

@ -0,0 +1,69 @@
.demo-icon .source > div > i {
color: #606266;
margin: 0 20px;
font-size: 1.5em;
vertical-align: middle;
}
.demo-icon .source button {
margin: 0 20px;
}
.page-component .content > ul.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;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-right: -1px;
margin-bottom: -1px;
&::after {
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
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;
transition: color 0.15s linear;
}
i {
display: block;
font-size: 32px;
margin-bottom: 15px;
color: #606266;
transition: color 0.15s linear;
}
.icon-name {
display: inline-block;
padding: 0 3px;
height: 1em;
}
&:hover {
span,
i {
color: rgb(92, 182, 255);
}
}
}

40
examples/demo-styles/index.scss Normal file
View File

@ -0,0 +1,40 @@
@import "./alert.scss";
@import "./badge.scss";
@import "./border.scss";
@import "./button.scss";
@import "./card.scss";
@import "./carousel.scss";
@import "./cascader.scss";
@import "./collapse.scss";
@import "./color-picker.scss";
@import "./color.scss";
@import "./container.scss";
@import "./date-picker.scss";
@import "./datetime-picker.scss";
@import "./dialog.scss";
@import "./dropdown.scss";
@import "./form.scss";
@import "./i18n.scss";
@import "./icon.scss";
@import "./input-number.scss";
@import "./input.scss";
@import "./layout.scss";
@import "./loading.scss";
@import "./menu.scss";
@import "./pagination.scss";
@import "./popover.scss";
@import "./progress.scss";
@import "./rate.scss";
@import "./select.scss";
@import "./slider.scss";
@import "./switch.scss";
@import "./table.scss";
@import "./tag.scss";
@import "./time-picker.scss";
@import "./timeline.scss";
@import "./tooltip.scss";
@import "./transition.scss";
@import "./transfer.scss";
@import "./tree.scss";
@import "./typography.scss";
@import "./upload.scss";

5
examples/demo-styles/input-number.scss Normal file
View File

@ -0,0 +1,5 @@
.demo-block.demo-input-number {
.el-input-number + .el-input-number {
margin-left: 10px;
}
}

65
examples/demo-styles/input.scss Normal file
View File

@ -0,0 +1,65 @@
.demo-input.demo-zh-CN {
.el-select .el-input {
width: 130px;
}
.el-input {
width: 180px;
}
.el-textarea {
width: 414px;
}
.el-input-group {
width: 100%;
}
.demo-input-size {
.el-input {
vertical-align: top;
margin: 0 10px 10px 0;
}
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
.el-col:not(:last-child) {
border-right: 1px solid rgba(224, 230, 237, 0.5);
}
.el-autocomplete {
text-align: left;
}
}
}
.el-autocomplete-suggestion.my-autocomplete {
li {
line-height: normal;
padding-top: 7px;
padding-bottom: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
.demo-input-suffix {
margin-bottom: 15px;
.el-input {
margin-right: 15px;
}
}

28
examples/demo-styles/layout.scss Normal file
View File

@ -0,0 +1,28 @@
.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;
}
}

3
examples/demo-styles/loading.scss Normal file
View File

@ -0,0 +1,3 @@
.demo-loading .el-table {
border: none;
}

27
examples/demo-styles/menu.scss Normal file
View File

@ -0,0 +1,27 @@
.demo-block.demo-menu {
.el-menu-demo {
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
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;
}
}
}

46
examples/demo-styles/pagination.scss Normal file
View File

@ -0,0 +1,46 @@
.demo-pagination .source.first {
padding: 0;
}
.demo-pagination .first .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-pagination .first .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-pagination .source.last {
padding: 0;
}
.demo-pagination .last .block {
padding: 30px 24px;
border-bottom: solid 1px #eff2f6;
&:last-child {
border-bottom: none;
}
}
.demo-pagination .last .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-pagination .last .demonstration + .el-pagination {
width: 70%;
margin: 5px 20px 0 0;
}

11
examples/demo-styles/popover.scss Normal file
View File

@ -0,0 +1,11 @@
.demo-block.demo-popover {
.el-popover + .el-popover {
margin-left: 10px;
}
.el-input {
width: 360px;
}
.el-button {
margin-left: 10px;
}
}

9
examples/demo-styles/progress.scss Normal file
View File

@ -0,0 +1,9 @@
.demo-block.demo-progress {
.el-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
margin-right: 15px;
}
}

18
examples/demo-styles/rate.scss Normal file
View File

@ -0,0 +1,18 @@
.demo-rate .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #eff2f6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-rate .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}

3
examples/demo-styles/select.scss Normal file
View File

@ -0,0 +1,3 @@
.demo-select .el-select {
width: 240px;
}

24
examples/demo-styles/slider.scss Normal file
View File

@ -0,0 +1,24 @@
.demo-block.demo-slider .source {
padding: 0;
}
.demo-block.demo-slider .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #eff2f6;
&:last-child {
border-bottom: none;
}
}
.demo-block.demo-slider .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-block.demo-slider .demonstration + .el-slider {
float: right;
width: 70%;
margin-right: 20px;
}

5
examples/demo-styles/switch.scss Normal file
View File

@ -0,0 +1,5 @@
.demo-block.demo-switch {
.el-switch {
margin: 20px 20px 20px 0;
}
}

23
examples/demo-styles/table.scss Normal file
View File

@ -0,0 +1,23 @@
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.demo-table .name-wrapper {
display: inline-block;
}
.demo-table .demo-table-expand {
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}

17
examples/demo-styles/tag.scss Normal file
View File

@ -0,0 +1,17 @@
.demo-block.demo-tag {
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
}

5
examples/demo-styles/time-picker.scss Normal file
View File

@ -0,0 +1,5 @@
.demo-block {
.el-date-editor + .el-date-editor {
margin-left: 10px;
}
}

6
examples/demo-styles/timeline.scss Normal file
View File

@ -0,0 +1,6 @@
.demo-timeline .source .radio {
margin-bottom: 20px;
}
.demo-timeline .source .radio .el-radio-group {
margin-left: 20px;
}

39
examples/demo-styles/tooltip.scss Normal file
View File

@ -0,0 +1,39 @@
.demo-tooltip {
.el-tooltip + .el-tooltip {
margin-left: 15px;
}
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
.el-tooltip {
margin-left: 0;
}
}
}

6
examples/demo-styles/transfer.scss Normal file
View File

@ -0,0 +1,6 @@
.demo-transfer {
.transfer-footer {
margin-left: 15px;
padding: 6px 5px;
}
}

14
examples/demo-styles/transition.scss Normal file
View File

@ -0,0 +1,14 @@
.demo-transition {
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
margin-right: 20px;
box-sizing: border-box;
}
}

48
examples/demo-styles/tree.scss Normal file
View File

@ -0,0 +1,48 @@
.demo-tree {
.leaf {
width: 20px;
background: #ddd;
}
.folder {
width: 20px;
background: #888;
}
.buttons {
margin-top: 20px;
}
.filter-tree {
margin-top: 20px;
}
.custom-tree-container {
display: flex;
margin: -24px;
}
.block {
flex: 1;
padding: 8px 24px 24px;
&:first-child {
border-right: solid 1px #eff2f6;
}
> p {
text-align: center;
margin: 0;
line-height: 4;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
}

30
examples/demo-styles/typography.scss Normal file
View File

@ -0,0 +1,30 @@
.demo-typo-size {
.color-dark-light {
color: #99a9bf;
}
}
.demo-term-box img {
width: 24%;
margin: 0 4% 20px 0;
}
.lineH-left {
display: inline-block;
height: 80px;
}
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.lineH-right li {
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.lineH-right li span {
padding-left: 40px;
}

39
examples/demo-styles/upload.scss Normal file
View File

@ -0,0 +1,39 @@
.upload-tip {
color: #8492a6;
font-size: 12px;
margin-top: 7px;
}
.demo-block {
margin-bottom: 24px;
.upload-demo {
width: 360px;
}
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover,
&:focus {
border-color: #409eff;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
}

19
examples/docs/en-US/alert.md
View File

@ -1,22 +1,3 @@
<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.

21
examples/docs/en-US/badge.md
View File

@ -114,27 +114,6 @@ Use a red dot to mark content that needs to be noticed.
```
:::
<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 |
|------------- |---------------- |---------------- |---------------------- |-------- |

47
examples/docs/en-US/border.md
View File

@ -52,53 +52,6 @@
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.

24
examples/docs/en-US/button.md
View File

@ -1,27 +1,3 @@
<style>
.demo-box.demo-button {
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-button + .el-button {
margin-left: 10px;
}
.el-button-group {
.el-button + .el-button {
margin-left: 0;
}
& + .el-button-group {
margin-left: 10px;
}
}
}
</style>
## Button
Commonly used button.

48
examples/docs/en-US/card.md
View File

@ -1,51 +1,3 @@
<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 {
margin-bottom: 18px;
}
.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.

61
examples/docs/en-US/carousel.md
View File

@ -1,64 +1,3 @@
<script>
export default {
mounted() {
this.$nextTick(() => {
const demos = document.querySelectorAll('.source');
demos[0].style.padding = '0';
demos[0].className += ' small';
demos[3].className += ' medium';
});
}
}
</script>
<style>
.demo-carousel .block {
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-carousel .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-carousel .el-carousel__container {
text-align: center;
}
.demo-carousel .el-carousel__item {
h3 {
color: #fff;
font-size: 18px;
line-height: 300px;
margin: 0;
}
&:nth-child(2n) {
background-color: #99a9bf;
}
&:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.demo-carousel .small h3 {
font-size: 14px;
line-height: 150px;
}
.demo-carousel .medium h3 {
font-size: 14px;
line-height: 200px;
}
</style>
## Carousel
Loop a series of images or texts in a limited space

280
examples/docs/en-US/cascader.md
View File

@ -1,283 +1,3 @@
<script>
export default {
data() {
return {
options2: [{
label: 'California',
cities: []
}, {
label: 'Florida',
cities: []
}],
props: {
value: 'label',
children: 'cities'
},
options: [{
value: 'guide',
label: 'Guide',
children: [{
value: 'disciplines',
label: 'Disciplines',
children: [{
value: 'consistency',
label: 'Consistency'
}, {
value: 'feedback',
label: 'Feedback'
}, {
value: 'efficiency',
label: 'Efficiency'
}, {
value: 'controllability',
label: 'Controllability'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'side nav',
label: 'Side Navigation'
}, {
value: 'top nav',
label: 'Top Navigation'
}]
}]
}, {
value: 'component',
label: 'Component',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout'
}, {
value: 'color',
label: 'Color'
}, {
value: 'typography',
label: 'Typography'
}, {
value: 'icon',
label: 'Icon'
}, {
value: 'button',
label: 'Button'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio'
}, {
value: 'checkbox',
label: 'Checkbox'
}, {
value: 'input',
label: 'Input'
}, {
value: 'input-number',
label: 'InputNumber'
}, {
value: 'select',
label: 'Select'
}, {
value: 'cascader',
label: 'Cascader'
}, {
value: 'switch',
label: 'Switch'
}, {
value: 'slider',
label: 'Slider'
}, {
value: 'time-picker',
label: 'TimePicker'
}, {
value: 'date-picker',
label: 'DatePicker'
}, {
value: 'datetime-picker',
label: 'DateTimePicker'
}, {
value: 'upload',
label: 'Upload'
}, {
value: 'rate',
label: 'Rate'
}, {
value: 'form',
label: 'Form'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table'
}, {
value: 'tag',
label: 'Tag'
}, {
value: 'progress',
label: 'Progress'
}, {
value: 'tree',
label: 'Tree'
}, {
value: 'pagination',
label: 'Pagination'
}, {
value: 'badge',
label: 'Badge'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert'
}, {
value: 'loading',
label: 'Loading'
}, {
value: 'message',
label: 'Message'
}, {
value: 'message-box',
label: 'MessageBox'
}, {
value: 'notification',
label: 'Notification'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu'
}, {
value: 'tabs',
label: 'Tabs'
}, {
value: 'breadcrumb',
label: 'Breadcrumb'
}, {
value: 'dropdown',
label: 'Dropdown'
}, {
value: 'steps',
label: 'Steps'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog'
}, {
value: 'tooltip',
label: 'Tooltip'
}, {
value: 'popover',
label: 'Popover'
}, {
value: 'card',
label: 'Card'
}, {
value: 'carousel',
label: 'Carousel'
}, {
value: 'collapse',
label: 'Collapse'
}]
}]
}, {
value: 'resource',
label: 'Resource',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'docs',
label: 'Design Documentation'
}]
}],
optionsWithDisabled: [],
selectedOptions: [],
selectedOptions2: [],
selectedOptions3: ['component', 'data', 'tag']
};
},
created() {
this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
this.optionsWithDisabled[0].disabled = true;
},
mounted() {
this.$nextTick(() => {
const demos = document.querySelectorAll('.source');
demos[0].style.padding = '0';
demos[demos.length - 1].style.padding = '0';
});
},
methods: {
handleItemChange(val) {
console.log('active item:', val);
setTimeout(_ => {
if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
this.options2[0].cities = [{
label: 'Los Angeles'
}];
} else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
this.options2[1].cities = [{
label: 'Orlando'
}];
}
}, 300);
},
handleChange(value) {
console.log(value);
}
}
};
</script>
<style>
.demo-cascader {
.el-cascader {
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
.demo-cascader .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-cascader .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## Cascader
If the options have a clear hierarchical structure, Cascader can be used to view and select them.

45
examples/docs/en-US/checkbox.md
View File

@ -1,48 +1,3 @@
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
module.exports = {
data() {
return {
checkList: ['selected and disabled','Option A'],
// checkList2: ['Option A'],
checked: true,
checked1: false,
checked2: true,
checked3: true,
checked4: false,
checked5: false,
checked6: true,
isValid: 'valid',
checkAll: false,
cities: cityOptions,
checkedCities: ['Shanghai', 'Beijing'],
checkedCities1: ['Shanghai', 'Beijing'],
isIndeterminate: true,
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: [],
checkboxGroup6: []
};
},
methods: {
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
## Checkbox
A group of options for multiple choices.

26
examples/docs/en-US/collapse.md
View File

@ -1,29 +1,3 @@
<script>
export default {
data() {
return {
activeNames: ['1'],
activeName: '1'
};
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
</script>
<style>
.demo-collapse {
.el-collapse-item__header {
.header-icon {
margin-left: 5px;
}
}
}
</style>
## Collapse
Use Collapse to store contents.

59
examples/docs/en-US/color-picker.md
View File

@ -1,62 +1,3 @@
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
};
},
mounted() {
this.$nextTick(() => {
const demos = document.querySelectorAll('.source');
demos[0].style.padding = '0';
});
},
}
</script>
<style>
.demo-color-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-color-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}
</style>
## ColorPicker
ColorPicker is a color selector supporting multiple color formats.

77
examples/docs/en-US/color.md
View File

@ -89,81 +89,6 @@
}
</script>
<style>
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0!important;
border-radius: 4px 4px 4px 4px!important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
margin: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-transparent {
border: 1px solid #FCC3C3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
.demo-color-box-lite {
color: #303133;
}
</style>
## Color
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
@ -191,6 +116,7 @@ The main color of Element is bright and friendly blue.
>
</div>
</div>
</div>
</el-col>
</el-row>
@ -319,5 +245,6 @@ Neutral colors are for text, background and border colors. You can use different
>Basic White<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</div>
</el-col>
</el-row>

59
examples/docs/en-US/container.md
View File

@ -1,62 +1,3 @@
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#common-layouts + .demo-container {
.el-header, .el-footer {
text-align: center;
}
.el-aside {
background-color: #D3DCE6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
& > .source > .el-container {
margin-bottom: 40px;
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;
}
&:nth-child(7) .el-aside {
line-height: 320px;
}
}
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
## Container
Container components for scaffolding basic structure of the page:

113
examples/docs/en-US/date-picker.md
View File

@ -1,116 +1,3 @@
<script>
module.exports = {
data() {
return {
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
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: '',
value8: '',
value9: '',
value10: '',
value11: '',
value12: '',
value13: '',
value14: ''
};
}
};
</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 .container {
flex: 1;
border-right: solid 1px #EFF2F6;
.block {
border-right: none;
&:last-child {
border-top: solid 1px #EFF2F6;
}
}
&: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.

89
examples/docs/en-US/datetime-picker.md
View File

@ -1,92 +1,3 @@
<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: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value5: '',
value6: '',
value7: ''
};
}
};
</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.

75
examples/docs/en-US/dialog.md
View File

@ -1,78 +1,3 @@
<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,
dialogTableVisible: false,
dialogFormVisible: false,
outerVisible: false,
innerVisible: false,
centerDialogVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure to close this dialog?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</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;
}
.el-button--text {
margin-right: 15px;
}
}
</style>
## Dialog
Informs users while preserving the current page state.

52
examples/docs/en-US/dropdown.md
View File

@ -1,55 +1,3 @@
<style>
.demo-box {
.el-dropdown {
vertical-align: top;
& + .el-dropdown {
margin-left: 15px;
}
}
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
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');
},
handleCommand(command) {
this.$message('click on item ' + command);
}
}
}
</script>
## Dropdown
Toggleable menu for displaying lists of links and actions.

247
examples/docs/en-US/form.md
View File

@ -1,250 +1,3 @@
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formInline: {
user: '',
region: ''
},
labelPosition: 'right',
formLabelAlign: {
name: '',
region: '',
type: ''
},
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
ruleForm2: {
pass: '',
checkPass: '',
age: ''
},
formLabelWidth: '80px',
options: [
],
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
},
rules2: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicValidateForm: {
domains: [{
key: Date.now(),
value: ''
}],
email: ''
},
numberValidateForm: {
age: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
},
onRuleFormSubmit() {
console.log('onRuleFormSubmit');
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
}
}
}
</script>
<style>
.demo-form.demo-en-US {
.el-select .el-input {
width: 360px;
}
.el-form {
width: 480px;
}
.line {
text-align: center;
}
.el-checkbox-group {
width: 320px;
margin: 0;
padding: 0;
list-style: none;
&:after, &:before {
content: ' ';
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.el-checkbox {
float: left;
width: 160px;
padding-right: 20px;
margin: 0;
padding: 0;
+ .el-checkbox {
margin-left: 0;
}
}
}
.demo-form-normal {
width: 480px;
}
.demo-form-inline {
width: auto;
.el-input {
width: 150px;
}
> * {
margin-right: 10px;
}
}
.demo-ruleForm {
width: 480px;
.el-select .el-input {
width: 360px;
}
}
.demo-dynamic {
width: 500px;
.el-input {
margin-right: 10px;
width: 270px;
vertical-align: top;
}
}
.fr {
float: right;
}
}
</style>
## Form
Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.

74
examples/docs/en-US/icon.md
View File

@ -1,75 +1,3 @@
<script>
var iconList = require('examples/icon.json');
export default {
data() {
return {
icons: iconList
};
}
}
</script>
<style>
.demo-icon .source > i {
color: #606266;
margin: 0 20px;
font-size: 1.5em;
vertical-align: middle;
}
.demo-icon .source > button {
margin: 0 20px;
}
.page-component .content > ul.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;
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: 32px;
margin-bottom: 15px;
color: #606266;
transition: color .15s linear;
}
.icon-name {
display: inline-block;
padding: 0 3px;
height: 1em;
transition: color .15s linear;
}
&:hover {
i,span{color: rgb(92, 182, 255);}
}
}
</style>
## Icon
Element provides a set of common icons.
@ -92,7 +20,7 @@ Just assign the class name to `el-icon-iconName`.
### Icons
<ul class="icon-list">
<li v-for="name in icons" :key="name">
<li v-for="name in ['info','error','success','warning','question','back','arrow-left','arrow-down','arrow-right','arrow-up','caret-left','caret-bottom','caret-top','caret-right','d-arrow-left','d-arrow-right','minus','plus','remove','circle-plus','remove-outline','circle-plus-outline','close','check','circle-close','circle-check','circle-close-outline','circle-check-outline','zoom-out','zoom-in','d-caret','sort','sort-down','sort-up','tickets','document','goods','sold-out','news','message','date','printer','time','bell','mobile-phone','service','view','menu','more','more-outline','star-on','star-off','location','location-outline','phone','phone-outline','picture','picture-outline','delete','search','edit','edit-outline','rank','refresh','share','setting','upload','upload2','download','loading']" :key="name">
<span>
<i :class="'el-icon-' + name"></i>
<span class="icon-name">{{'el-icon-' + name}}</span>

31
examples/docs/en-US/input-number.md
View File

@ -1,34 +1,3 @@
<script>
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 5,
num4: 1,
num5: 1,
num6: 1,
num7: 1,
num8: 1,
num9: 1
}
},
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.

147
examples/docs/en-US/input.md
View File

@ -1,150 +1,3 @@
<script>
export default {
data() {
return {
links: [],
input: '',
input1: '',
input2: '',
input21: '',
input22: '',
input23: '',
input3: '',
input4: '',
input5: '',
input6: '',
input7: '',
input8: '',
input9: '',
input10: '',
input11: '',
textarea: '',
textarea2: '',
textarea3: '',
select: '',
state1: '',
state2: '',
state3: '',
state4: ''
};
},
methods: {
loadAll() {
return [
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
{ "value": "babel", "link": "https://github.com/babel/babel" }
];
},
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
cb(results);
},
querySearchAsync(queryString, cb) {
var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
},
mounted() {
this.links = this.loadAll();
}
};
</script>
<style>
.demo-input.demo-en-US {
.el-select .el-input {
width: 130px;
}
.el-input {
width: 180px;
}
.el-textarea {
width: 414px;
}
.el-input-group {
width: 100%;
}
.demo-input-size {
.el-input {
vertical-align: top;
margin: 0 10px 10px 0;
}
}
.demo-input-suffix {
padding: 10px;
}
.demo-input-suffix .el-input {
margin-right: 15px;
}
.demo-input-label {
display: inline-block;
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
.sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
}
.el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50);
}
.el-autocomplete {
text-align: left;
}
}
}
.el-autocomplete-suggestion.my-autocomplete {
li {
line-height: normal;
padding-top: 7px;
padding-bottom: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
}
}
</style>
## Input
Input data using mouse or keyboard.

31
examples/docs/en-US/layout.md
View File

@ -1,34 +1,3 @@
<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.

51
examples/docs/en-US/loading.md
View File

@ -1,54 +1,3 @@
<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;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>
## Loading
Show animation while loading data.

53
examples/docs/en-US/menu.md
View File

@ -1,56 +1,3 @@
<style>
.demo-box.demo-menu {
.el-menu-demo {
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
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 {
data() {
return {
activeIndex: '1',
activeIndex2: '1',
isCollapse: true
};
},
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.

145
examples/docs/en-US/message-box.md
View File

@ -1,148 +1,3 @@
<script>
export default {
methods: {
open() {
this.$alert('This is a message', 'Title', {
confirmButtonText: 'OK',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
},
open2() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
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', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
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() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = 'Loading...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
setTimeout(() => {
this.$message({
type: 'info',
message: 'action: ' + action
});
}, 200);
});
},
open5() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
},
open6() {
this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
distinguishCancelAndClose: true,
confirmButtonText: 'Save',
cancelButtonText: 'Discard Changes'
})
.then(() => {
this.$message({
type: 'info',
message: 'Changes saved. Proceeding to a new route.'
});
})
.catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? 'Changes discarded. Proceeding to a new route.'
: 'Stay in the current route'
})
});
},
open7() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
};
</script>
## MessageBox
A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.

83
examples/docs/en-US/message.md
View File

@ -1,86 +1,3 @@
<script>
module.exports = {
methods: {
open() {
this.$message('This is a message.');
},
openVn() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
])
});
},
open2() {
this.$message({
message: 'Congrats, this is a success message.',
type: 'success'
});
},
open3() {
this.$message({
message: 'Warning, this is a warning message.',
type: 'warning'
});
},
open4() {
this.$message.error('Oops, this is a error message.');
},
open5() {
this.$message({
showClose: true,
message: 'This is a message.'
});
},
open6() {
this.$message({
showClose: true,
message: 'Congrats, this is a success message.',
type: 'success'
});
},
open7() {
this.$message({
showClose: true,
message: 'Warning, this is a warning message.',
type: 'warning'
});
},
open8() {
this.$message({
showClose: true,
message: 'Oops, this is a error message.',
type: 'error'
});
},
openCenter() {
this.$message({
message: 'Centered text',
center: true
});
},
openHTML() {
this.$message({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
};
</script>
## Message
Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.

112
examples/docs/en-US/notification.md
View File

@ -1,115 +1,3 @@
<script>
module.exports = {
methods: {
open() {
const h = this.$createElement;
this.$notify({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
},
open2() {
this.$notify({
title: 'Prompt',
message: 'This is a message that does not automatically close',
duration: 0
});
},
open3() {
this.$notify({
title: 'Success',
message: 'This is a success message',
type: 'success'
});
},
open4() {
this.$notify({
title: 'Warning',
message: 'This is a warning message',
type: 'warning'
});
},
open5() {
this.$notify.info({
title: 'Info',
message: 'This is an info message'
});
},
open6() {
this.$notify.error({
title: 'Error',
message: 'This is an error message'
});
},
open7() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top right corner'
});
},
open8() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right'
});
},
open9() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left'
});
},
open10() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left'
});
},
open11() {
this.$notify.success({
title: 'Success',
message: 'This is a success message',
offset: 100
});
},
open12() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
},
open13() {
this.$notify.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false
});
},
onClose() {
console.log('Notification is closed');
}
}
};
</script>
## Notification
Displays a global notification message at a corner of the page.

79
examples/docs/en-US/pagination.md
View File

@ -1,52 +1,3 @@
<style>
.demo-pagination .source.first {
padding: 0;
}
.demo-pagination .first .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-pagination .first .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-pagination .source.last {
padding: 0;
}
.demo-pagination .last .block {
padding: 30px 24px;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-pagination .last .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-pagination .last .demonstration + .el-pagination {
width: 70%;
margin: 5px 20px 0 0;
}
</style>
## Pagination
If you have too much data to display in one page, use pagination.
@ -188,36 +139,6 @@ Add more modules based on your scenario.
</script>
```
:::
<script>
import { addClass } from 'element-ui/src/utils/dom';
export default {
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
},
methods: {
handleSizeChange(val) {
console.log(`${val} items per page`);
},
handleCurrentChange(val) {
console.log(`current page: ${val}`);
}
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let firstDemo = demos[0];
let lastDemo = demos[demos.length - 1];
addClass(firstDemo, 'first');
addClass(lastDemo, 'last');
});
}
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |

97
examples/docs/en-US/popover.md
View File

@ -1,100 +1,3 @@
<script>
export default {
data() {
return {
visible: false,
visible2: false,
gridData: [{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
}, {
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}],
gridData2: [{
date: '2016-05-02',
name: 'Jack',
address: 'New York City',
}, {
date: '2016-05-04',
name: 'Jack',
address: 'New York City',
$info: true
}, {
date: '2016-05-01',
name: 'Jack',
address: 'New York City',
}, {
date: '2016-05-03',
name: 'Jack',
address: 'New York City',
$positive: true
}],
gridData3: [{
tag: 'Home',
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Company',
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Company',
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Home',
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Company',
date: '2016-05-08',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Home',
date: '2016-05-06',
name: 'Jack',
address: 'New York City'
}, {
tag: 'Company',
date: '2016-05-07',
name: 'Jack',
address: 'New York City'
}]
};
}
};
</script>
<style>
.demo-box.demo-popover {
.el-popover + .el-popover {
margin-left: 10px;
}
.el-input {
width: 360px;
}
.el-button {
margin-left: 10px;
}
}
</style>
## Popover
### Basic usage

11
examples/docs/en-US/progress.md
View File

@ -1,14 +1,3 @@
<style>
.demo-box.demo-progress {
.el-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
margin-right: 15px;
}
}
</style>
## Progress
Progress is used to show the progress of current operation, and inform the user the current status.

20
examples/docs/en-US/radio.md
View File

@ -1,23 +1,3 @@
<script>
module.exports = {
data() {
return {
radio: '1',
radio1: 'selected and disabled',
radio2: 3,
radio3: 'New York',
radio4: 'New York',
radio5: 'New York',
radio6: 'New York',
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
};
</script>
## Radio
Single selection among multiple options.

41
examples/docs/en-US/rate.md
View File

@ -1,44 +1,3 @@
<style>
.demo-rate .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-rate .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
value4: null,
value5: 3.7
};
},
mounted() {
this.$nextTick(() => {
let firstDemo = document.querySelector('.source');
firstDemo.style.padding = '0';
});
}
}
</script>
## Rate
Used for rating

135
examples/docs/en-US/select.md
View File

@ -1,138 +1,3 @@
<script>
export default {
data() {
return {
list: null,
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
options2: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2',
disabled: true
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
options3: [{
label: 'Popular cities',
options: [{
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Beijing',
label: 'Beijing'
}]
}, {
label: 'City Name',
options: [{
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}, {
value: 'Dalian',
label: 'Dalian'
}]
}],
options4: [],
options5: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
cities: [{
value: 'Beijing',
label: 'Beijing'
}, {
value: 'Shanghai',
label: 'Shanghai'
}, {
value: 'Nanjing',
label: 'Nanjing'
}, {
value: 'Chengdu',
label: 'Chengdu'
}, {
value: 'Shenzhen',
label: 'Shenzhen'
}, {
value: 'Guangzhou',
label: 'Guangzhou'
}],
value: '',
value2: '',
value3: '',
value4: '',
value5: [],
value6: '',
value7: '',
value8: '',
value9: [],
value10: [],
value11: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
};
},
mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; });
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options4 = [];
}
}
}
};
</script>
<style>
.demo-select .el-select {
width: 240px;
}
</style>
## Select
When there are plenty of options, use a drop-down menu to display and select desired ones.

51
examples/docs/en-US/slider.md
View File

@ -1,54 +1,3 @@
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42,
value6: 0,
value7: 0,
value8: 0,
value9: [4, 8],
value10: 0
};
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
</script>
<style>
.demo-box.demo-slider .source {
padding: 0;
}
.demo-box.demo-slider .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-box.demo-slider .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-box.demo-slider .demonstration + .el-slider {
float: right;
width: 70%;
margin-right: 20px;
}
</style>
## Slider
Drag the slider within a fixed range.

16
examples/docs/en-US/steps.md
View File

@ -1,19 +1,3 @@
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>
## Steps
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.

24
examples/docs/en-US/switch.md
View File

@ -1,27 +1,3 @@
<style>
.demo-box.demo-switch {
.el-switch {
margin: 20px 20px 20px 0;
}
}
</style>
<script>
export default {
data() {
return {
value1: true,
value2: true,
value3: true,
value4: true,
value5: '100',
value6: true,
value7: false
}
}
};
</script>
## Switch
Switch is used for switching between two opposing states.

371
examples/docs/en-US/table.md
View File

@ -1,372 +1,3 @@
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}],
tableData2: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
$info: true
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
$positive: true
}],
tableData3: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}],
tableData4: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}, {
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036'
}],
tableData6: [{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
tableData7: [{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-04',
name: 'John',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles',
}, {
date: '2016-05-03',
name: 'Jessy',
address: 'No. 189, Grove St, Los Angeles',
}],
currentRow: null,
multipleSelection: [],
search: '',
};
},
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = 'Total Cost';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = '$ ' + values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
sums[index] = 'N/A';
}
});
return sums;
},
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleClick() {
console.log('click');
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleCurrentChange(val) {
this.currentRow = val;
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
indexMethod(index) {
return index * 2;
}
},
watch: {
multipleSelection(val) {
console.log('selection: ', val);
}
}
};
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.demo-table .name-wrapper {
display: inline-block;
}
.demo-table .demo-table-expand {
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}
</style>
## Table
Display multiple data with similar format. You can sort, filter, compare your data in a table.
@ -1977,7 +1608,7 @@ Configuring rowspan and colspan allows you to merge cells
### Custom index
You can customize row index in `type=index` columns.
:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
:::demo To customize row indices, use `index` attribute on `el-table-column` with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
```html
<template>

92
examples/docs/en-US/tabs.md
View File

@ -1,95 +1,3 @@
<script>
export default {
data() {
return {
activeName: 'second',
activeName2: 'first',
editableTabsValue: '2',
editableTabsValue2: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
editableTabs2: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2,
tabPosition: 'top'
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName;
}
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
},
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue2 = newTabName;
},
removeTab(targetName) {
let tabs = this.editableTabs2;
let activeName = this.editableTabsValue2;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
}
}
}
</script>
## Tabs
Divide data collections which are related yet belong to different types.

60
examples/docs/en-US/tag.md
View File

@ -1,63 +1,3 @@
<script>
export default {
data() {
return {
tags: [
{ name: 'Tag 1', type: '' },
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },
{ name: 'Tag 4', type: 'warning' },
{ name: 'Tag 5', type: 'danger' }
],
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: ''
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
</script>
<style>
.demo-box.demo-tag {
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
}
</style>
## Tag
Used for marking and selection.

24
examples/docs/en-US/time-picker.md
View File

@ -1,11 +1,3 @@
<style>
.demo-box {
.el-date-editor + .el-date-editor {
margin-left: 10px;
}
}
</style>
## TimePicker
Use Time Picker for time input.
@ -154,22 +146,6 @@ Can pick an arbitrary time range.
```
:::
<script>
export default {
data() {
return {
value1: '',
value2: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40),
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
startTime: '',
endTime: ''
};
}
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |

46
examples/docs/en-US/timeline.md
View File

@ -1,49 +1,3 @@
<script>
export default {
data() {
return {
reverse: true,
activities: [{
content: 'Event start',
timestamp: '2018-04-15'
}, {
content: 'Approved',
timestamp: '2018-04-13'
}, {
content: 'Success',
timestamp: '2018-04-11'
}],
activities2: [{
content: 'Custom icon',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more'
}, {
content: 'Custom color',
timestamp: '2018-04-03 20:46',
color: '#0bbd87'
}, {
content: 'Custom size',
timestamp: '2018-04-03 20:46',
size: 'large'
}, {
content: 'Default node',
timestamp: '2018-04-03 20:46'
}]
};
}
};
</script>
<style>
.demo-timeline .source .radio {
margin-bottom: 20px;
}
.demo-timeline .source .radio .el-radio-group {
margin-left: 20px;
}
</style>
## Timeline
Visually display timeline.

57
examples/docs/en-US/tooltip.md
View File

@ -1,60 +1,3 @@
<script>
export default {
data() {
return {
disabled: false
};
}
};
</script>
<style>
.demo-tooltip.demo-en-US {
&:first-of-type .source {
.el-button {
width: 110px;
}
}
.el-tooltip + .el-tooltip {
margin-left: 15px;
}
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 110px;
}
.right {
float: right;
width: 110px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
.el-tooltip {
margin-left: 0;
}
}
}
</style>
## Tooltip
Display prompt information for mouse hover.

73
examples/docs/en-US/transfer.md
View File

@ -1,76 +1,3 @@
<style>
.demo-transfer {
.transfer-footer {
margin-left: 15px;
padding: 6px 5px;
}
}
</style>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
const generateData2 = _ => {
const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
states.forEach((city, index) => {
data.push({
label: city,
key: index,
initial: initials[index]
});
});
return data;
};
const generateData3 = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
value: i,
desc: `Option ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
data2: generateData2(),
data3: generateData3(),
value1: [1, 4],
value2: [],
value3: [1],
value4: [1],
value5: [],
filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
},
renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>;
}
};
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}
}
};
</script>
## Transfer
### Basic usage

25
examples/docs/en-US/transition.md
View File

@ -153,28 +153,3 @@ import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)
```
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
margin-right: 20px;
box-sizing: border-box;
}
</style>
<script>
module.exports = {
data: () => ({
show: true,
show2: true,
show3: true
})
}
</script>

379
examples/docs/en-US/tree.md
View File

@ -1,382 +1,3 @@
<style>
.demo-tree {
.leaf {
width: 20px;
background: #ddd;
}
.folder {
width: 20px;
background: #888;
}
.buttons {
margin-top: 20px;
}
.filter-tree {
margin-top: 20px;
}
.custom-tree-container {
display: flex;
margin: -24px;
}
.block {
flex: 1;
padding: 8px 24px 24px;
&:first-child {
border-right: solid 1px #eff2f6;
}
> p {
text-align: center;
margin: 0;
line-height: 4;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
}
</style>
<script>
const data = [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}];
const data2 = [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}, {
id: 3,
label: 'Level one 3',
children: [{
id: 7,
label: 'Level two 3-1'
}, {
id: 8,
label: 'Level two 3-2'
}]
}];
const data3 = [{
id: 1,
label: 'Level one 1',
children: [{
id: 3,
label: 'Level two 2-1',
children: [{
id: 4,
label: 'Level three 3-1-1'
}, {
id: 5,
label: 'Level three 3-1-2',
disabled: true
}]
}, {
id: 2,
label: 'Level two 2-2',
disabled: true,
children: [{
id: 6,
label: 'Level three 3-2-1'
}, {
id: 7,
label: 'Level three 3-2-2',
disabled: true
}]
}]
}];
const data6 = [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}];
let id = 1000;
const regions = [{
'name': 'region1'
}, {
'name': 'region2'
}];
let count = 1;
const props = {
label: 'name',
children: 'zones'
};
const props1 = {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
};
const defaultProps = {
children: 'children',
label: 'label'
};
export default {
watch: {
filterText(val) {
this.$refs.tree2.filter(val);
}
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === 'Level two 3-1') {
return type !== 'inner';
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(function() {
let data;
if (hasChild) {
data = [{
name: 'zone' + count++
}, {
name: 'zone' + count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
},
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: 'Level two 2-1'
},
{
id: 9,
label: 'Level three 1-1-1'
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
data,
data2,
data3,
data4: JSON.parse(JSON.stringify(data2)),
data5: JSON.parse(JSON.stringify(data2)),
data6,
regions,
defaultProps,
props,
props1,
defaultCheckedKeys: [5],
defaultExpandedKeys: [2, 3],
filterText: ''
};
}
};
</script>
## Tree
Display a set of data with hierarchies.

32
examples/docs/en-US/typography.md
View File

@ -61,38 +61,6 @@
},
}
</script>
<style>
.demo-typo-size {
.color-dark-light {
color: #99a9bf;
}
}
.demo-term-box img{
width: 24%;
margin: 0 4% 20px 0;
}
.lineH-left {
display: inline-block;
height: 80px
}
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.lineH-right li{
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.lineH-right li span{
padding-left: 40px;
}
</style>
## Typography

119
examples/docs/en-US/upload.md
View File

@ -1,122 +1,3 @@
<style>
.upload-tip {
color: #8492a6;
font-size: 12px;
margin-top: 7px;
}
.demo-box {
margin-bottom: 24px;
.upload-demo {
width: 360px;
}
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover, &:focus {
border-color: #409EFF;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
}
}
</style>
<script>
export default {
data() {
return {
fileList: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}],
fileList2: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}],
fileList3: [{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}, {
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}],
imageUrl: '',
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
beforeUpload(file) {
if (file.size > 40000000) {
console.warn(file.name + ' is too large!');
return false;
}
return true;
},
handlePreview(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
submitUpload() {
this.$refs.upload.submit();
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!');
}
if (!isLt2M) {
this.$message.error('Avatar picture size can not exceed 2MB!');
}
return isJPG && isLt2M;
},
handleChange(file, fileList) {
this.fileList3 = fileList.slice(-3);
},
handleExceed(files, fileList) {
this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
}
}
}
</script>
## Upload
Upload files by clicking or drag-and-drop

19
examples/docs/es/alert.md
View File

@ -1,22 +1,3 @@
<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
Mostrar mensajes de alertas importantes.

21
examples/docs/es/badge.md
View File

@ -114,27 +114,6 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
```
:::
<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>
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |

47
examples/docs/es/border.md
View File

@ -52,53 +52,6 @@
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.

Some files were not shown because too many files have changed in this diff Show More