mirror of https://github.com/ElemeFE/element
Chore: upgrade to webpack@4 (#11954)
* Chore: upgrade webpack@4 * Chore: upgrade to webpack@4 * Chore: add babel-preset-stage-2 * Chore: fix test case * Chore: upgrade webpack@4 * Docs: update docs * Docs: update docs * Chore: fix coveralls * Chore: update yarn.lockpull/12786/head^2
Jikkai Xiao
Jikkai Xiao
parent
ec6cac4232
commit
8cf15eda72
17
.babelrc
17
.babelrc
|
|
@ -1,5 +1,17 @@
|
|||
{
|
||||
"presets": [["es2015", { "loose": true }]],
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"loose": true,
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}
|
||||
],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx"],
|
||||
"env": {
|
||||
"utils": {
|
||||
|
|
@ -11,6 +23,9 @@
|
|||
}
|
||||
}]
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
"plugins": ["istanbul"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
"no-restricted-globals": ["error", "event", "fdescribe"]
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true,
|
||||
"jsx": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
install(window.Vue);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
version: '{{version}}',
|
||||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
|
|
@ -58,8 +58,6 @@ module.exports = {
|
|||
Loading,
|
||||
{{list}}
|
||||
};
|
||||
|
||||
module.exports.default = module.exports;
|
||||
`;
|
||||
|
||||
delete Components.font;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
const config = require('./config');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
app: ['./src/index.js']
|
||||
},
|
||||
|
|
@ -21,6 +22,15 @@ module.exports = {
|
|||
modules: ['node_modules']
|
||||
},
|
||||
externals: config.externals,
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
stats: {
|
||||
children: false
|
||||
},
|
||||
optimization: {
|
||||
minimize: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -33,13 +43,11 @@ module.exports = {
|
|||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
preserveWhitespace: false
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
|
|
@ -49,27 +57,7 @@ module.exports = {
|
|||
loaders: ['style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader?minimize=false'
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
|
|
@ -80,11 +68,6 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
new VueLoaderPlugin()
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
const Components = require('../components.json');
|
||||
const config = require('./config');
|
||||
|
||||
const webpackConfig = {
|
||||
mode: 'production',
|
||||
entry: Components,
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), './lib'),
|
||||
|
|
@ -20,6 +21,13 @@ const webpackConfig = {
|
|||
modules: ['node_modules']
|
||||
},
|
||||
externals: config.externals,
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
stats: 'none',
|
||||
optimization: {
|
||||
minimize: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -32,13 +40,11 @@ const webpackConfig = {
|
|||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
preserveWhitespace: false
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
|
|
@ -48,27 +54,7 @@ const webpackConfig = {
|
|||
loaders: ['style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader?minimize=false'
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
|
|
@ -79,12 +65,7 @@ const webpackConfig = {
|
|||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
new VueLoaderPlugin()
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
const config = require('./config');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
app: ['./src/index.js']
|
||||
},
|
||||
|
|
@ -24,6 +25,12 @@ module.exports = {
|
|||
externals: {
|
||||
vue: config.vue
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
stats: {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -36,13 +43,11 @@ module.exports = {
|
|||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
preserveWhitespace: false
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
|
|
@ -52,27 +57,7 @@ module.exports = {
|
|||
loaders: ['style-loader', 'css-loader', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader?minimize=false'
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
|
|
@ -83,20 +68,6 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
output: {
|
||||
comments: false
|
||||
},
|
||||
sourceMap: false
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
new VueLoaderPlugin()
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const md = require('markdown-it')();
|
||||
const slugify = require('transliteration').slugify;
|
||||
|
||||
|
|
@ -11,7 +12,6 @@ const striptags = require('./strip-tags');
|
|||
const config = require('./config');
|
||||
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isPlay = !!process.env.PLAY_ENV;
|
||||
|
||||
function convert(str) {
|
||||
|
|
@ -30,6 +30,7 @@ function wrap(render) {
|
|||
}
|
||||
|
||||
const webpackConfig = {
|
||||
mode: process.env.NODE_ENV,
|
||||
entry: isProd ? {
|
||||
docs: './examples/entry.js',
|
||||
'element-ui': './src/index.js'
|
||||
|
|
@ -51,18 +52,18 @@ const webpackConfig = {
|
|||
publicPath: '/',
|
||||
noInfo: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
stats: {
|
||||
children: false
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
loader: 'eslint-loader'
|
||||
},
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.vue$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
test: /\.(vue|jsx?)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'eslint-loader'
|
||||
},
|
||||
{
|
||||
|
|
@ -72,86 +73,92 @@ const webpackConfig = {
|
|||
loader: 'babel-loader'
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
loader: 'vue-markdown-loader',
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
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*(.*)$/);
|
||||
},
|
||||
|
||||
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']
|
||||
],
|
||||
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;
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
test: /\.css$/,
|
||||
loaders: [
|
||||
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: ['style-loader', 'css-loader', 'sass-loader']
|
||||
loaders: [
|
||||
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader?minimize=false'
|
||||
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*(.*)$/);
|
||||
},
|
||||
|
||||
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']
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
|
|
@ -170,80 +177,21 @@ const webpackConfig = {
|
|||
{ from: 'examples/versions.json' }
|
||||
]),
|
||||
new ProgressBarPlugin(),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
vue: {
|
||||
preserveWhitespace: false
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
if (isProd) {
|
||||
webpackConfig.externals = {
|
||||
vue: 'Vue',
|
||||
'vue-router': 'VueRouter'
|
||||
};
|
||||
webpackConfig.module.rules.push(
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
extractCSS: true,
|
||||
preserveWhitespace: false
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader'
|
||||
]
|
||||
})
|
||||
}
|
||||
);
|
||||
webpackConfig.plugins.push(
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
output: {
|
||||
comments: false
|
||||
},
|
||||
sourceMap: false
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[contenthash:7].css'
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: ['element-ui', 'manifest']
|
||||
})
|
||||
);
|
||||
}
|
||||
if (isDev) {
|
||||
webpackConfig.module.rules.push(
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
}
|
||||
);
|
||||
webpackConfig.plugins.push(
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NamedModulesPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
const path = require('path');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
const config = require('./config');
|
||||
|
||||
const webpackConfig = {
|
||||
mode: 'development',
|
||||
entry: {
|
||||
app: ['./src/index.js']
|
||||
},
|
||||
|
|
@ -23,14 +25,6 @@ const webpackConfig = {
|
|||
devtool: '#inline-source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
enforce: 'post',
|
||||
test: /\.jsx?$/,
|
||||
loader: 'isparta-loader',
|
||||
options: { esModules: true },
|
||||
exclude: config.jsexclude,
|
||||
include: /src|packages/
|
||||
},
|
||||
{
|
||||
test: /\.(jsx?|babel|es6)$/,
|
||||
include: process.cwd(),
|
||||
|
|
@ -41,42 +35,17 @@ const webpackConfig = {
|
|||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
js: process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader'
|
||||
},
|
||||
preserveWhitespace: false
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader?minimize=false'
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: path.posix.join('static', '[name].[hash:7].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
|
|
@ -86,6 +55,7 @@ const webpackConfig = {
|
|||
]
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin()
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
205
examples/app.vue
205
examples/app.vue
|
|
@ -1,178 +1,3 @@
|
|||
<style lang="css">
|
||||
@import 'highlight.js/styles/color-brewer.css';
|
||||
@import 'assets/styles/common.css';
|
||||
@import 'assets/styles/fonts/style.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.is-component {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
@when component {
|
||||
overflow-y: hidden;
|
||||
|
||||
.main-cnt {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f9fafc;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #fafafa;
|
||||
border: solid 1px #eaeefb;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.main-cnt {
|
||||
margin-top: -80px;
|
||||
padding: 80px 0 340px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.container,
|
||||
.page-container {
|
||||
width: 1140px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding-top: 55px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 8px 16px;
|
||||
background-color: #ECF8FF;
|
||||
border-radius: 4px;
|
||||
border-left: #50bfff 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #fff6f7;
|
||||
border-radius: 4px;
|
||||
border-left: #FE6C6F 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.container,
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container,
|
||||
.page-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#app.is-component .headerWrapper .container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div id="app" :class="{ 'is-component': isComponent }">
|
||||
<main-header v-if="lang !== 'play'"></main-header>
|
||||
|
|
@ -252,30 +77,12 @@
|
|||
if (this.lang === 'zh-CN') {
|
||||
this.suggestJump();
|
||||
}
|
||||
// setTimeout(() => {
|
||||
// const notified = localStorage.getItem('ES_NOTIFIED_2');
|
||||
// if (!notified && this.lang !== 'es') {
|
||||
// const title = this.lang === 'zh-CN'
|
||||
// ? '西班牙语文档正式上线'
|
||||
// : 'Spanish docs now available';
|
||||
// const message = this.lang === 'zh-CN'
|
||||
// ? '点击这里进行切换'
|
||||
// : 'Click here to switch';
|
||||
// const self = this;
|
||||
// this.$notify({
|
||||
// title,
|
||||
// duration: 0,
|
||||
// message,
|
||||
// onClick() {
|
||||
// self.$router.push('/es');
|
||||
// localStorage.setItem('ES_NOTIFIED_2', 1);
|
||||
// },
|
||||
// onClose() {
|
||||
// localStorage.setItem('ES_NOTIFIED_2', 1);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }, 3500);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import 'highlight.js/styles/color-brewer.css';
|
||||
@import 'assets/styles/common.css';
|
||||
@import 'assets/styles/fonts/style.css';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1 +1,168 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.is-component {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
@when component {
|
||||
overflow-y: hidden;
|
||||
|
||||
.main-cnt {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #409EFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f9fafc;
|
||||
padding: 0 4px;
|
||||
border: 1px solid #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #fafafa;
|
||||
border: solid 1px #eaeefb;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.main-cnt {
|
||||
margin-top: -80px;
|
||||
padding: 80px 0 340px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.container,
|
||||
.page-container {
|
||||
width: 1140px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding-top: 55px;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 8px 16px;
|
||||
background-color: #ECF8FF;
|
||||
border-radius: 4px;
|
||||
border-left: #50bfff 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #fff6f7;
|
||||
border-radius: 4px;
|
||||
border-left: #FE6C6F 5px solid;
|
||||
margin: 20px 0;
|
||||
|
||||
code {
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
color: #445368;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.container,
|
||||
.page-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container,
|
||||
.page-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#app.is-component .headerWrapper .container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,7 +178,8 @@
|
|||
|
||||
<script type="text/babel">
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
import Element from 'main/index.js';
|
||||
const { version } = Element;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -162,7 +162,8 @@
|
|||
|
||||
<script type="text/babel">
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
import Element from 'main/index.js';
|
||||
const { version } = Element;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -367,7 +367,8 @@
|
|||
import ThemePicker from './theme-picker.vue';
|
||||
import AlgoliaSearch from './search.vue';
|
||||
import compoLang from '../i18n/component.json';
|
||||
import { version } from 'main/index.js';
|
||||
import Element from 'main/index.js';
|
||||
const { version } = Element;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { version } from 'main/index.js';
|
||||
import Element from 'main/index.js';
|
||||
const { version } = Element;
|
||||
|
||||
const ORIGINAL_THEME = '#409EFF';
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1666,6 +1666,7 @@ Search and select options with a keyword.
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------------------- |---------|------------- |-------- |
|
||||
| value / v-model | binding value | boolean / string / number | — | — |
|
||||
| options | data of the options | array | — | — |
|
||||
| props | configuration options, see the following table | object | — | — |
|
||||
| value | selected value | array | — | — |
|
||||
|
|
|
|||
|
|
@ -286,6 +286,7 @@ Checkbox with button styles.
|
|||
### Checkbox Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | string / number / boolean | — | — |
|
||||
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | value of the Checkbox if it's checked | string / number | — | — |
|
||||
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
|
||||
|
|
@ -304,6 +305,7 @@ Checkbox with button styles.
|
|||
### Checkbox-group Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | array | — | — |
|
||||
|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
|
||||
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
|
||||
| min | minimum number of checkbox checked | number | — | — |
|
||||
|
|
|
|||
|
|
@ -141,13 +141,13 @@ Besides using the `title` attribute, you can customize panel title with named sl
|
|||
### Collapse Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
|
||||
| accordion | whether to activate accordion mode | boolean | — | false |
|
||||
| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
|
||||
|
||||
### Collapse Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
|
||||
| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@ ColorPicker is a color selector supporting multiple color formats.
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | string | — | — |
|
||||
| disabled | whether to disable the ColorPicker | boolean | — | false |
|
||||
| size | size of ColorPicker | string | — | medium / small / mini |
|
||||
| show-alpha | whether to display the alpha slider | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -474,6 +474,7 @@ When picking a date range, you can assign the time part for start date and end d
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
|
|
|
|||
|
|
@ -279,6 +279,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
|||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----| ----| ---| ----| -----|
|
||||
|value | binding value| number | — | — |
|
||||
|value / v-model | binding value| number | — | 0 |
|
||||
|min | the minimum allowed value | number | — | `-Infinity` |
|
||||
|max | the maximum allowed value | number | — | `Infinity` |
|
||||
|step | incremental step | number | — | 1 |
|
||||
|
|
|
|||
|
|
@ -643,7 +643,7 @@ Search data from server-side.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----| ----| ----| ---- | ----- |
|
||||
|type| type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||||
|value| binding value | string / number| — | — |
|
||||
|value / v-model| binding value | string / number| — | — |
|
||||
|maxlength| same as `maxlength` in native input | number| — | — |
|
||||
|minlength| same as `minlength` in native input | number | — | — |
|
||||
|placeholder| placeholder of Input| string | — | — |
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
|||
| width | popover width | string, number | — | Min width 150px |
|
||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | whether Popover is disabled | boolean | — | false |
|
||||
| value(v-model) | whether popover is visible | Boolean | — | false |
|
||||
| value / v-model | whether popover is visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ Radio with button styles.
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
value / v-model | binding value | string / number / boolean | — | —
|
||||
label | the value of Radio | string / number / boolean | — | —
|
||||
disabled | whether Radio is disabled | boolean | — | false
|
||||
border | whether to add a border around Radio | boolean | — | false
|
||||
|
|
@ -211,6 +212,7 @@ name | native 'name' attribute | string | — | —
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
value / v-model | binding value | string / number / boolean | — | —
|
||||
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
|
||||
disabled | whether the nesting radios are disabled | boolean | — | false
|
||||
text-color | font color when button is active | string | — | #ffffff |
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | number | — | 0 |
|
||||
| max | max rating score | number | — | 5 |
|
||||
| disabled | whether Rate is read-only | boolean | — | false |
|
||||
| allow-half | whether picking half start is allowed | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -662,6 +662,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
|||
### Select Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | binding value | boolean / string / number | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | — | false |
|
||||
| disabled | whether Select is disabled | boolean | — | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
|
|
|
|||
|
|
@ -228,6 +228,7 @@ Selecting a range of values is supported.
|
|||
## Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | binding value | number | — | 0 |
|
||||
| min | minimum value | number | — | 0 |
|
||||
| max | maximum value | number | — | 100 |
|
||||
| disabled | whether Slider is disabled | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@ Switch is used for switching between two opposing states.
|
|||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----|----
|
||||
value / v-model | binding value | boolean / string / number | — | —
|
||||
disabled | whether Switch is disabled | boolean | — | false
|
||||
width | width of Switch | number | — | 40
|
||||
active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
|
||||
|
|
|
|||
|
|
@ -370,11 +370,11 @@ Only card type Tabs support addable & closeable.
|
|||
### Tabs Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value, name of the selected tab | string | — | name of first tab |
|
||||
| type | type of Tab | string | card/border-card | — |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
| addable | whether Tab is addable | boolean | — | false |
|
||||
| editable | whether Tab is addable and closable | boolean | — | false |
|
||||
| value | name of the selected tab | string | — | name of first tab |
|
||||
| tab-position | position of tabs | string | top/right/bottom/left | top |
|
||||
| stretch | whether width of tab automatically fits its container | boolean | - | false |
|
||||
| before-leave | hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | — | — |
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ Can pick an arbitrary time range.
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
|
|
@ -183,7 +184,6 @@ Can pick an arbitrary time range.
|
|||
| end-placeholder | placeholder for the end time in range mode | string | — | — |
|
||||
| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
|
||||
| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
|
||||
| value | value of the picker | Date for Time Picker, and string for Time Select | - | - |
|
||||
| align | alignment | left / center / right | left |
|
||||
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ Disabled form elements are not supported for Tooltip, more information can be fo
|
|||
| effect | Tooltip theme | string | dark/light | dark |
|
||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value(v-model) | visibility of Tooltip | boolean | — | false |
|
||||
| value / v-model | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
|
|
|
|||
|
|
@ -287,6 +287,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
|
|||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | binding value | array | — | — |
|
||||
| data | data source | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | whether Transfer is filterable | boolean | — | false |
|
||||
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
|
||||
|
|
|
|||
|
|
@ -1672,6 +1672,7 @@ Buscar y seleccionar opciones con una palabra clave.
|
|||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Opciones | Por defecto |
|
||||
| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
|
||||
| value / v-model | valor enlazado | boolean / string / number | — | — |
|
||||
| options | datos de las opciones | array | — | — |
|
||||
| props | opciones de configuracion, mire la tabla siguiente | object | — | — |
|
||||
| value | valor seleccionado | array | — | — |
|
||||
|
|
|
|||
|
|
@ -286,6 +286,7 @@ Checkbox con estilo tipo Botón.
|
|||
### Atributos de Checkbox
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
|
||||
| value / v-model | valor enlazado | string / number / boolean | — | — |
|
||||
| label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | valor del Checkbox si está marcado | string / number | — | — |
|
||||
| false-label | valor del Checkbox si no está marcado | string / number | — | — |
|
||||
|
|
@ -304,6 +305,7 @@ Checkbox con estilo tipo Botón.
|
|||
### Atributos de Checkbox-group
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|
||||
| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| value / v-model | valor enlazado | array | — | — |
|
||||
| size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
|
||||
| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
|
||||
| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
|
||||
|
|
|
|||
|
|
@ -141,13 +141,13 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
|
|||
### Atributos de Collapse
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| value / v-model | panel activo | string (modo acordeón) / array (No modo acordeón) | — | — |
|
||||
| accordion | especifica si activa el modo acordeón | boolean | — | false |
|
||||
| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
|
||||
|
||||
### Eventos de Collapse
|
||||
| Nombre de Evento | Descripción | Parametros |
|
||||
| ---------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
|
||||
| change | se dispara cuando los paneles activos cambian | (activeNames: array (No modo acordeón) / string (modo acordeón)) |
|
||||
|
||||
|
||||
### Atributos de Collapse Item
|
||||
|
|
|
|||
|
|
@ -165,14 +165,15 @@ ColorPicker es un selector de color que soporta varios formatos de color.
|
|||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
|
||||
| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
|
||||
| size | tamaño del ColorPicker | string | — | medium / small / mini |
|
||||
| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
|
||||
| color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
|
||||
| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
|
||||
| predefine | opciones de colores predefinidas | array | — | — |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
|
||||
| value / v-model | valor enlazado | string | — | — |
|
||||
| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
|
||||
| size | tamaño del ColorPicker | string | — | medium / small / mini |
|
||||
| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
|
||||
| color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
|
||||
| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
|
||||
| predefine | opciones de colores predefinidas | array | — | — |
|
||||
|
||||
### Eventos
|
||||
| Nombre de Evento | Descripción | Parametros |
|
||||
|
|
|
|||
|
|
@ -477,6 +477,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
|
|||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
|
||||
| value / v-model | valor enlazado | date(DatePicker) / array(DateRangePicker) | — | — |
|
||||
| readonly | si DatePicker es solo de lectura | boolean | — | false |
|
||||
| disabled | si DatePicker esta deshabilitado | boolean | — | false |
|
||||
| size | tamaño del input | string | large/small/mini | — |
|
||||
|
|
|
|||
|
|
@ -280,6 +280,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
|||
### Atributos
|
||||
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
|
||||
| value / v-model | valor enlazado | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
|
||||
| readonly | si DatePicker es solo de lectura | boolean | — | false |
|
||||
| disabled | si DatePicker esta deshabilitada | boolean | — | false |
|
||||
| editable | Si la entrada es editable | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
|
|||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| value | valor vinculado | number | — | — |
|
||||
| value / v-model | valor vinculado | number | — | 0 |
|
||||
| min | el valor mínimo permitido | number | — | `-Infinity` |
|
||||
| max | el valor maximo permitido | number | — | `Infinity` |
|
||||
| step | incremento (salto) | number | — | 1 |
|
||||
|
|
|
|||
|
|
@ -623,7 +623,7 @@ Búsqueda de datos desde el servidor.
|
|||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- |
|
||||
| type | tipo de input | string | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text |
|
||||
| value | valor enlazado | string / number | — | — |
|
||||
| value / v-model | valor enlazado | boolean / string / number | — | — |
|
||||
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
|
||||
| minlength | igual que `minlength` en el input nativo | number | — | — |
|
||||
| placeholder | placeholder del Input | string | — | — |
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
|||
| width | ancho del popover | string, number | — | Min width 150px |
|
||||
| placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | si el popover está deshabilitado | boolean | — | false |
|
||||
| value(v-model) | si el popover está visible | Boolean | — | false |
|
||||
| value / v-model | si el popover está visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ Radio con estilo de botón.
|
|||
|
||||
| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
|
||||
| value / v-model | valor enlazado | string / number / boolean | — | — |
|
||||
| label | el valor del Radio | string / number / boolean | — | — |
|
||||
| disabled | si el Radio está deshabilitado | boolean | — | false |
|
||||
| border | agregar borde alrededor del elemento Radio | boolean | — | false |
|
||||
|
|
@ -211,6 +212,7 @@ Radio con estilo de botón.
|
|||
|
||||
| Atributo | Descripción | Tipo | Valores Aceptado | Valores por defecto |
|
||||
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
|
||||
| value / v-model | valor enlazado | string / number / boolean | — | — |
|
||||
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
|
||||
| disabled | si la anidación de radios está desahabilitada | boolean | — | false |
|
||||
| text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
|
|||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|
||||
| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
|
||||
| value / v-model | valor enlazado | number | — | 0 |
|
||||
| max | puntuación máxima | number | — | 5 |
|
||||
| disabled | si la calificación es de solo lectura | boolean | — | false |
|
||||
| allow-half | si escoger media estrella está permitido | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -668,6 +668,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
|
|||
### Select atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
|
||||
| value / v-model | valor enlazado | boolean / string / number | — | — |
|
||||
| multiple | si multiple-select esta activo | boolean | — | false |
|
||||
| disabled | si Select esta deshabilitado | boolean | — | false |
|
||||
| collapse-tags | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -230,6 +230,7 @@ Se soporta la selección de un rango de valores.
|
|||
## Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
|
||||
| value / v-model | valor enlazado | number | — | 0 |
|
||||
| min | valor minimo | number | — | 0 |
|
||||
| max | valor máximo | number | — | 100 |
|
||||
| disabled | si el Slider esta deshabitado | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
|||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
|
||||
| value / v-model | valor enlazado | boolean / string / number | — | — |
|
||||
| disabled | si Switch esta deshabilitado | boolean | — | false |
|
||||
| width | ancho del componente Switch | number | — | 40 |
|
||||
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | — |
|
||||
|
|
|
|||
|
|
@ -368,16 +368,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
:::
|
||||
|
||||
### Atributos de Pestañas
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
|
||||
| type | tipo de Pestaña | string | card/border-card | — |
|
||||
| closable | si la Pestaña es cerrable | boolean | — | false |
|
||||
| addable | si la Pestaña es añadible | boolean | — | false |
|
||||
| editable | si la Pestaña es añadible y cerrable | boolean | — | false |
|
||||
| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
|
||||
| tab-position | posición de tabulación | string | top/right/bottom/left | top |
|
||||
| stretch | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
|
||||
| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- |
|
||||
| value / v-model | valor enlazado, nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
|
||||
| type | tipo de Pestaña | string | card/border-card | — |
|
||||
| closable | si la Pestaña es cerrable | boolean | — | false |
|
||||
| addable | si la Pestaña es añadible | boolean | — | false |
|
||||
| editable | si la Pestaña es añadible y cerrable | boolean | — | false |
|
||||
| tab-position | posición de tabulación | string | top/right/bottom/left | top |
|
||||
| stretch | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
|
||||
| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
|
||||
|
||||
### Eventos de Pestañas
|
||||
| Nombre de Evento | Descripción | Parámetros |
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@ Es posible escoger un rango de tiempo arbitrario.
|
|||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
|
||||
| value / v-model | valor enlazado | date(TimePicker) / string(TimeSelect) | - | - |
|
||||
| readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
|
||||
| disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
|
||||
| editable | si el input puede ser editado | boolean | — | true |
|
||||
|
|
@ -183,7 +184,6 @@ Es posible escoger un rango de tiempo arbitrario.
|
|||
| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
|
||||
| is-range | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
|
||||
| arrow-control | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
|
||||
| value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| align | alineación | left / center / right | left | |
|
||||
| popper-class | nombre de clase personalizada para el dropdown del Time Picker | string | — | — |
|
||||
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
|
|||
| effect | tema del Tooltip | string | dark/light | dark |
|
||||
| content | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string | — | — |
|
||||
| placement | posición del Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value(v-model) | visibilidad del Tooltip | boolean | — | false |
|
||||
| value / v-model | visibilidad del Tooltip | boolean | — | false |
|
||||
| disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
|
||||
| offset | offset del Tooltip | number | — | 0 |
|
||||
| transition | nombre de animación | string | — | el-fade-in-linear |
|
||||
|
|
|
|||
|
|
@ -288,6 +288,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
### Atributos
|
||||
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
|
||||
| value / v-model | valor enlazado | array | — | — |
|
||||
| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | Si se puede filtrar | boolean | — | false |
|
||||
| filter-placeholder | Placeholder para el input del filtro | string | — | Enter keyword |
|
||||
|
|
|
|||
|
|
@ -1666,6 +1666,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | boolean / string / number | — | — |
|
||||
| options | 可选项数据源，键名可通过 `props` 属性配置 | array | — | — |
|
||||
| props | 配置选项，具体见下表 | object | — | — |
|
||||
| value | 选中项绑定值 | array | — | — |
|
||||
|
|
|
|||
|
|
@ -284,6 +284,7 @@
|
|||
### Checkbox Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
|
||||
| true-label | 选中时的值 | string / number | — | — |
|
||||
| false-label | 没有选中时的值 | string / number | — | — |
|
||||
|
|
@ -302,6 +303,7 @@
|
|||
### Checkbox-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | array | — | — |
|
||||
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
|
||||
|
|
|
|||
|
|
@ -140,16 +140,16 @@
|
|||
### Collapse Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string / array | — | — |
|
||||
| accordion | 是否手风琴模式 | boolean | — | false |
|
||||
| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — |
|
||||
|
||||
### Collapse Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|---------|---------|
|
||||
| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) |
|
||||
| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 唯一标志符 | string/number | — | — |
|
||||
| title | 面板标题 | string | — | — |
|
||||
| title | 面板标题 | string | — | — |
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| size | 尺寸 | string | — | medium / small / mini |
|
||||
| show-alpha | 是否支持透明度选择 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 选择日期范围
|
||||
### 选择日期范围
|
||||
|
||||
可在一个选择器中便捷地选择一个时间范围
|
||||
|
||||
|
|
@ -249,7 +249,6 @@
|
|||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认</span>
|
||||
{{value6}}
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
|
|
@ -429,6 +428,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -278,6 +278,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
| value | 绑定值 | number | — | — |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||
| step | 计数器步长 | number | — | 1 |
|
||||
|
|
|
|||
|
|
@ -799,7 +799,7 @@ export default {
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | 类型 | string | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
|
||||
| value | 绑定值 | string / number | — | — |
|
||||
| value / v-model | 绑定值 | string / number | — | — |
|
||||
| maxlength | 原生属性，最大输入长度 | number | — | — |
|
||||
| minlength | 原生属性，最小输入长度 | number | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
| width | 宽度 | String, Number | — | 最小宽度 150px |
|
||||
| placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | Popover 是否可用 | Boolean | — | false |
|
||||
| value(v-model) | 状态是否可见 | Boolean | — | false |
|
||||
| value / v-model | 状态是否可见 | Boolean | — | false |
|
||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@
|
|||
### Radio Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| label | Radio 的 value | string / number / boolean | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| border | 是否显示边框 | boolean | — | false |
|
||||
|
|
@ -211,6 +212,7 @@
|
|||
### Radio-group Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | string / number / boolean | — | — |
|
||||
| size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| max | 最大分值 | number | — | 5 |
|
||||
| disabled | 是否为只读 | boolean | — | false |
|
||||
| allow-half | 是否允许半选 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -657,6 +657,7 @@
|
|||
### Select Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | boolean / string / number | — | — |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
|
||||
|
|
|
|||
|
|
@ -225,6 +225,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | number | — | 0 |
|
||||
| min | 最小值 | number | — | 0 |
|
||||
| max | 最大值 | number | — | 100 |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -142,6 +142,7 @@
|
|||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | boolean / string / number | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| width | switch 的宽度（像素） | number | — | 40 |
|
||||
| active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `active-text` | string | — | — |
|
||||
|
|
|
|||
|
|
@ -368,11 +368,11 @@
|
|||
### Tabs Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
| type | 风格类型 | string | card/border-card | — |
|
||||
| closable | 标签是否可关闭 | boolean | — | false |
|
||||
| addable | 标签是否可增加 | boolean | — | false |
|
||||
| editable | 标签是否同时可增加和关闭 | boolean | — | false |
|
||||
| value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
|
||||
| tab-position | 选项卡所在位置 | string | top/right/bottom/left | top |
|
||||
| stretch | 标签的宽度是否自撑开 | boolean | - | false |
|
||||
| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |
|
||||
|
|
|
|||
|
|
@ -174,6 +174,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||||
| readonly | 完全只读 | boolean | — | false |
|
||||
| disabled | 禁用 | boolean | — | false |
|
||||
| editable | 文本框可输入 | boolean | — | true |
|
||||
|
|
@ -184,7 +185,6 @@
|
|||
| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
|
||||
| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
|
|||
| effect | 默认提供的主题 | String | dark/light | dark |
|
||||
| content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | — |
|
||||
| placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value(v-model) | 状态是否可见 | Boolean | — | false |
|
||||
| value / v-model | 状态是否可见 | Boolean | — | false |
|
||||
| disabled | Tooltip 是否可用 | Boolean | — | false |
|
||||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | el-fade-in-linear |
|
||||
|
|
|
|||
|
|
@ -284,6 +284,7 @@
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value / v-model | 绑定值 | array | — | — |
|
||||
| data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | 是否可搜索 | boolean | — | false |
|
||||
| filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import VueRouter from 'vue-router';
|
|||
import Element from 'main/index.js';
|
||||
import 'packages/theme-chalk/src/index.scss';
|
||||
import routes from './route.config';
|
||||
import demoBlock from './components/demo-block.vue';
|
||||
import MainFooter from './components/footer.vue';
|
||||
import MainHeader from './components/header.vue';
|
||||
import demoBlock from './components/demo-block';
|
||||
import MainFooter from './components/footer';
|
||||
import MainHeader from './components/header';
|
||||
import SideNav from './components/side-nav';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import title from './i18n/title.json';
|
||||
import title from './i18n/title';
|
||||
|
||||
Vue.use(Element);
|
||||
Vue.use(VueRouter);
|
||||
|
|
@ -37,6 +37,6 @@ router.afterEach(route => {
|
|||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(entry),
|
||||
...entry,
|
||||
router
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@
|
|||
document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
|
||||
<script src="//cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<% if (process.env.NODE_ENV === 'production') { %><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
padding: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
|
@ -79,12 +79,12 @@
|
|||
th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
color: #909399;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #333;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
th:first-child, td:first-child {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div style="margin: 20px;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import navConfig from './nav.config.json';
|
||||
import langs from './i18n/route.json';
|
||||
import navConfig from './nav.config';
|
||||
import langs from './i18n/route';
|
||||
|
||||
const LOAD_MAP = {
|
||||
'zh-CN': name => {
|
||||
|
|
|
|||
60
package.json
60
package.json
|
|
@ -25,8 +25,8 @@
|
|||
"i18n": "node build/bin/i18n.js",
|
||||
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
|
||||
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
|
||||
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
|
||||
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
|
||||
"test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
|
||||
},
|
||||
"faas": {
|
||||
"domain": "element",
|
||||
|
|
@ -57,22 +57,24 @@
|
|||
"throttle-debounce": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.2"
|
||||
"vue": "^2.5.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"algoliasearch": "^3.24.5",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-istanbul": "^4.1.1",
|
||||
"babel-plugin-module-resolver": "^2.2.0",
|
||||
"babel-plugin-syntax-jsx": "^6.8.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-preset-es2015": "^6.14.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.7.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"chai": "^3.5.0",
|
||||
"cheerio": "^0.18.0",
|
||||
"chokidar": "^1.7.0",
|
||||
"copy-webpack-plugin": "^4.1.1",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
"coveralls": "^2.11.14",
|
||||
"cp-cli": "^1.0.2",
|
||||
"cross-env": "^3.1.3",
|
||||
|
|
@ -80,11 +82,10 @@
|
|||
"es6-promise": "^4.0.5",
|
||||
"eslint": "4.14.0",
|
||||
"eslint-config-elemefe": "0.1.1",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-html": "^4.0.1",
|
||||
"eslint-plugin-json": "^1.2.0",
|
||||
"extract-text-webpack-plugin": "^3.0.1",
|
||||
"file-loader": "^1.1.5",
|
||||
"file-loader": "^1.1.11",
|
||||
"file-save": "^0.2.0",
|
||||
"gh-pages": "^0.11.0",
|
||||
"gulp": "^3.9.1",
|
||||
|
|
@ -94,9 +95,7 @@
|
|||
"gulp-sass": "^3.1.0",
|
||||
"highlight.js": "^9.3.0",
|
||||
"html-loader": "^0.5.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"inject-loader": "^3.0.1",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"json-templater": "^1.0.4",
|
||||
"karma": "^1.3.0",
|
||||
|
|
@ -107,16 +106,16 @@
|
|||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-webpack": "^3.0.0",
|
||||
"lolex": "^1.5.1",
|
||||
"markdown-it": "^6.1.1",
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it": "^8.4.1",
|
||||
"markdown-it-anchor": "^5.0.2",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mini-css-extract-plugin": "^0.4.1",
|
||||
"mocha": "^3.1.1",
|
||||
"node-sass": "^4.5.3",
|
||||
"perspective.js": "^1.0.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-loader": "0.11.1",
|
||||
"postcss-salad": "^1.0.8",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"postcss-salad": "^2.0.1",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"rimraf": "^2.5.4",
|
||||
"sass-loader": "^6.0.6",
|
||||
|
|
@ -125,15 +124,16 @@
|
|||
"style-loader": "^0.19.0",
|
||||
"transliteration": "^1.1.11",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"url-loader": "^0.6.2",
|
||||
"vue": "^2.5.2",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-markdown-loader": "1",
|
||||
"vue-router": "2.7.0",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue": "^2.5.16",
|
||||
"vue-loader": "^15.2.4",
|
||||
"vue-markdown-loader": "^2.4.1",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"vue-template-es2015-compiler": "^1.6.0",
|
||||
"webpack": "^3.7.1",
|
||||
"webpack-dev-server": "^2.9.1",
|
||||
"webpack-node-externals": "^1.6.0"
|
||||
"webpack": "^4.14.0",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.4",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||
install(window.Vue);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
version: '2.4.6',
|
||||
locale: locale.use,
|
||||
i18n: locale.i18n,
|
||||
|
|
@ -247,5 +247,3 @@ module.exports = {
|
|||
Main,
|
||||
Footer
|
||||
};
|
||||
|
||||
module.exports.default = module.exports;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
var webpackConfig = require('../../build/webpack.test');
|
||||
|
||||
// no need for app entry during tests
|
||||
// delete webpackConfig.entry;
|
||||
const webpackConfig = require('../../build/webpack.test');
|
||||
|
||||
module.exports = function(config) {
|
||||
var configuration = {
|
||||
// to run in additional browsers:
|
||||
// 1. install corresponding karma launcher
|
||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||
// 2. add it to the `browsers` array below.
|
||||
const configuration = {
|
||||
browsers: ['Chrome'],
|
||||
customLaunchers: {
|
||||
Chrome_travis_ci: {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ describe('MessageBox', () => {
|
|||
setTimeout(() => {
|
||||
const msgbox = document.querySelector('.el-message-box__wrapper');
|
||||
expect(msgbox.__vue__.$parent.visible).to.true;
|
||||
expect(msgbox.querySelector('.el-message-box__title').textContent).to.equal('消息');
|
||||
expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');
|
||||
expect(msgbox.querySelector('.el-message-box__message')
|
||||
.querySelector('p').textContent).to.equal('这是一段内容');
|
||||
MessageBox.close();
|
||||
|
|
|
|||
|
|
@ -581,7 +581,7 @@ describe('Tree', () => {
|
|||
expect(firstNode.querySelector('.custom-content')).to.exist;
|
||||
const button = firstNode.querySelector('.custom-content .el-button');
|
||||
expect(button).to.exist;
|
||||
expect(button.textContent).to.equal('一级 1');
|
||||
expect(button.querySelector('span').textContent).to.equal('一级 1');
|
||||
});
|
||||
|
||||
it('scoped slot', () => {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const createElm = function() {
|
|||
* 回收 vm
|
||||
* @param {Object} vm
|
||||
*/
|
||||
exports.destroyVM = function(vm) {
|
||||
export const destroyVM = function(vm) {
|
||||
vm.$destroy && vm.$destroy();
|
||||
vm.$el &&
|
||||
vm.$el.parentNode &&
|
||||
|
|
@ -31,7 +31,7 @@ exports.destroyVM = function(vm) {
|
|||
* @param {Boolean=false} mounted 是否添加到 DOM 上
|
||||
* @return {Object} vm
|
||||
*/
|
||||
exports.createVue = function(Compo, mounted = false) {
|
||||
export const createVue = function(Compo, mounted = false) {
|
||||
if (Object.prototype.toString.call(Compo) === '[object String]') {
|
||||
Compo = { template: Compo };
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ exports.createVue = function(Compo, mounted = false) {
|
|||
* @param {Boolean=false} mounted - 是否添加到 DOM 上
|
||||
* @return {Object} vm
|
||||
*/
|
||||
exports.createTest = function(Compo, propsData = {}, mounted = false) {
|
||||
export const createTest = function(Compo, propsData = {}, mounted = false) {
|
||||
if (propsData === true || propsData === false) {
|
||||
mounted = propsData;
|
||||
propsData = {};
|
||||
|
|
@ -63,7 +63,7 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) {
|
|||
* @param {String} name
|
||||
* @param {*} opts
|
||||
*/
|
||||
exports.triggerEvent = function(elm, name, ...opts) {
|
||||
export const triggerEvent = function(elm, name, ...opts) {
|
||||
let eventName;
|
||||
|
||||
if (/^mouse|click/.test(name)) {
|
||||
|
|
@ -88,9 +88,9 @@ exports.triggerEvent = function(elm, name, ...opts) {
|
|||
* @param {Element} elm
|
||||
* @param {*} opts
|
||||
*/
|
||||
exports.triggerClick = function(elm, ...opts) {
|
||||
exports.triggerEvent(elm, 'mousedown', ...opts);
|
||||
exports.triggerEvent(elm, 'mouseup', ...opts);
|
||||
export const triggerClick = function(elm, ...opts) {
|
||||
triggerEvent(elm, 'mousedown', ...opts);
|
||||
triggerEvent(elm, 'mouseup', ...opts);
|
||||
|
||||
return elm;
|
||||
};
|
||||
|
|
@ -100,7 +100,7 @@ exports.triggerClick = function(elm, ...opts) {
|
|||
* @param {Element} elm
|
||||
* @param {keyCode} int
|
||||
*/
|
||||
exports.triggerKeyDown = function(el, keyCode) {
|
||||
export const triggerKeyDown = function(el, keyCode) {
|
||||
const evt = document.createEvent('Events');
|
||||
evt.initEvent('keydown', true, true);
|
||||
evt.keyCode = keyCode;
|
||||
|
|
|
|||
Loading…
Reference in New Issue