mirror of https://github.com/ElemeFE/element
scaffolding Spanish docs
Leopoldthecoder
杨奕
parent
4d71e2f3af
commit
7e8a00d2ea
|
|
@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) {
|
|||
console.error(`${lang} already exists.`);
|
||||
process.exit(1);
|
||||
}
|
||||
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
|
||||
componentFile.push(componentNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
|
||||
.write(JSON.stringify(componentFile, null, ' '), 'utf8')
|
||||
|
|
@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
|
|||
|
||||
// 添加到 page.json
|
||||
const pageFile = require('../../examples/i18n/page.json');
|
||||
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
|
||||
pageFile.push(pageNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
|
||||
.write(JSON.stringify(pageFile, null, ' '), 'utf8')
|
||||
|
|
@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
|
|||
|
||||
// 添加到 nav.config.json
|
||||
const navFile = require('../../examples/nav.config.json');
|
||||
navFile[lang] = navFile['en-us'];
|
||||
navFile[lang] = navFile['en-US'];
|
||||
fileSave(path.join(__dirname, '../../examples/nav.config.json'))
|
||||
.write(JSON.stringify(navFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
|
|
|||
|
|
@ -187,7 +187,23 @@
|
|||
import { use } from 'main/locale';
|
||||
import zhLocale from 'main/locale/lang/zh-CN';
|
||||
import enLocale from 'main/locale/lang/en';
|
||||
use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale);
|
||||
import esLocale from 'main/locale/lang/es';
|
||||
|
||||
const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
|
||||
const localize = lang => {
|
||||
console.log(lang);
|
||||
switch (lang) {
|
||||
case 'zh-CN':
|
||||
use(zhLocale);
|
||||
break;
|
||||
case 'es':
|
||||
use(esLocale);
|
||||
break;
|
||||
default:
|
||||
use(enLocale);
|
||||
}
|
||||
};
|
||||
localize(lang);
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
@ -206,14 +222,11 @@
|
|||
if (val === 'zh-CN') {
|
||||
this.suggestJump();
|
||||
}
|
||||
this.localize();
|
||||
localize(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
localize() {
|
||||
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
|
||||
},
|
||||
suggestJump() {
|
||||
const href = location.href;
|
||||
const preferGithub = localStorage.getItem('PREFER_GITHUB');
|
||||
|
|
@ -231,7 +244,7 @@
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.localize();
|
||||
localize(this.lang);
|
||||
if (this.lang === 'zh-CN') {
|
||||
this.suggestJump();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,223 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-alert .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Alert
|
||||
|
||||
Displays important alert messages.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Alert components are non-overlay elements in the page that does not disappear automatically.
|
||||
|
||||
::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizable close button
|
||||
|
||||
Customize the close button as texts or other symbols.
|
||||
|
||||
::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="unclosable alert"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="customized close-text"
|
||||
type="info"
|
||||
close-text="Gotcha">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="alert with callback"
|
||||
type="warning"
|
||||
@close="hello">
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With icon
|
||||
|
||||
Displaying an icon improves readability.
|
||||
|
||||
::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
## Centered text
|
||||
|
||||
Use the `center` attribute to center the text.
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### With description
|
||||
|
||||
Description includes a message with more detailed information.
|
||||
|
||||
::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="with description"
|
||||
type="success"
|
||||
description="This is a description.">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### With icon and description
|
||||
|
||||
::: demo At last, this is an example with both icon and description.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| **title** | title **REQUIRED** | string | — | — |
|
||||
| type | component type | string | success/warning/info/error | info |
|
||||
| description | descriptive text. Can also be passed with the default slot | string | — | — |
|
||||
| closable | if closable or not | boolean | — | true |
|
||||
| center | whether to center the text | boolean | — | false |
|
||||
| close-text | customized close button text | string | — | — |
|
||||
| show-icon | if a type icon is displayed | boolean | — | false |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | fires when alert is closed | — |
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
## Badge
|
||||
|
||||
A number or status mark on buttons and icons.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Displays the amount of new messages.
|
||||
|
||||
:::demo The amount is defined with `value` which accepts `Number` or `String`.
|
||||
|
||||
```html
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="clearfix">
|
||||
comments
|
||||
<el-badge class="mark" :value="12" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="clearfix">
|
||||
replies
|
||||
<el-badge class="mark" :value="3" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Max value
|
||||
|
||||
You can customize the max value.
|
||||
|
||||
::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
|
||||
|
||||
```html
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizations
|
||||
|
||||
Displays text content other than numbers.
|
||||
|
||||
:::demo When `value` is a `String`, it can display customized text.
|
||||
|
||||
```html
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Little red dot
|
||||
|
||||
Use a red dot to mark content that needs to be noticed.
|
||||
|
||||
:::demo Use the attribute `is-dot`. It is a `Boolean`.
|
||||
|
||||
```html
|
||||
<el-badge is-dot class="item">query</el-badge>
|
||||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
<style scoped>
|
||||
.share-button {
|
||||
width: 36px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin-top: 8px;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@utils-clearfix;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| value | display value | string, number | — | — |
|
||||
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
|
||||
| is-dot | if a little dot is displayed | boolean | — | false |
|
||||
| hidden | hidden badge | boolean | — | false |
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
## Breadcrumb
|
||||
|
||||
Displays the location of the current page, making it easier to browser back.
|
||||
|
||||
### Basic usage
|
||||
|
||||
|
||||
:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Icon separator
|
||||
|
||||
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Breadcrumb Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | separator character | string | — | / |
|
||||
| separator-class | class name of icon separator | string | — | - |
|
||||
|
||||
### Breadcrumb Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
|
||||
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<style>
|
||||
.demo-box.demo-button {
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& + .el-button-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button
|
||||
|
||||
Commonly used button.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Use `type`, `plain` and `round` to define Button's style.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0">
|
||||
<el-button plain>Plain</el-button>
|
||||
<el-button type="primary" plain>Primary</el-button>
|
||||
<el-button type="success" plain>Success</el-button>
|
||||
<el-button type="info" plain>Info</el-button>
|
||||
<el-button type="warning" plain>Warning</el-button>
|
||||
<el-button type="danger" plain>Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button round>Round</el-button>
|
||||
<el-button type="primary" round>Primary</el-button>
|
||||
<el-button type="success" round>Success</el-button>
|
||||
<el-button type="info" round>Info</el-button>
|
||||
<el-button type="warning" round>Warning</el-button>
|
||||
<el-button type="danger" round>Danger</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled Button
|
||||
|
||||
The `disabled` attribute determines if the button is disabled.
|
||||
|
||||
:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button disabled>Default</el-button>
|
||||
<el-button type="primary" disabled>Primary</el-button>
|
||||
<el-button type="success" disabled>Success</el-button>
|
||||
<el-button type="info" disabled>Info</el-button>
|
||||
<el-button type="warning" disabled>Warning</el-button>
|
||||
<el-button type="danger" disabled>Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">
|
||||
<el-button plain disabled>Plain</el-button>
|
||||
<el-button type="primary" plain disabled>Primary</el-button>
|
||||
<el-button type="success" plain disabled>Success</el-button>
|
||||
<el-button type="info" plain disabled>Info</el-button>
|
||||
<el-button type="warning" plain disabled>Warning</el-button>
|
||||
<el-button type="danger" plain disabled>Danger</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Text Button
|
||||
|
||||
Buttons without border and background.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-button type="text">Text Button</el-button>
|
||||
<el-button type="text" disabled>Text Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Icon Button
|
||||
|
||||
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
|
||||
|
||||
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Button Group
|
||||
|
||||
Displayed as a button group, can be used to group a series of similar operations.
|
||||
|
||||
:::demo Use tag `<el-button-group>` to group your buttons.
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
|
||||
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### Loading Button
|
||||
|
||||
Click the button to load data, then the button displays a loading state.
|
||||
|
||||
:::demo Set `loading` attribute to `true` to display loading state.
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Loading</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
|
||||
|
||||
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button>Default</el-button>
|
||||
<el-button size="medium">Medium</el-button>
|
||||
<el-button size="small">Small</el-button>
|
||||
<el-button size="mini">Mini</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button round>Default</el-button>
|
||||
<el-button size="medium" round>Medium</el-button>
|
||||
<el-button size="small" round>Small</el-button>
|
||||
<el-button size="mini" round>Mini</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| size | button size | string | medium / small / mini | — |
|
||||
| type | button type | string | primary / success / warning / danger / info / text | — |
|
||||
| plain | determine whether it's a plain button | boolean | — | false |
|
||||
| round | determine whether it's a round button | boolean | — | false |
|
||||
| loading | determine whether it's loading | boolean | — | false |
|
||||
| disabled | disable the button | boolean | — | false |
|
||||
| icon | icon class name | string | — | — |
|
||||
| autofocus | same as native button's `autofocus` | boolean | — | false |
|
||||
| native-type | same as native button's `type` | string | button / submit / reset | button |
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Card includes title, content and operations.
|
||||
|
||||
:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Card name</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Simple card
|
||||
|
||||
The header part can be omitted.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### With images
|
||||
|
||||
Display richer content by adding some configs.
|
||||
|
||||
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
|
||||
| body-style | CSS style of body | object| — | { padding: '20px' } |
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<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
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is hovered (default)</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is clicked</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Indicators
|
||||
|
||||
Indicators can be displayed outside the carousel
|
||||
|
||||
::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arrows
|
||||
|
||||
You can define when arrows are displayed
|
||||
|
||||
::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Card mode
|
||||
|
||||
When a page is wide enough but has limited height, you can activate card mode for carousels
|
||||
|
||||
::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Carousel Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | height of the carousel | string | — | — |
|
||||
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
|
||||
| trigger | how indicators are triggered | string | hover/click | hover |
|
||||
| autoplay | whether automatically loop the slides | boolean | — | true |
|
||||
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
|
||||
| indicator-position | position of the indicators | string | outside/none | — |
|
||||
| arrow | when arrows are shown | string | always/hover/never | hover |
|
||||
| type | type of the Carousel | string | card | — |
|
||||
|
||||
### Carousel Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
|
||||
|
||||
### Carousel Methods
|
||||
| Method | Description | Parameters |
|
||||
|---------- |-------------- | -- |
|
||||
| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
|
||||
| prev | switch to the previous slide | — |
|
||||
| next | switch to the next slide | — |
|
||||
|
||||
### Carousel-Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | name of the item, can be used in `setActiveItem` | string | — | — |
|
||||
| label | text content for the corresponding indicator | string | — | — |
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,327 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Checkbox can be used alone to switch between two states.
|
||||
|
||||
:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` should be true or false -->
|
||||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled State
|
||||
|
||||
Disabled state for checkbox.
|
||||
|
||||
::: demo Set the `disabled` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox v-model="checked1" disabled>Option</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>Option</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox group
|
||||
|
||||
It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
|
||||
|
||||
:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="Option A"></el-checkbox>
|
||||
<el-checkbox label="Option B"></el-checkbox>
|
||||
<el-checkbox label="Option C"></el-checkbox>
|
||||
<el-checkbox label="disabled" disabled></el-checkbox>
|
||||
<el-checkbox label="selected and disabled" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkList: ['selected and disabled','Option A']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Indeterminate
|
||||
|
||||
The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Minimum / Maximum items checked
|
||||
|
||||
The `min` and `max` properties can help you to limit the number of checked items.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities1"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkedCities1: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Button style
|
||||
|
||||
Checkbox with button styles.
|
||||
|
||||
:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkboxGroup1: ['Shanghai'],
|
||||
checkboxGroup2: ['Shanghai'],
|
||||
checkboxGroup3: ['Shanghai'],
|
||||
checkboxGroup4: ['Shanghai'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With borders
|
||||
|
||||
:::demo The `border` attribute adds a border to Checkboxes.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup5" size="small">
|
||||
<el-checkbox label="Option1" border></el-checkbox>
|
||||
<el-checkbox label="Option2" border disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
|
||||
<el-checkbox label="Option1" border></el-checkbox>
|
||||
<el-checkbox label="Option2" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| 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 | — | — |
|
||||
| disabled | whether the Checkbox is disabled | boolean | — | false |
|
||||
| border | whether to add a border around Checkbox | boolean | — | false |
|
||||
| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| checked | if the Checkbox is checked | boolean | — | false |
|
||||
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
|
||||
|
||||
### Checkbox Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | the updated value |
|
||||
|
||||
### Checkbox-group Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
|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 | — | — |
|
||||
| max | maximum number of checkbox checked | number | — | — |
|
||||
|text-color | font color when button is active | string | — | #ffffff |
|
||||
|fill | border and background color when button is active | string | — | #409EFF |
|
||||
|
||||
### Checkbox-group Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | the updated value |
|
||||
|
||||
### Checkbox-button Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| 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 | — | — |
|
||||
| disabled | whether the checkbox is disabled | boolean | — | false |
|
||||
| name | native 'name' attribute | string | — | — |
|
||||
| checked | if the checkbox is checked | boolean | — | false |
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
You can expand multiple panels
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Accordion
|
||||
|
||||
In accordion mode, only one panel can be expanded at once
|
||||
|
||||
:::demo Activate accordion mode using the `accordion` attribute.
|
||||
```html
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom title
|
||||
|
||||
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item name="1">
|
||||
<template slot="title">
|
||||
Consistency<i class="header-icon el-icon-information"></i>
|
||||
</template>
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
```
|
||||
:::
|
||||
|
||||
### Collapse Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| 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) |
|
||||
|
||||
### Collapse Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | unique identification of the panel | string/number | — | — |
|
||||
| title | title of the panel | string | — | — |
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#409EFF'
|
||||
};
|
||||
},
|
||||
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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo ColorPicker requires a string typed variable to be bound to v-model.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">With default value</span>
|
||||
<el-color-picker v-model="color1"></el-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With no default value</span>
|
||||
<el-color-picker v-model="color2"></el-color-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alpha
|
||||
|
||||
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
|
||||
```html
|
||||
<el-color-picker v-model="color3" show-alpha></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color3: 'rgba(19, 206, 102, 0.8)'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-color-picker v-model="color4"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="medium"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="small"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="mini"></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color4: '#409EFF'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| 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 |
|
||||
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
|
||||
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when input value changes | color value |
|
||||
| active-change | triggers when the current active color changes | active color value |
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<style>
|
||||
.demo-color-box {
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
height: 74px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
& .value {
|
||||
font-size: 12px;
|
||||
opacity: 0.69;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.demo-color-box-group {
|
||||
.demo-color-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
.demo-color-box:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.demo-color-box:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: #409EFF;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: #13CE66;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #f7ba2a;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #ff4949;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #878D99;
|
||||
}
|
||||
|
||||
.bg-text-primary {
|
||||
background-color: #2d2f33;
|
||||
}
|
||||
.bg-text-regular {
|
||||
background-color: #5a5e66;
|
||||
}
|
||||
.bg-text-secondary {
|
||||
background-color: #878d99;
|
||||
}
|
||||
.bg-text-placeholder {
|
||||
background-color: #b4bccc;
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce5;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
}
|
||||
.bg-border-lighter {
|
||||
background-color: #e6ebf5;
|
||||
}
|
||||
.bg-border-extra-light {
|
||||
background-color: #edf2fc;
|
||||
}
|
||||
|
||||
[class*=" bg-border-"] {
|
||||
color: #5a5e66;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Color
|
||||
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
|
||||
|
||||
### Main Color
|
||||
|
||||
The main color of Element is bright and friendly blue.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Secondary Color
|
||||
|
||||
Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Neutral Color
|
||||
|
||||
Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
|
||||
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
|
||||
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
|
||||
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
|
||||
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
|
||||
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
|
||||
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<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:
|
||||
|
||||
`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
|
||||
|
||||
`<el-header>`: container for headers.
|
||||
|
||||
`<el-aside>`: container for side sections (usually a side nav).
|
||||
|
||||
`<el-main>`: container for main sections.
|
||||
|
||||
`<el-footer>`: container for footers.
|
||||
|
||||
:::tip
|
||||
These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
|
||||
:::
|
||||
|
||||
### Common layouts
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Example
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-container style="height: 500px; border: 1px solid #eee">
|
||||
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="1-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="1-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="1-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">Option4</template>
|
||||
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="2-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="2-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="2-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">Option 4</template>
|
||||
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="3-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="3-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="3-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="3-4">
|
||||
<template slot="title">Option 4</template>
|
||||
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: right; font-size: 12px">
|
||||
<el-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>View</el-dropdown-item>
|
||||
<el-dropdown-item>Add</el-dropdown-item>
|
||||
<el-dropdown-item>Delete</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span>Tom</span>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="date" label="Date" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="Name" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
</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 Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
|
||||
|
||||
### Header Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | height of the header | string | — | 60px |
|
||||
|
||||
### Aside Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| width | width of the side section | string | — | 300px |
|
||||
|
||||
### Footer Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| height | height of the footer | string | — | 60px |
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
## Custom theme
|
||||
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
|
||||
|
||||
### Changing theme color
|
||||
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
|
||||
|
||||
The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
|
||||
|
||||
### Update SCSS variables in your project
|
||||
`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
|
||||
|
||||
```html
|
||||
/* theme color */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "../node_modules/element-ui/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
Then in the entry file of your project, import this style file instead of Element's built CSS:
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import './element-variables.scss'
|
||||
|
||||
Vue.use(Element)
|
||||
```
|
||||
|
||||
:::tip
|
||||
Note that it is required to override icon font path to the relative path of Element's font files.
|
||||
:::
|
||||
|
||||
### CLI theme tool
|
||||
If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
|
||||
|
||||
#### <strong>Install</strong>
|
||||
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
Then install the chalk theme from npm or GitHub.
|
||||
```shell
|
||||
# from npm
|
||||
npm i element-theme-chalk -D
|
||||
|
||||
# from GitHub
|
||||
npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>Initialize variable file</strong>
|
||||
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
|
||||
|
||||
```shell
|
||||
et -i [custom output file]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
#### <strong>Modify variables</strong>
|
||||
Just edit `element-variables.scss`, e.g. changing the theme color to red:
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>Build theme</strong>
|
||||
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
#### <strong>Import custom theme</strong>
|
||||
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
|
||||
|
||||
```javascript
|
||||
import '../theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
#### <strong>Import component theme on demand</strong>
|
||||
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
|
||||
```json
|
||||
{
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
|
||||
|
|
@ -0,0 +1,420 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-date-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DatePicker
|
||||
|
||||
Use Date Picker for date input.
|
||||
|
||||
### Enter Date
|
||||
|
||||
Basic date picker measured by 'day'.
|
||||
|
||||
:::demo The measurement is determined by the `type` attribute. You can enable quick options by creating a `picker-options` object with `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="Pick a day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Picker with quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="date"
|
||||
placeholder="Pick a day"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Other measurements
|
||||
|
||||
You can choose week, month or year by extending the standard date picker component.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Week</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="week"
|
||||
format="Week WW"
|
||||
placeholder="Pick a week">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Month</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="month"
|
||||
placeholder="Pick a month">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Year</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
type="year"
|
||||
placeholder="Pick a year">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Date Range
|
||||
|
||||
Picking a date range is supported.
|
||||
|
||||
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
:picker-options="pickerOptions2">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value6: '',
|
||||
value7: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Default Value
|
||||
|
||||
If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
|
||||
|
||||
If type is `daterange`, `default-value` sets the left side calendar.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">date</span>
|
||||
<el-date-picker
|
||||
v-model="value8"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
default-value="2010-10-01">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">daterange</span>
|
||||
<el-date-picker
|
||||
v-model="value9"
|
||||
type="daterange"
|
||||
start-placeholder="Start Date"
|
||||
end-placeholder="End Date"
|
||||
default-value="2010-10-01">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value8: '',
|
||||
value9: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Formatted Value
|
||||
|
||||
By default, DatePicker emits `Date` object. You can use `value-format` to designate the format of emitted value, it accepts the same format string of `format` attribute.
|
||||
|
||||
:::warning
|
||||
This feature is at alpha stage. Feedback welcome.
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits Date object</span>
|
||||
<div class="demonstration">Value: {{ value10 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value10"
|
||||
type="date"
|
||||
placeholder="Pick a Date"
|
||||
format="yyyy/MM/dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits formatted date</span>
|
||||
<div class="demonstration">Value: {{ value11 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value11"
|
||||
type="date"
|
||||
placeholder="Pick a Date"
|
||||
format="yyyy/MM/dd"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value10: '',
|
||||
value11: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | — | '-' |
|
||||
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
|
||||
|
||||
### Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's binding value |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | — |
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: new Date(),
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: '',
|
||||
value13: '',
|
||||
value14: '',
|
||||
value15: '',
|
||||
value16: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-datetime-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-datetime-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-datetime-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DateTimePicker
|
||||
|
||||
Select date and time in one picker.
|
||||
|
||||
:::tip
|
||||
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
|
||||
:::
|
||||
|
||||
### Date and time
|
||||
|
||||
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="Select date and time">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Date and time range
|
||||
|
||||
:::demo You can select date and time range by setting `type` to `datetimerange`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | Whether to show clear button | boolean | — | true |
|
||||
|size | size of Input | string | large/small/mini | — |
|
||||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start date in range mode | string | — | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
|
||||
| align | alignment | left/center/right | left |
|
||||
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
|
||||
|
||||
### Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
|
||||
### shortcuts
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | title of the shortcut | string | — | — |
|
||||
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's binding value |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | — |
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Dialog pops up a dialog box, and it's quite customizable.
|
||||
|
||||
:::demo Set the `visible` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. Finally, this example demonstrates how `before-close` is used.
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="Tips"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('Are you sure to close this dialog?')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler.
|
||||
:::
|
||||
|
||||
### Customizations
|
||||
|
||||
The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="Address"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="Promotion name" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Zones" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="Please select a zone">
|
||||
<el-option label="Zone No.1" value="shanghai"></el-option>
|
||||
<el-option label="Zone No.2" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested Dialog
|
||||
If a Dialog is nested in another Dialog, `append-to-body` is required.
|
||||
:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
|
||||
|
||||
<el-dialog title="Outter Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog
|
||||
width="30%"
|
||||
title="Inner Dialog"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
outerVisible: false,
|
||||
innerVisible: false
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
|
||||
### Centered content
|
||||
Dialog's content can be centered.
|
||||
|
||||
:::demo Setting `center` to `true` will center dialog's header and footer horizontally.
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="Warning"
|
||||
:visible.sync="centerDialogVisible"
|
||||
width="30%"
|
||||
center>
|
||||
<span>It should be noted that the content will not be aligned in center by default</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
centerDialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
`center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
|
||||
:::
|
||||
|
||||
:::tip
|
||||
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| visible | visibility of Dialog, supports the .sync modifier | boolean | — | false |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
| modal-append-to-body | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean | — | true |
|
||||
| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true |
|
||||
| custom-class | custom class names for Dialog | string | — | — |
|
||||
| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true |
|
||||
| show-close | whether to show a close button | boolean | — | true |
|
||||
| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
|
||||
| center | whether to align the header and footer in center | boolean | — | false |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | content of Dialog |
|
||||
| title | content of the Dialog title |
|
||||
| footer | content of the Dialog footer |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| open | triggers when the Dialog opens | — |
|
||||
| close | triggers when the Dialog closes | — |
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
Hover on the dropdown menu to unfold it for more actions.
|
||||
|
||||
:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it.
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Triggering element
|
||||
|
||||
Use the button to trigger the dropdown list.
|
||||
|
||||
:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four.
|
||||
```html
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown split-button type="primary" @click="handleClick">
|
||||
Dropdown List
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
}
|
||||
.el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### How to trigger
|
||||
|
||||
Click the triggering element or hover on it.
|
||||
|
||||
:::demo Use the attribute `trigger`. By default, it is `hover`.
|
||||
|
||||
```html
|
||||
<el-row class="block-col-2">
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">hover to trigger</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">click to trigger</span>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Menu hiding behavior
|
||||
|
||||
Use `hide-on-click` to define if menu closes on clicking.
|
||||
|
||||
:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
|
||||
```html
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Command event
|
||||
|
||||
Clicking each dropdown item fires an event whose parameter is assigned by each item.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="a">Action 1</el-dropdown-item>
|
||||
<el-dropdown-item command="b">Action 2</el-dropdown-item>
|
||||
<el-dropdown-item command="c">Action 3</el-dropdown-item>
|
||||
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
|
||||
|
||||
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|
||||
```html
|
||||
<el-dropdown split-button type="primary">
|
||||
Default
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="medium" split-button type="primary">
|
||||
Medium
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="small" split-button type="primary">
|
||||
Small
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="mini" split-button type="primary">
|
||||
Mini
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Dropdown Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| size | menu size, also works on the split button | string | medium / small / mini | — |
|
||||
| split-button | whether a button group is displayed | boolean | — | false |
|
||||
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | how to trigger | string | hover/click | hover |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
|
||||
| show-timeout | Delay time before show a dropdown | number | — | 250 |
|
||||
| hide-timeout | Delay time before hide a dropdown | number | — | 150 |
|
||||
|
||||
### Dropdown Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| click | if `split-button` is `true`, triggers when left button is clicked | — |
|
||||
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
|
||||
### Dropdown Menu Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
|
||||
| disabled | whether the item is disabled | boolean | — | false |
|
||||
| divided | whether a divider is displayed | boolean | — | false |
|
||||
|
|
@ -0,0 +1,877 @@
|
|||
<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 {
|
||||
.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.
|
||||
|
||||
### Basic form
|
||||
|
||||
It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`.
|
||||
|
||||
:::demo In each `form` component, you need a `form-item` field to be the container of your input item.
|
||||
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
|
||||
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
|
||||
|
||||
To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.
|
||||
:::
|
||||
|
||||
### Inline form
|
||||
|
||||
When the vertical space is limited and the form is relatively simple, you can put it in one line.
|
||||
|
||||
:::demo Set the `inline` attribute to `true` and the form will be inline.
|
||||
|
||||
```html
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="Approved by">
|
||||
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="formInline.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alignment
|
||||
|
||||
Depending on your design, there are several different ways to align your label element.
|
||||
|
||||
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="labelPosition" size="small">
|
||||
<el-radio-button label="left">Left</el-radio-button>
|
||||
<el-radio-button label="right">Right</el-radio-button>
|
||||
<el-radio-button label="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 20px;"></div>
|
||||
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-input v-model="formLabelAlign.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Validation
|
||||
|
||||
Form component allows you to verify your data, helping you find and correct errors.
|
||||
|
||||
:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="Sponsorship"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: 'Please select activity resource', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom validation rules
|
||||
|
||||
This example shows how to customize your own validation rules to finish a two-factor password verification.
|
||||
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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 {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
checkPass: [
|
||||
{ validator: validatePass2, trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ validator: checkAge, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Delete or add form items dynamically
|
||||
|
||||
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
|
||||
|
||||
```html
|
||||
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
|
||||
<el-form-item
|
||||
prop="email"
|
||||
label="Email"
|
||||
:rules="[
|
||||
{ required: true, message: 'Please input email address', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in dynamicValidateForm.domains"
|
||||
:label="'Domain' + index"
|
||||
:key="domain.key"
|
||||
:prop="'domains.' + index + '.value'"
|
||||
:rules="{
|
||||
required: true, message: 'domain can not be null', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
|
||||
<el-button @click="addDomain">New domain</el-button>
|
||||
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicValidateForm: {
|
||||
domains: [{
|
||||
key: 1,
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Number Validate
|
||||
|
||||
::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
|
||||
```html
|
||||
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
label="age"
|
||||
prop="age"
|
||||
:rules="[
|
||||
{ required: true, message: 'age is required'},
|
||||
{ type: 'number', message: 'age must be a number'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
numberValidateForm: {
|
||||
age: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
|
||||
:::
|
||||
|
||||
### Size control
|
||||
|
||||
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
|
||||
|
||||
::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
|
||||
```html
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="sizeForm.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="Sponsor"></el-radio>
|
||||
<el-radio border label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| model| data of form component | object | — | — |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| inline | whether the form is inline | boolean | — | false |
|
||||
| label-position | position of label | string | left / right / top | right |
|
||||
| label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
|
||||
| label-suffix | suffix of the label | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | whether to display the error message inline with the form item | boolean | — | false |
|
||||
| status-icon | whether to display an icon indicating the validation result | boolean | — | false |
|
||||
| size | control the size of components in this form | string | medium / small / mini | - |
|
||||
|
||||
### Form Methods
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
|
||||
| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | reset all the fields and remove validation result | — |
|
||||
| clearValidate | clear validation message for all fields | -
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
|
||||
| label | label | string | — | — |
|
||||
| label-width | width of label, e.g. '50px' | string | — | — |
|
||||
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | inline style validate message | boolean | — | false |
|
||||
| size | control the size of components in this form-item | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | content of Form Item |
|
||||
| label | content of label |
|
||||
|
||||
### Form-Item Methods
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| resetField | reset current field and remove validation result | — |
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
## Internationalization
|
||||
|
||||
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
Or if you are importing Element on demand:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// configure language
|
||||
locale.use(lang)
|
||||
|
||||
// import components
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Compatible with `vue-i18n@5.x`
|
||||
|
||||
Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(Element)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## Compatible with other i18n plugins
|
||||
Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Compatible with `vue-i18n@6.x`
|
||||
|
||||
You need to manually handle it for compatibility with `6.x`.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
```
|
||||
|
||||
## Custom i18n in on-demand components
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import ElementLocale from 'element-ui/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
```
|
||||
|
||||
## Import via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
ELEMENT.locale(ELEMENT.lang.en)
|
||||
</script>
|
||||
```
|
||||
|
||||
Compatible with `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
</script>
|
||||
```
|
||||
|
||||
Currently Element ships with the following languages:
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-CN)</li>
|
||||
<li>English (en)</li>
|
||||
<li>German (de)</li>
|
||||
<li>Portuguese (pt)</li>
|
||||
<li>Spanish (es)</li>
|
||||
<li>Danish (da)</li>
|
||||
<li>French (fr)</li>
|
||||
<li>Norwegian (nb-NO)</li>
|
||||
<li>Traditional Chinese (zh-TW)</li>
|
||||
<li>Italian (it)</li>
|
||||
<li>Korean (ko)</li>
|
||||
<li>Japanese (ja)</li>
|
||||
<li>Dutch (nl)</li>
|
||||
<li>Vietnamese (vi)</li>
|
||||
<li>Russian (ru-RU)</li>
|
||||
<li>Turkish (tr-TR)</li>
|
||||
<li>Brazilian Portuguese (pt-br)</li>
|
||||
<li>Farsi (fa)</li>
|
||||
<li>Thai (th)</li>
|
||||
<li>Indonesian (id)</li>
|
||||
<li>Bulgarian (bg)</li>
|
||||
<li>Polish (pl)</li>
|
||||
<li>Finnish (fi)</li>
|
||||
<li>Swedish (sv-SE)</li>
|
||||
<li>Greek (el)</li>
|
||||
<li>Slovak (sk)</li>
|
||||
<li>Catalunya (ca)</li>
|
||||
<li>Czech (cz)</li>
|
||||
<li>Ukrainian (ua)</li>
|
||||
<li>Turkmen (tk)</li>
|
||||
<li>Tamil (ta)</li>
|
||||
<li>Latvian (lv)</li>
|
||||
<li>Afrikaans (af-ZA)</li>
|
||||
<li>Estonian (ee)</li>
|
||||
<li>Slovenian (sl)</li>
|
||||
<li>Arabic (ar)</li>
|
||||
<li>Hebrew (he)</li>
|
||||
</ul>
|
||||
|
||||
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script>
|
||||
var iconList = require('examples/icon.json');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: iconList
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
color: #8492a6;
|
||||
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;
|
||||
transition: color .15s linear;
|
||||
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
@utils-vertical-center;
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
color: #99a9bf;
|
||||
}
|
||||
& i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
color: #8492a6;
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(92, 182, 255);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon
|
||||
|
||||
Element provides a set of common icons.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Just assign the class name to `el-icon-iconName`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Icons
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons" :key="name">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1,
|
||||
num3: 5,
|
||||
num4: 1,
|
||||
num5: 1,
|
||||
num6: 1,
|
||||
num7: 1,
|
||||
num8: 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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num2" :disabled="true"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num2: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps
|
||||
|
||||
Allows you to define incremental steps.
|
||||
|
||||
:::demo Add `step` attribute to set the step.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num3" :step="2"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num3: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Size
|
||||
|
||||
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num4"></el-input-number>
|
||||
<el-input-number size="medium" v-model="num5"></el-input-number>
|
||||
<el-input-number size="small" v-model="num6"></el-input-number>
|
||||
<el-input-number size="mini" v-model="num7"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num4: 1,
|
||||
num5: 1,
|
||||
num6: 1,
|
||||
num7: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Controls Position
|
||||
|
||||
:::demo Set `controls-position` to decide the position of control buttons.
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num8: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----| ----| ---| ----| -----|
|
||||
|value | binding value| number | — | — |
|
||||
|min | the minimum allowed value | number | — | 0 |
|
||||
|max | the maximum allowed value | number | — | `Infinity` |
|
||||
|step | incremental step | number | — | 1 |
|
||||
|size | size of the component | string | large/small| — |
|
||||
|disabled| whether the component is disabled | boolean | — | false |
|
||||
|controls| whether to enable the control buttons | boolean | — | true |
|
||||
|debounce| debounce delay when typing, in milliseconds | number | — | 300 |
|
||||
|controls-position | position of the control buttons | string | right | - |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
|label | label text | string | — | — |
|
||||
### Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ---- | -----|
|
||||
|change | triggers when the value changes | value after change |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
|
|
@ -0,0 +1,696 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
input: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: '',
|
||||
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: 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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input" v-model="input"></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
::: demo Disable the Input with the `disabled` attribute.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input1"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input with icon
|
||||
|
||||
Add an icon to indicate input type.
|
||||
|
||||
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
|
||||
```html
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using attributes</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using slots</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
v-model="input22">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
v-model="input23">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.demo-input-label {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Textarea
|
||||
|
||||
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
|
||||
|
||||
::: demo Control the height by setting the `rows` prop.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="Please input"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Autosize Textarea
|
||||
|
||||
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="Please input"
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Please input"
|
||||
v-model="textarea3">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Mixed input
|
||||
|
||||
Prepend or append an element, generally a label or a button.
|
||||
|
||||
::: demo Use `slot` to distribute elements that prepend or append to Input.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
<el-option label="Tel" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 110px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="Please Input"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Please Input"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Please Input"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Please Input"
|
||||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Autocomplete
|
||||
|
||||
You can get some recommended tips based on the current input.
|
||||
|
||||
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
||||
```html
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">list suggestions when activated</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please Input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">list suggestions on input</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please Input"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state1: '',
|
||||
state2: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return suggestions
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom template
|
||||
|
||||
Customize how suggestions are displayed.
|
||||
|
||||
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
|
||||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect">
|
||||
<i
|
||||
class="el-icon-edit el-input__icon"
|
||||
slot="suffix"
|
||||
@click="handleIconClick">
|
||||
</i>
|
||||
<template slot-scope="props">
|
||||
<div class="value">{{ props.item.value }}</div>
|
||||
<span class="link">{{ props.item.link }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
<style>
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? link.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return suggestion objects
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Remote search
|
||||
|
||||
Search data from server-side.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----| ----| ----| ---- | ----- |
|
||||
|type| type of input | string | text / textarea | text |
|
||||
|value| binding value | string / number| — | — |
|
||||
|maxlength| maximum Input text length| number| — | — |
|
||||
|minlength| minimum Input text length| number | — | — |
|
||||
|placeholder| placeholder of Input| string | — | — |
|
||||
|disabled | whether Input is disabled | boolean | — | false |
|
||||
|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
|
||||
| prefix-icon | prefix icon class | string | — | — |
|
||||
| suffix-icon | suffix icon class | string | — | — |
|
||||
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
|
||||
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
| readonly | same as `readonly` in native input | boolean | — | false |
|
||||
|max | same as `max` in native input | — | — | — |
|
||||
|min | same as `min` in native input | — | — | — |
|
||||
|step| same as `step` in native input | — | — | — |
|
||||
|resize| control the resizability | string | none, both, horizontal, vertical | — |
|
||||
|autofocus | same as `autofocus` in native input | boolean | — | false |
|
||||
|form | same as `form` in native input | string | — | — |
|
||||
| label | label text | string | — | — |
|
||||
|
||||
### Input slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | content as Input prefix |
|
||||
| suffix | content as Input suffix |
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
|
||||
### Input Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
|
||||
### Autocomplete Attributes
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
|----| ----| ----| ---- | -----|
|
||||
|placeholder| the placeholder of Autocomplete| string | — | — |
|
||||
|disabled | whether Autocomplete is disabled | boolean | — | false|
|
||||
| valueKey | key name of the input suggestion object for display | string | — | value |
|
||||
|icon | icon name | string | — | — |
|
||||
|value | binding value | string | — | — |
|
||||
| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
|
||||
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
||||
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
|
||||
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
|
||||
| label | label text | string | — | — |
|
||||
|
||||
### Autocomplete slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | content as Input prefix |
|
||||
| suffix | content as Input suffix |
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
|
||||
### Autocomplete Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|select | triggers when a suggestion is clicked | suggestion being clicked |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | — |
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
## Installation
|
||||
|
||||
### npm
|
||||
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
|
||||
|
||||
```html
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<style>
|
||||
.demo-layout {
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout
|
||||
|
||||
Quickly and easily create layouts with the basic 24-column.
|
||||
|
||||
### Basic layout
|
||||
|
||||
Create basic grid layout using columns.
|
||||
|
||||
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Column spacing
|
||||
|
||||
Column spacing is supported.
|
||||
|
||||
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Hybrid layout
|
||||
|
||||
Form a more complex hybrid layout by combining the basic 1/24 columns.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Column offset
|
||||
|
||||
You can specify column offsets.
|
||||
|
||||
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
|
||||
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alignment
|
||||
|
||||
Use the flex layout to make flexible alignment of columns.
|
||||
|
||||
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Responsive Layout
|
||||
|
||||
Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Utility classes for hiding elements
|
||||
|
||||
Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
|
||||
|
||||
```js
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
```
|
||||
|
||||
The classes are:
|
||||
- `hidden-xs-only` - hide when on extra small viewports only
|
||||
- `hidden-sm-only` - hide when on small viewports and down
|
||||
- `hidden-sm-and-down` - hide when on small viewports and down
|
||||
- `hidden-sm-and-up` - hide when on small viewports and up
|
||||
- `hidden-md-only` - hide when on medium viewports only
|
||||
- `hidden-md-and-down` - hide when on medium viewports and down
|
||||
- `hidden-md-and-up` - hide when on medium viewports and up
|
||||
- `hidden-lg-only` - hide when on large viewports only
|
||||
- `hidden-lg-and-down` - hide when on large viewports and down
|
||||
- `hidden-lg-and-up` - hide when on large viewports and up
|
||||
- `hidden-xl-only` - hide when on extra large viewports only
|
||||
|
||||
### Row Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| gutter | grid spacing | number | — | 0 |
|
||||
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
|
||||
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
|
||||
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
|
||||
| tag | custom element tag | string | * | div |
|
||||
|
||||
### Col Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| span | number of column the grid spans | number | — | 24 |
|
||||
| offset | number of spacing on the left side of the grid | number | — | 0 |
|
||||
| push | number of columns that grid moves to the right | number | — | 0 |
|
||||
| pull | number of columns that grid moves to the left | number | — | 0 |
|
||||
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| tag | custom element tag | string | * | div |
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<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.
|
||||
|
||||
### Loading inside a container
|
||||
|
||||
Displays animation in a container (such as a table) while loading data.
|
||||
|
||||
:::demo Element provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</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
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization
|
||||
|
||||
You can customize loading text, loading spinner and background color.
|
||||
|
||||
:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Date"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Name"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Full screen loading
|
||||
|
||||
Show a full screen animation while loading data.
|
||||
|
||||
:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
As a directive
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
As a service
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Service
|
||||
You can also invoke Loading with a service. Import Loading service:
|
||||
```javascript
|
||||
import { Loading } from 'element-ui';
|
||||
```
|
||||
Invoke it:
|
||||
```javascript
|
||||
Loading.service(options);
|
||||
```
|
||||
The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
|
||||
```javascript
|
||||
let loadingInstance = Loading.service(options);
|
||||
loadingInstance.close();
|
||||
```
|
||||
Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
|
||||
```javascript
|
||||
let loadingInstance1 = Loading.service({ fullscreen: true });
|
||||
let loadingInstance2 = Loading.service({ fullscreen: true });
|
||||
console.log(loadingInstance1 === loadingInstance2); // true
|
||||
```
|
||||
Calling the `close` method on any one of them can close this full screen Loading.
|
||||
|
||||
If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
|
||||
|
||||
### Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body |
|
||||
| body | same as the `body` modifier of `v-loading` | boolean | — | false |
|
||||
| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
|
||||
| lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
|
||||
| text | loading text that displays under the spinner | string | — | — |
|
||||
| spinner | class name of the custom spinner | string | — | — |
|
||||
| background | background color of the mask | string | — | — |
|
||||
| customClass | custom class name for Loading | string | — | — |
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<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.
|
||||
|
||||
### Top bar
|
||||
|
||||
Top bar NavMenu can be used in a variety of scenarios.
|
||||
|
||||
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
|
||||
```html
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
:default-active="activeIndex2"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Side bar
|
||||
|
||||
Vertical NavMenu with sub-menus.
|
||||
|
||||
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="12">
|
||||
<h5>Default colors</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item one</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">item four</template>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h5>Custom colors</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item one</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">item four</template>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Collapse
|
||||
|
||||
Vertical NavMenu could be collapsed.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
|
||||
<el-radio-button :label="false">expand</el-radio-button>
|
||||
<el-radio-button :label="true">collapse</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span slot="title">Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<span slot="title">Group One</span>
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item two</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<span slot="title">item four</span>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Menu Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| mode | menu display mode | string | horizontal / vertical | vertical |
|
||||
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
|
||||
| background-color | background color of Menu (hex format) | string | — | #ffffff |
|
||||
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
|
||||
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF |
|
||||
| default-active | index of currently active menu | string | — | — |
|
||||
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
|
||||
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
|
||||
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover |
|
||||
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false |
|
||||
|
||||
### Menu Methods
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| open | open a specific sub-menu | index: index of the sub-menu to open |
|
||||
| close | close a specific sub-menu | index: index of the sub-menu to close |
|
||||
|
||||
### Menu Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu |
|
||||
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
|
||||
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
|
||||
|
||||
### Menu-Item Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| click | callback function when menu-item is clicked | el: menu-item instance |
|
||||
|
||||
### SubMenu Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | unique identification | string | — | — |
|
||||
|
||||
### Menu-Item Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | unique identification | string | — | — |
|
||||
| route | Vue Router object | object | — | — |
|
||||
|
||||
### Menu-Group Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | group title | string | — | — |
|
||||
|
|
@ -0,0 +1,402 @@
|
|||
<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('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.
|
||||
:::tip
|
||||
By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog.
|
||||
:::
|
||||
|
||||
### Alert
|
||||
|
||||
Alert interrupts user operation until the user confirms.
|
||||
|
||||
:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('This is a message', 'Title', {
|
||||
confirmButtonText: 'OK',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Confirm
|
||||
|
||||
Confirm is used to ask users' confirmation.
|
||||
|
||||
:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Delete completed'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Prompt
|
||||
|
||||
Prompt is used when user input is required.
|
||||
|
||||
:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$prompt('Please input your e-mail', 'Tip', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: 'Invalid Email'
|
||||
}).then(value => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Your email is:' + value
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization
|
||||
|
||||
Can be customized to show various content.
|
||||
|
||||
:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
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 => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Use HTML String
|
||||
`message` supports HTML string.
|
||||
|
||||
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
|
||||
:::
|
||||
|
||||
### Centered content
|
||||
Content of MessageBox can be centered.
|
||||
|
||||
:::demo Setting `center` to `true` will center the content
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
|
||||
- `$msgbox(options)`
|
||||
- `$alert(message, title, options)` or `$alert(message, options)`
|
||||
- `$confirm(message, title, options)` or `$confirm(message, options)`
|
||||
- `$prompt(message, title, options)` or `$prompt(message, options)`
|
||||
|
||||
### Local import
|
||||
|
||||
If you prefer importing `MessageBox` on demand:
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
```
|
||||
|
||||
The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title of the MessageBox | string | — | — |
|
||||
| message | content of the MessageBox | string | — | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
|
||||
| type | message type, used for icon display | string | success / info / warning / error | — |
|
||||
| customClass | custom class name for MessageBox | string | — | — |
|
||||
| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
|
||||
| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
|
||||
| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
|
||||
| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
|
||||
| showConfirmButton | whether to show a confirm button | boolean | — | true |
|
||||
| cancelButtonText | text content of cancel button | string | — | Cancel |
|
||||
| confirmButtonText | text content of confirm button | string | — | OK |
|
||||
| cancelButtonClass | custom class name of cancel button | string | — | — |
|
||||
| confirmButtonClass | custom class name of confirm button | string | — | — |
|
||||
| closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
|
||||
| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
|
||||
| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |
|
||||
| showInput | whether to show an input | boolean | — | false (true when called with prompt) |
|
||||
| inputPlaceholder | placeholder of input | string | — | — |
|
||||
| inputType | type of input | string | — | text |
|
||||
| inputValue | initial value of input | string | — | — |
|
||||
| inputPattern | regexp for the input | regexp | — | — |
|
||||
| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
|
||||
| inputErrorMessage | error message when validation fails | string | — | Illegal input |
|
||||
| center | whether to align the content in center | boolean | — | false |
|
||||
| roundButton | whether to use round button | boolean | — | false |
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Displays at the top, and disappears after 3 seconds.
|
||||
|
||||
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open">Show message</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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')
|
||||
])
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Types
|
||||
|
||||
Used to show the feedback of Success, Warning, Message and Error activities.
|
||||
|
||||
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</el-button>
|
||||
<el-button :plain="true" @click="open3">warning</el-button>
|
||||
<el-button :plain="true" @click="open">message</el-button>
|
||||
<el-button :plain="true" @click="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('Oops, this is a error message.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Closable
|
||||
|
||||
A close button can be added.
|
||||
|
||||
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Centered text
|
||||
Use the `center` attribute to center the text.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openCenter">Centered text</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: 'Centered text',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Use HTML string
|
||||
`message` supports HTML string.
|
||||
|
||||
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openHTML">Use HTML String</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
|
||||
|
||||
### Local import
|
||||
|
||||
Import `Message`:
|
||||
|
||||
```javascript
|
||||
import { Message } from 'element-ui';
|
||||
```
|
||||
|
||||
In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
|
||||
You can call `Message.closeAll()` to manually close all the instances.
|
||||
|
||||
### Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| message | message text | string / VNode | — | — |
|
||||
| type | message type | string | success/warning/info/error | info |
|
||||
| iconClass | custom icon's class, overrides `type` | string | — | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
|
||||
| customClass | custom class name for Message | string | — | — |
|
||||
| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
|
||||
| showClose | whether to show a close button | boolean | — | false |
|
||||
| center | whether to center the text | boolean | — | false |
|
||||
| onClose | callback function when closed with the message instance as the parameter | function | — | — |
|
||||
|
||||
### Methods
|
||||
`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
|
||||
| Method | Description |
|
||||
| ---- | ---- |
|
||||
| close | close the Message |
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open2">
|
||||
Won't close automatically
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With types
|
||||
|
||||
We provide four types: success, warning, info and error.
|
||||
|
||||
::: demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom position
|
||||
|
||||
Notification can emerge from any corner you like.
|
||||
|
||||
::: demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
Top Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
Bottom Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
Bottom Left
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
Top Left
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
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'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With offset
|
||||
|
||||
Customize Notification's offset from the edge of the screen.
|
||||
|
||||
::: demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
Notification with offset
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
offset: 100
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Use HTML string
|
||||
`message` supports HTML string.
|
||||
|
||||
::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
Use HTML String
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
|
||||
:::
|
||||
|
||||
### Hide close button
|
||||
|
||||
It is possible to hide the close button
|
||||
|
||||
::: demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
Hide close button
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'This is a message without close button',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Global method
|
||||
|
||||
Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
|
||||
|
||||
### Local import
|
||||
|
||||
Import `Notification`:
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
```
|
||||
|
||||
In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`.
|
||||
|
||||
### Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| message | description text | string/Vue.VNode | — | — |
|
||||
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
|
||||
| type | notification type | string | success/warning/info/error | — |
|
||||
| iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
|
||||
| customClass | custom class name for Notification | string | — | — |
|
||||
| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
|
||||
| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
|
||||
| showClose | whether to show a close button | boolean | — | true |
|
||||
| onClose | callback function when closed | function | — | — |
|
||||
| onClick | callback function when notification clicked | function | — | — |
|
||||
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
|
||||
|
||||
### Methods
|
||||
`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
|
||||
| Method | Description |
|
||||
| ---- | ---- |
|
||||
| close | close the Notification |
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<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 {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin: 5px 20px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Pagination
|
||||
|
||||
If you have too much data to display in one page, use pagination.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have few pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have more than 7 pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Small Pagination
|
||||
|
||||
Use small pagination in the case of limited space.
|
||||
|
||||
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### More elements
|
||||
|
||||
Add more modules based on your scenario.
|
||||
|
||||
:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Total item count</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage1"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Change page size</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage2"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Jump to</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage3"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">All combined</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage4"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`${val} items per page`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 5,
|
||||
currentPage2: 5,
|
||||
currentPage3: 5,
|
||||
currentPage4: 4
|
||||
};
|
||||
}
|
||||
}
|
||||
</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 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| small | whether to use small pagination | boolean | — | false |
|
||||
| page-size | item count of each page | number | — | 10 |
|
||||
| total | total item count | number | — | — |
|
||||
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
|
||||
| current-page | current page number, supports the .sync modifier | number | — | 1 |
|
||||
| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
|
||||
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
|
||||
| prev-text | text for the prev button | string | — | — |
|
||||
| next-text | text for the next button | string | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| size-change | triggers when `page-size` changes | the new `page-size` |
|
||||
| current-change | triggers when `current-page` changes | the new `current-page` |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| — | custom content. To use this, you need to declare `slot` in `layout` |
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
gridData2: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$positive: true
|
||||
}],
|
||||
gridData3: [{
|
||||
tag: 'Home',
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-08',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-06',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-07',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: [],
|
||||
model: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popover
|
||||
|
||||
### Basic usage
|
||||
|
||||
Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
|
||||
|
||||
:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>Hover to activate</el-button>
|
||||
<el-button v-popover:popover2>Click to activate</el-button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Focus to activate</el-button>
|
||||
</el-popover>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested information
|
||||
|
||||
Other components can be nested in popover. Following is an example of nested table.
|
||||
|
||||
:::demo replace the `content` attribute with a default `slot`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="date"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="name"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="address"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested operation
|
||||
|
||||
Of course, you can nest other operations. It's more light-weight than using a dialog.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | how the popover is triggered | string | click/focus/hover/manual | click |
|
||||
| title | popover title | string | — | — |
|
||||
| content | popover content, can be replaced with a default `slot` | string | — | — |
|
||||
| width | popover width | string, number | — | Min width 150px |
|
||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | whether Popover is disabled | 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 |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| — | text content of popover |
|
||||
| reference | HTML element that triggers popover |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| show | triggers when popover shows | — |
|
||||
| hide | triggers when popover hides | — |
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<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.
|
||||
|
||||
### Linear progress bar (external percentage)
|
||||
|
||||
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Linear progress bar (internal percentage)
|
||||
|
||||
In this case the percentage takes no additional space.
|
||||
|
||||
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Circular progress bar
|
||||
|
||||
:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --- | ---- | ---- | ---- | ---- |
|
||||
| **percentage** | percentage, **required** | number | 0-100 | 0 |
|
||||
| type | the type of progress bar | string | line/circle | line |
|
||||
| stroke-width | the width of progress bar | number | — | 6 |
|
||||
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
|
||||
| status | the current status of progress bar | string | success/exception | — |
|
||||
| width | the canvas width of circle progress bar | number | — | 126 |
|
||||
| show-text | whether to show percentage | boolean | — | true |
|
||||
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
## Quick start
|
||||
|
||||
This part walks you through the process of using Element in a webpack project.
|
||||
|
||||
### Use Starter Kit
|
||||
|
||||
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.
|
||||
|
||||
If you prefer not to use them, please read the following.
|
||||
|
||||
### Use vue-cli
|
||||
|
||||
We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
|
||||
|
||||
```shell
|
||||
> npm i -g vue-cli
|
||||
> mkdir my-project && cd my-project
|
||||
> vue init webpack
|
||||
> npm i && npm i element-ui
|
||||
```
|
||||
|
||||
### Import Element
|
||||
|
||||
You can import Element entirely, or just import what you need. Let's start with fully import.
|
||||
|
||||
#### Fully import
|
||||
|
||||
In main.js:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
The above imports Element entirely. Note that CSS file needs to be imported separately.
|
||||
|
||||
#### On demand
|
||||
|
||||
With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.
|
||||
|
||||
First, install babel-plugin-component:
|
||||
|
||||
```bash
|
||||
npm install babel-plugin-component -D
|
||||
```
|
||||
|
||||
Then edit .babelrc:
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
Next, if you need Button and Select, edit main.js:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
/* or
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
*/
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
|
||||
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
Autocomplete,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Menu,
|
||||
Submenu,
|
||||
MenuItem,
|
||||
MenuItemGroup,
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Checkbox,
|
||||
CheckboxButton,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
TableColumn,
|
||||
DatePicker,
|
||||
TimeSelect,
|
||||
TimePicker,
|
||||
Popover,
|
||||
Tooltip,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Form,
|
||||
FormItem,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Tag,
|
||||
Tree,
|
||||
Alert,
|
||||
Slider,
|
||||
Icon,
|
||||
Row,
|
||||
Col,
|
||||
Upload,
|
||||
Progress,
|
||||
Badge,
|
||||
Card,
|
||||
Rate,
|
||||
Steps,
|
||||
Step,
|
||||
Carousel,
|
||||
CarouselItem,
|
||||
Collapse,
|
||||
CollapseItem,
|
||||
Cascader,
|
||||
ColorPicker,
|
||||
Transfer,
|
||||
Container,
|
||||
Header,
|
||||
Aside,
|
||||
Main,
|
||||
Footer,
|
||||
Loading,
|
||||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Input)
|
||||
Vue.use(InputNumber)
|
||||
Vue.use(Radio)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(RadioButton)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(CheckboxGroup)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Select)
|
||||
Vue.use(Option)
|
||||
Vue.use(OptionGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Table)
|
||||
Vue.use(TableColumn)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(TimeSelect)
|
||||
Vue.use(TimePicker)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Breadcrumb)
|
||||
Vue.use(BreadcrumbItem)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Tabs)
|
||||
Vue.use(TabPane)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Alert)
|
||||
Vue.use(Slider)
|
||||
Vue.use(Icon)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Card)
|
||||
Vue.use(Rate)
|
||||
Vue.use(Steps)
|
||||
Vue.use(Step)
|
||||
Vue.use(Carousel)
|
||||
Vue.use(CarouselItem)
|
||||
Vue.use(Collapse)
|
||||
Vue.use(CollapseItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(ColorPicker)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
|
||||
Vue.use(Loading.directive)
|
||||
|
||||
Vue.prototype.$loading = Loading.service
|
||||
Vue.prototype.$msgbox = MessageBox
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
```
|
||||
|
||||
### Global config
|
||||
When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
|
||||
|
||||
Fully import Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
Vue.use(Element, { size: 'small' })
|
||||
```
|
||||
|
||||
Partial import Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import { Button } from 'element-ui'
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' }
|
||||
Vue.use(Button)
|
||||
```
|
||||
With the above config, the default size of all components that have size attribute will be 'small'.
|
||||
|
||||
### Start coding
|
||||
|
||||
Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
|
||||
|
||||
```bash
|
||||
# visit localhost:8086
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Please refer to each component's documentation to learn how to use them.
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Radio should not have too many options. Otherwise, use the Select component instead.
|
||||
|
||||
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
|
||||
```html
|
||||
<template>
|
||||
<el-radio v-model="radio" label="1">Option A</el-radio>
|
||||
<el-radio v-model="radio" label="2">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
`disabled` attribute is used to disable the radio.
|
||||
|
||||
:::demo You just need to add the `disabled` attribute.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio button group
|
||||
|
||||
Suitable for choosing from some mutually exclusive options.
|
||||
|
||||
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Button style
|
||||
|
||||
Radio with button styles.
|
||||
|
||||
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With borders
|
||||
|
||||
:::demo The `border` attribute adds a border to Radios.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio Attributes
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
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
|
||||
size | size of the Radio, only works when `border` is true | string | medium / small / mini | —
|
||||
name | native 'name' attribute | string | — | —
|
||||
|
||||
### Radio Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
| --- | --- | --- |
|
||||
| change | triggers when the bound value changes | the label value of the chosen radio |
|
||||
|
||||
### Radio-group Attributes
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
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 |
|
||||
fill | border and background color when button is active | string | — | #409EFF |
|
||||
|
||||
### Radio-group Events
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
| --- | --- | --- |
|
||||
| change | triggers when the bound value changes | the label value of the chosen radio |
|
||||
|
||||
### Radio-button Attributes
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
---- | ---- | ---- | ---- | ----
|
||||
label | the value of radio | string / number | — | —
|
||||
disabled | whether radio is disabled | boolean | — | false
|
||||
name | native 'name' attribute | string | — | —
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<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
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
|
||||
|
||||
``` html
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Color for different levels</span>
|
||||
<el-rate
|
||||
v-model="value2"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### With text
|
||||
|
||||
Using text to indicate rating score
|
||||
|
||||
:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### More icons
|
||||
|
||||
You can use different icons to distinguish different rate components.
|
||||
|
||||
:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Read-only
|
||||
|
||||
Read-only Rate is for displaying rating score. Half star is supported.
|
||||
|
||||
:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
score-template="{value} points">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| max | max rating score | number | — | 5 |
|
||||
| disabled | whether Rate is read-only | boolean | — | false |
|
||||
| allow-half | whether picking half start is allowed | boolean | — | false |
|
||||
| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
|
||||
| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
|
||||
| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
|
||||
| void-color | color of unselected icons | string | — | #C6D1DE |
|
||||
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
|
||||
| icon-classes | array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
|
||||
| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
|
||||
| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
|
||||
| show-text | whether to display texts | boolean | — | false |
|
||||
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
|
||||
| text-color | color of texts | string | — | #1F2D3D |
|
||||
| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| score-template | score template | string | — | {value} |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | Triggers when rate value is changed | value after changing |
|
||||
|
|
@ -0,0 +1,695 @@
|
|||
<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: [],
|
||||
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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo `v-model` is the value of `el-option` that is currently selected.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled option
|
||||
|
||||
:::demo Set the value of `disabled` in `el-option` to `true` to disable this option.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled select
|
||||
|
||||
Disable the whole component.
|
||||
|
||||
:::demo Set `disabled` of `el-select` to make it disabled.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Clearable single select
|
||||
|
||||
You can clear Select using a clear icon.
|
||||
|
||||
:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Basic multiple select
|
||||
|
||||
Multiple select uses tags to display selected options.
|
||||
|
||||
:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom template
|
||||
|
||||
You can customize HTML templates for options.
|
||||
|
||||
:::demo Insert customized HTML templates into the slot of `el-option`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Grouping
|
||||
|
||||
Display options in groups.
|
||||
|
||||
:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}]
|
||||
}, {
|
||||
label: 'City name',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Option filtering
|
||||
|
||||
You can filter options for your desired ones.
|
||||
|
||||
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Remote Search
|
||||
|
||||
Enter keywords and search data from server.
|
||||
|
||||
:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Create new items
|
||||
Create and select new items that are not included in select options
|
||||
:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
placeholder="Choose tags for your article">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
value: 'CSS',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
|
||||
:::
|
||||
|
||||
### Select Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| 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 |
|
||||
| size | size of Input | string | large/small/mini | — |
|
||||
| clearable | whether single select can be cleared | boolean | — | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | — | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | — | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| loading | whether Select is loading data from server | boolean | — | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
|
||||
|
||||
### Select Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when the selected value changes | current selected value |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
| remove-tag | triggers when a tag is removed in multiple mode | removed tag value |
|
||||
| clear | triggers when the clear icon is clicked in a clearable Select | — |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
### Option Group Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | name of the group | string | — | — |
|
||||
| disabled | whether to disable all options in this group | boolean | — | false |
|
||||
|
||||
### Option Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | value of option | string/number/object | — | — |
|
||||
| label | label of option, same as `value` if omitted | string/number | — | — |
|
||||
| disabled | whether option is disabled | boolean | — | false |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
The current value is displayed when the slider is being dragged.
|
||||
|
||||
:::demo Customize the initial value of the slider by setting the binding value.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default value</span>
|
||||
<el-slider v-model="value1"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Customized initial value</span>
|
||||
<el-slider v-model="value2"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Hide Tooltip</span>
|
||||
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Format Tooltip</span>
|
||||
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Disabled</span>
|
||||
<el-slider v-model="value5" disabled></el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 36,
|
||||
value4: 48,
|
||||
value5: 42
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatTooltip(val) {
|
||||
return val / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Discrete values
|
||||
|
||||
The options can be discrete.
|
||||
|
||||
:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints not displayed</span>
|
||||
<el-slider
|
||||
v-model="value6"
|
||||
:step="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints displayed</span>
|
||||
<el-slider
|
||||
v-model="value7"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: 0,
|
||||
value7: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Slider with input box
|
||||
|
||||
Set value via a input box.
|
||||
|
||||
:::demo Set the `show-input` attribute to display an input box on the right.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value8"
|
||||
show-input>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value8: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Range selection
|
||||
|
||||
Selecting a range of values is supported.
|
||||
|
||||
:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value9"
|
||||
range
|
||||
show-stops
|
||||
:max="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value9: [4, 8]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical mode
|
||||
|
||||
:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value10"
|
||||
vertical
|
||||
height="200px">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value10: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| min | minimum value | number | — | 0 |
|
||||
| max | maximum value | number | — | 100 |
|
||||
| disabled | whether Slider is disabled | boolean | — | false |
|
||||
| step | step size | number | — | 1 |
|
||||
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
|
||||
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
|
||||
| show-stops | whether to display breakpoints | boolean | — | false |
|
||||
| show-tooltip | whether to display tooltip value | boolean | — | true |
|
||||
| format-tooltip | format to display tooltip value | function(value) | — | — |
|
||||
| range | whether to select a range | boolean | — | false |
|
||||
| vertical | vertical mode | boolean | — | false |
|
||||
| height | Slider height, required in vertical mode | string | — | — |
|
||||
| label | label for screen reader | string | — | — |
|
||||
|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
|
||||
|
||||
## Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
|
||||
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Simple step bar.
|
||||
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar that contains status
|
||||
|
||||
Shows the status of the step for each step.
|
||||
|
||||
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
|
||||
|
||||
```html
|
||||
<el-steps :space="200" :active="1" finish-status="success">
|
||||
<el-step title="Done"></el-step>
|
||||
<el-step title="Processing"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Center
|
||||
|
||||
Title and desription can be centered.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="2" align-center>
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
<el-step title="Step 4" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with description
|
||||
|
||||
There is description for each step.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with icon
|
||||
|
||||
A variety of custom icons can be used in the step bar.
|
||||
|
||||
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
|
||||
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical step bar
|
||||
|
||||
Vertical step bars.
|
||||
|
||||
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
|
||||
|
||||
```html
|
||||
<div style="height: 300px;">
|
||||
<el-steps direction="vertical" :active="1">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Simple step bar
|
||||
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<el-steps :space="200" :active="1" simple>
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
|
||||
<el-step title="Step 1" ></el-step>
|
||||
<el-step title="Step 2" ></el-step>
|
||||
<el-step title="Step 3" ></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
|
||||
| direction | display direction | string | vertical/horizontal | horizontal |
|
||||
| active | current activation step | number | — | 0 |
|
||||
| process-status | status of current step | string | wait / process / finish / error / success | process |
|
||||
| finish-status | status of end step | string | wait / process / finish / error / success | finish |
|
||||
| align-center | center title and description | boolean | — | false |
|
||||
| simple | whether to apply simple theme | boolean | - | false |
|
||||
|
||||
### Step Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | step title | string | — | — |
|
||||
| description | step description | string | — | — |
|
||||
| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
|
||||
| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
|
||||
|
||||
### Step Slot
|
||||
| Name | Description |
|
||||
|----|----|
|
||||
| icon | custom icon |
|
||||
| title | step title |
|
||||
| description | step description |
|
||||
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
|
||||
|
||||
```html
|
||||
<el-switch v-model="value1">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Text description
|
||||
:::demo You can add `active-text` and `inactive-text` attribute to show texts.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Extended value types
|
||||
|
||||
:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo Adding the `disabled` attribute disables Switch.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----|----
|
||||
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 | — | —
|
||||
inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
|
||||
active-text | text displayed when in `on` state | string | — | —
|
||||
inactive-text | text displayed when in `off` state | string | — | —
|
||||
active-value | switch value when in `on` state | boolean / string / number | — | true
|
||||
inactive-value | switch value when in `off` state | boolean / string / number | — | false
|
||||
active-color | background color when in `on` state | string | — | #409EFF
|
||||
inactive-color | background color when in `off` state | string | — | #C0CCDA
|
||||
name| input name of Switch | string | — | —
|
||||
|
||||
### Events
|
||||
|
||||
Event Name | Description | Parameters
|
||||
---- | ----| ----
|
||||
change | triggers when value changes | value after changing
|
||||
|
||||
### Methods
|
||||
Method | Description | Parameters
|
||||
------|--------|-------
|
||||
focus | focus the Switch component | —
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,394 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Basic and concise tabs.
|
||||
|
||||
:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Card Style
|
||||
|
||||
Tabs styled as cards.
|
||||
|
||||
:::demo Set `type` to `card` can get a card-styled tab.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Border card
|
||||
|
||||
Border card tabs.
|
||||
|
||||
:::demo Set `type` to `border-card`.
|
||||
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Tab position
|
||||
|
||||
You can use `tab-position` attribute to set the tab's position.
|
||||
|
||||
:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
|
||||
<el-radio-button label="top">top</el-radio-button>
|
||||
<el-radio-button label="right">right</el-radio-button>
|
||||
<el-radio-button label="bottom">bottom</el-radio-button>
|
||||
<el-radio-button label="left">left</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-tabs :tab-position="tabPosition" style="height: 200px;">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 'top'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom Tab
|
||||
|
||||
You can use named slot to customize the tab label content.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> Route</span>
|
||||
Route
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### Add & close tab
|
||||
|
||||
Only card type Tabs support addable & closeable.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized trigger button of new tab
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs2"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| 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 |
|
||||
|
||||
### Tabs Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| tab-click | triggers when a tab is clicked | clicked tab |
|
||||
| tab-remove | triggers when tab-remove button is clicked | name of the removed tab |
|
||||
| tab-add | triggers when tab-add button is clicked | — |
|
||||
| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) |
|
||||
|
||||
### Tab-pane Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| label | title of the tab | string | — | — |
|
||||
| disabled | whether Tab is disabled | boolean | — | false |
|
||||
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
|
||||
| closable | whether Tab is closable | boolean | — | false |
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<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: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag
|
||||
|
||||
Used for marking and selection.
|
||||
|
||||
### Basic usage
|
||||
|
||||
::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
|
||||
|
||||
```html
|
||||
<el-tag>Tag One</el-tag>
|
||||
<el-tag type="success">Tag Two</el-tag>
|
||||
<el-tag type="info">Tag Three</el-tag>
|
||||
<el-tag type="warning">Tag Four</el-tag>
|
||||
<el-tag type="danger">Tag Five</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Removable Tag
|
||||
|
||||
:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
closable
|
||||
:type="tag.type">
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
<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' }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Edit Dynamically
|
||||
|
||||
You can use the `close` event to add and remove tag dynamically.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="mini"
|
||||
@keyup.enter.native="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
|
||||
|
||||
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|
||||
```html
|
||||
<el-tag>Default</el-tag>
|
||||
<el-tag size="medium">Medium</el-tag>
|
||||
<el-tag size="small">Small</el-tag>
|
||||
<el-tag size="mini">Mini</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | success/info/warning/danger | — |
|
||||
| closable | whether Tag can be removed | boolean | — | false |
|
||||
| disable-transitions | whether to disable animations | boolean | — | false |
|
||||
| hit | whether Tag has a highlighted border | boolean | — | false |
|
||||
| color | background color of the Tag | string | — | — |
|
||||
| size | tag size | string | medium / small / mini | — |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| close | triggers when Tag is removed | — |
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-date-editor + .el-date-editor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## TimePicker
|
||||
|
||||
Use Time Picker for time input.
|
||||
|
||||
### Fixed time picker
|
||||
|
||||
Provide a list of fixed time for users to choose.
|
||||
|
||||
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="Select time">
|
||||
</el-time-select>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arbitrary time picker
|
||||
|
||||
Can pick an arbitrary time.
|
||||
|
||||
:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Fixed time range
|
||||
|
||||
If start time is picked at first, then the end time will change accordingly.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-time-select
|
||||
placeholder="Start time"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="End time"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arbitrary time range
|
||||
|
||||
Can pick an arbitrary time range.
|
||||
|
||||
:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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)]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<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 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| readonly | whether DatePicker is read only | boolean | — | false |
|
||||
| disabled | whether DatePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
| clearable | whether to show clear button | boolean | — | true |
|
||||
| size | size of Input | string | medium / small / mini | — |
|
||||
| placeholder | placeholder in non-range mode | string | — | — |
|
||||
| start-placeholder | placeholder for the start time in range mode | string | — | — |
|
||||
| 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 | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| 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 | — | {} |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
|
||||
| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
|
||||
### Time Select Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| start | start time | string | — | 09:00 |
|
||||
| end | end time | string | — | 18:00 |
|
||||
| step | time step | string | — | 00:30 |
|
||||
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
|
||||
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
|
||||
|
||||
### Time Picker Options
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||||
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's bounded value |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<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.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Tooltip has 9 placements.
|
||||
|
||||
:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
|
||||
```html
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
|
||||
<el-button>top-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
|
||||
<el-button>top</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
|
||||
<el-button>top-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
|
||||
<el-button>left-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
|
||||
<el-button>left</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
|
||||
<el-button>left-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
|
||||
<el-button>right-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
|
||||
<el-button>right</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
|
||||
<el-button>right-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
|
||||
<el-button>bottom-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
|
||||
<el-button>bottom</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
|
||||
<el-button>bottom-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Theme
|
||||
|
||||
Tooltip has two themes: `dark` and `light`。
|
||||
|
||||
:::demo Set `effect` to modify theme, and the default value is `dark`.
|
||||
```html
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### More Content
|
||||
|
||||
Display multiple lines of text and set their format.
|
||||
|
||||
:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
|
||||
```html
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">multiple lines<br/>second line</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### Advanced usage
|
||||
|
||||
In addition to basic usages, there are some attributes that allow you to customize your own:
|
||||
|
||||
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
|
||||
|
||||
`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
|
||||
|
||||
In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
.slide-fade-enter, .expand-fade-leave-active {
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
:::tip
|
||||
The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
|
||||
|
||||
Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
|
||||
:::
|
||||
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----------------|---------|-----------|-------------|--------|
|
||||
| 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 |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| open-delay | delay of appearance, in millisecond | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<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: [],
|
||||
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
|
||||
:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value1"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<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;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Filterable
|
||||
|
||||
You can search and filter data items.
|
||||
|
||||
:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
filterMethod(query, item) {
|
||||
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizable
|
||||
|
||||
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
|
||||
|
||||
:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value3"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:render-content="renderFunc"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['To left', 'To right']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
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;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Prop aliases
|
||||
|
||||
By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases.
|
||||
:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value4"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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 {
|
||||
data3: generateData3(),
|
||||
value4: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| data | data source | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | whether Transfer is filterable | boolean | — | false |
|
||||
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| titles | custom list titles | array | — | ['List 1', 'List 2'] |
|
||||
| button-texts | custom button texts | array | — | [ ] |
|
||||
| render-content | custom render function for data items | function(h, option) | — | — |
|
||||
| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
|
||||
| props | prop aliases for data source | object{key, label, disabled} | — | — |
|
||||
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
|
||||
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| left-footer | content of left list footer |
|
||||
| right-footer | content of right list footer |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
## Built-in transition
|
||||
|
||||
You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition).
|
||||
|
||||
### fade
|
||||
|
||||
:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show = !show">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-fade-in-linear">
|
||||
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
|
||||
</transition>
|
||||
<transition name="el-fade-in">
|
||||
<div v-show="show" class="transition-box">.el-fade-in</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### zoom
|
||||
|
||||
:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show2 = !show2">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show2: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### collapse
|
||||
|
||||
For collapse effect, use the `el-collapse-transition` component.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show3 = !show3">Click Me</el-button>
|
||||
|
||||
<div style="margin-top: 20px; height: 200px;">
|
||||
<el-collapse-transition>
|
||||
<div v-show="show3">
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### On demand
|
||||
|
||||
```js
|
||||
// fade/zoom
|
||||
import 'element-ui/lib/theme-chalk/base.css';
|
||||
// collapse
|
||||
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||||
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>
|
||||
|
|
@ -0,0 +1,985 @@
|
|||
<style>
|
||||
.demo-tree {
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.filter-tree {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</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
|
||||
}]
|
||||
}]
|
||||
}];
|
||||
|
||||
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);
|
||||
},
|
||||
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: '二级 2-1'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: '三级 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 style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button style="font-size: 12px;" 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)),
|
||||
regions,
|
||||
defaultProps,
|
||||
props,
|
||||
props1,
|
||||
defaultCheckedKeys: [5],
|
||||
defaultExpandedKeys: [2, 3],
|
||||
filterText: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tree
|
||||
|
||||
Display a set of data with hierarchies.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Basic tree structure.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Selectable
|
||||
|
||||
Used for node selection.
|
||||
|
||||
::: demo This example also shows how to load node data asynchronously.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
},
|
||||
count: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
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(() => {
|
||||
var data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + this.count++
|
||||
}, {
|
||||
name: 'zone' + this.count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom leaf node in lazy mode
|
||||
|
||||
::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled checkbox
|
||||
|
||||
The checkbox of a node can be set as disabled.
|
||||
|
||||
::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
disabled: 'disabled',
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Default expanded and default checked
|
||||
Tree nodes can be initially expanded or checked
|
||||
|
||||
::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
:default-checked-keys="[5]"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checking tree nodes
|
||||
|
||||
::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<div class="buttons">
|
||||
<el-button @click="getCheckedNodes">get by node</el-button>
|
||||
<el-button @click="getCheckedKeys">get by key</el-button>
|
||||
<el-button @click="setCheckedNodes">set by node</el-button>
|
||||
<el-button @click="setCheckedKeys">set by key</el-button>
|
||||
<el-button @click="resetChecked">reset</el-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
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([]);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
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'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom node content
|
||||
The content of tree nodes can be customized, so you can add icons or buttons as you will
|
||||
|
||||
::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:render-content="renderContent">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
let id = 1000;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data4: [{
|
||||
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'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
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 style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tree node filtering
|
||||
Tree nodes can be filtered
|
||||
|
||||
::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Filter keyword"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
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'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Accordion
|
||||
|
||||
Only one node among the same level can be expanded at one time.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
accordion
|
||||
@node-click="handleNodeClick">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
|
||||
| data | tree data | array | — | — |
|
||||
| empty-text | text displayed when data is void | string | — | — |
|
||||
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
|
||||
| props | configuration options, see the following table | object | — | — |
|
||||
| load | method for loading subtree data | function(node, resolve) | — | — |
|
||||
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
|
||||
| highlight-current | whether current node is highlighted | boolean | — | false |
|
||||
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
|
||||
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true | |
|
||||
| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
|
||||
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
|
||||
| show-checkbox | whether node is selectable | boolean | — | false |
|
||||
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
|
||||
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
|
||||
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
|
||||
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
|
||||
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
|
||||
|
||||
### props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
|
||||
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
|
||||
| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — |
|
||||
| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — |
|
||||
| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — |
|
||||
|
||||
### Method
|
||||
`Tree` has the following method, which returns the currently selected array of nodes.
|
||||
| Method | Description | Parameters |
|
||||
| --------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
|
||||
| updateKeyChildren | set new data to node, only works when `node-key` is assigned | (key, data) Accept two parameters: 1. key of node 2. new data |
|
||||
| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
|
||||
| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked |
|
||||
| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
|
||||
| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
|
||||
| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
|
||||
| getCurrentKey | return the highlight node's key (null if no node is highlighted) | — |
|
||||
| getCurrentNode | return the highlight node (null if no node is highlighted) | — |
|
||||
| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted |
|
||||
| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
| -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
|
||||
| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
|
||||
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
|
||||
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
|
||||
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<style>
|
||||
.demo-typo-box {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
border: 1px solid #eaeefb;
|
||||
font-size: 40px;
|
||||
color: #1f2d3d;
|
||||
text-align: center;
|
||||
line-height: 162px;
|
||||
padding-bottom: 36px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: 17px;
|
||||
border-radius: 4px;
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-top: 1px solid #eaeefb;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
text-indent: 10px;
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
}
|
||||
.demo-typo-size {
|
||||
.h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-regular {
|
||||
font-size: 14px;
|
||||
}
|
||||
.text-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
.text-smaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
.color-dark-light {
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
.typo-PingFang {
|
||||
font-family: 'PingFang SC';
|
||||
}
|
||||
.typo-Hiragino {
|
||||
font-family: 'Hiragino Sans GB';
|
||||
}
|
||||
.typo-Microsoft {
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
/* 英文 */
|
||||
.typo-Helvetica-Neue {
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
.typo-Helvetica {
|
||||
font-family: 'Helvetica';
|
||||
}
|
||||
.typo-Arial {
|
||||
font-family: 'Arial';
|
||||
}
|
||||
</style>
|
||||
|
||||
## Typography
|
||||
|
||||
We create a font convention to ensure the best presentation across different platforms.
|
||||
|
||||
### Chinese Font
|
||||
|
||||
<div class="demo-typo-box typo-PingFang">
|
||||
和畅惠风
|
||||
<div class="name">PingFang SC</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Hiragino">
|
||||
和畅惠风
|
||||
<div class="name">Hiragino Sans GB</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Microsoft">
|
||||
和畅惠风
|
||||
<div class="name">Microsoft YaHei</div>
|
||||
</div>
|
||||
|
||||
### English / Numberic Font
|
||||
|
||||
<div class="demo-typo-box typo-Helvetica-neue">
|
||||
RGag
|
||||
<div class="name">Helvetica Neue</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Helvetica">
|
||||
RGag
|
||||
<div class="name">Helvetica</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Arial">
|
||||
RGag
|
||||
<div class="name">Arial</div>
|
||||
</div>
|
||||
|
||||
### Font-family
|
||||
|
||||
```css
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
```
|
||||
|
||||
### Font Convention
|
||||
|
||||
<table class="demo-typo-size">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h1">Main Title</td>
|
||||
<td class="h1">Build with Element</td>
|
||||
<td class="color-dark-light">20px Extra large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h2">Title</td>
|
||||
<td class="h2">Build with Element</td>
|
||||
<td class="color-dark-light">18px large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h3">Small Title</td>
|
||||
<td class="h3">Build with Element</td>
|
||||
<td class="color-dark-light">16px Medium</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-regular">Body</td>
|
||||
<td class="text-regular">Build with Element</td>
|
||||
<td class="color-dark-light">14px Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-small">Body (small)</td>
|
||||
<td class="text-small">Build with Element</td>
|
||||
<td class="color-dark-light">13px Extra Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-smaller">Supplementary text</td>
|
||||
<td class="text-smaller">Build with Element</td>
|
||||
<td class="color-dark-light">12px Extra Extra Small</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
<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: @width;
|
||||
line-height: @height;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: @width;
|
||||
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',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
fileList2: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
fileList3: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
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`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Upload
|
||||
|
||||
Upload files by clicking or drag-and-drop
|
||||
|
||||
### Click to upload files
|
||||
|
||||
:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded.
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
<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'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### User avatar upload
|
||||
|
||||
Use `before-upload` hook to limit the upload file format and size.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
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 {
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Photo Wall
|
||||
|
||||
Use `list-type` to change the fileList style.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" size="tiny">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### FileList with thumbnail
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList2"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### File list control
|
||||
|
||||
Use `on-change` hook function to control upload file list
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList3">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList3: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(file, fileList) {
|
||||
this.fileList3 = fileList.slice(-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Drag to upload
|
||||
|
||||
You can drag your file to a certain area to upload it.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
|
||||
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
:::
|
||||
|
||||
### Manual upload
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">select file</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
|
||||
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----| ----
|
||||
action | required, request URL | string | — | —
|
||||
headers | request headers | object | — | —
|
||||
multiple | whether uploading multiple files is permitted | boolean | — | —
|
||||
data | additions options of request | object | — | —
|
||||
name | key name for uploaded file | string | — | file
|
||||
with-credentials | whether cookies are sent | boolean | — |false
|
||||
show-file-list | whether to show the uploaded file list | boolean | — | true
|
||||
drag | whether to activate drag and drop mode | boolean | — | false
|
||||
accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
|
||||
on-preview | hook function when clicking the uploaded files | function(file) | — | —
|
||||
on-remove | hook function when files are removed | function(file, fileList) | — | —
|
||||
on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
|
||||
on-error | hook function when some errors occurs | function(err, file, fileList) | — | —
|
||||
on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
|
||||
on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
|
||||
before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
|
||||
thumbnail-mode | whether thumbnail is displayed | boolean | — | false
|
||||
file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
|
||||
list-type | type of fileList | string | text/picture/picture-card | text |
|
||||
auto-upload | whether to auto upload file | boolean | — | true |
|
||||
http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
|
||||
disabled | whether to disable upload | boolean | — | false |
|
||||
limit | maximum number of uploads allowed | number | — | — |
|
||||
on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
|
||||
|
||||
### Methods
|
||||
| Methods Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |
|
||||
| abort | cancel upload request | （ file: fileList's item ） |
|
||||
|
|
@ -60,5 +60,36 @@
|
|||
"nav": {
|
||||
"dropdown": "Version: "
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "es",
|
||||
"demo-block": {
|
||||
"hide-text": "Hide",
|
||||
"show-text": "Expand",
|
||||
"button-text": "Try it!",
|
||||
"tooltip-text": "Run this demo on jsfiddle.net"
|
||||
},
|
||||
"footer": {
|
||||
"links": "Links",
|
||||
"repo": "GitHub",
|
||||
"community": "Community",
|
||||
"changelog": "Changelog",
|
||||
"theme": "Theme CLI tool",
|
||||
"preview": "Online theme generator",
|
||||
"faq": "FAQ",
|
||||
"gitter": "Gitter",
|
||||
"starter": "Starter kit",
|
||||
"feedback": "Feedback",
|
||||
"contribution": "Contribution",
|
||||
"eleme": "Eleme"
|
||||
},
|
||||
"header": {
|
||||
"guide": "Guide",
|
||||
"components": "Component",
|
||||
"resource": "Resource"
|
||||
},
|
||||
"nav": {
|
||||
"dropdown": "Version: "
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
"lang": "zh-CN",
|
||||
"pages": {
|
||||
"index": {
|
||||
"lang": "zh-CN",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"1": "网站快速成型工具",
|
||||
"2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
|
||||
"3": "指南",
|
||||
|
|
@ -14,7 +11,10 @@
|
|||
"6": "组件",
|
||||
"7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
|
||||
"8": "资源",
|
||||
"9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。"
|
||||
"9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
|
||||
"lang": "zh-CN",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
|
|
@ -76,9 +76,6 @@
|
|||
"15": "适用于导航较少，页面篇幅较长的网站。"
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.8",
|
||||
"placeholder1": "整理中",
|
||||
"placeholder2": "设计资源正在整理和完善中",
|
||||
"1": "资源",
|
||||
"2": "整理中",
|
||||
"3": "Axure Components",
|
||||
|
|
@ -87,7 +84,10 @@
|
|||
"6": "Sketch Template",
|
||||
"7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格",
|
||||
"8": "组件交互文档",
|
||||
"9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节"
|
||||
"9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节",
|
||||
"paraHeight": "1.8",
|
||||
"placeholder1": "整理中",
|
||||
"placeholder2": "设计资源正在整理和完善中"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -95,12 +95,6 @@
|
|||
"lang": "en-US",
|
||||
"pages": {
|
||||
"index": {
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)",
|
||||
"1": "A Desktop UI Library",
|
||||
"2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
|
||||
"3": "Guide",
|
||||
|
|
@ -109,7 +103,13 @@
|
|||
"6": "Component",
|
||||
"7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
|
||||
"8": "Resource",
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency."
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
|
|
@ -171,9 +171,6 @@
|
|||
"15": "Suitable for sites with few navigations and large chunks."
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "Under construction",
|
||||
"placeholder2": "Please wait while we prepare the design resources",
|
||||
"1": "Resource",
|
||||
"2": "Under construction.",
|
||||
"3": "Axure Components",
|
||||
|
|
@ -182,7 +179,105 @@
|
|||
"6": "Sketch Template",
|
||||
"7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
|
||||
"8": "Interaction Design Documentation",
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective."
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "Under construction",
|
||||
"placeholder2": "Please wait while we prepare the design resources"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "es",
|
||||
"pages": {
|
||||
"index": {
|
||||
"1": "A Desktop UI Library",
|
||||
"2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
|
||||
"3": "Guide",
|
||||
"4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
|
||||
"5": "View Detail",
|
||||
"6": "Component",
|
||||
"7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
|
||||
"8": "Resource",
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
"1": "Changelog",
|
||||
"2": "en-US"
|
||||
},
|
||||
"design": {
|
||||
"1": "Design Disciplines",
|
||||
"2": "Consistency",
|
||||
"3": "",
|
||||
"4": "Feedback",
|
||||
"5": "",
|
||||
"6": "Efficiency",
|
||||
"7": "",
|
||||
"8": "Controllability",
|
||||
"9": "",
|
||||
"10": "Consistency",
|
||||
"11": "Consistent with real life: ",
|
||||
"12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to.",
|
||||
"13": "Consistent within interface: ",
|
||||
"14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.",
|
||||
"15": "Feedback",
|
||||
"16": "Operation feedback: ",
|
||||
"17": "enable the users to clearly perceive their operations by style updates and interactive effects.",
|
||||
"18": "Visual feedback: ",
|
||||
"19": "reflect current state by updating or rearranging elements of the page.",
|
||||
"20": "Efficiency",
|
||||
"21": "Simplify the process: ",
|
||||
"22": "keep operating process simple and intuitive.",
|
||||
"23": "Definite and clear: ",
|
||||
"24": "enunciate your intentions clearly so that the users can quickly understand and make decisions.",
|
||||
"25": "Easy to identify: ",
|
||||
"26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.",
|
||||
"27": "Controllability",
|
||||
"28": "Decision making: ",
|
||||
"29": "giving advices about operations is acceptable, but do not make decisions for the users.",
|
||||
"30": "Controlled consequences: ",
|
||||
"31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
|
||||
},
|
||||
"guide": {
|
||||
"1": "Design Disciplines",
|
||||
"2": "Navigation"
|
||||
},
|
||||
"nav": {
|
||||
"1": "Navigation",
|
||||
"2": "Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.",
|
||||
"3": "Choose the right navigation",
|
||||
"4": "An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation",
|
||||
"5": "Side Navigation",
|
||||
"6": "Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.",
|
||||
"7": "Level 1 categories",
|
||||
"8": "Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.",
|
||||
"9": "Level 2 categories",
|
||||
"10": "Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.",
|
||||
"11": "Level 3 categories",
|
||||
"12": "Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.",
|
||||
"13": "Top Navigation",
|
||||
"14": "Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.",
|
||||
"15": "Suitable for sites with few navigations and large chunks."
|
||||
},
|
||||
"resource": {
|
||||
"1": "Resource",
|
||||
"2": "Under construction.",
|
||||
"3": "Axure Components",
|
||||
"4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
|
||||
"5": "Download",
|
||||
"6": "Sketch Template",
|
||||
"7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
|
||||
"8": "Interaction Design Documentation",
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "Under construction",
|
||||
"placeholder2": "Please wait while we prepare the design resources"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,8 @@
|
|||
},
|
||||
{
|
||||
"lang": "en-US"
|
||||
},
|
||||
{
|
||||
"lang": "es"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,5 +10,11 @@
|
|||
"guide": "Guide | Element",
|
||||
"component": "Component | Element",
|
||||
"resource": "Resource | Element"
|
||||
},
|
||||
"es": {
|
||||
"home": "Element - A Desktop UI Toolkit for Web",
|
||||
"guide": "Guide | Element",
|
||||
"component": "Component | Element",
|
||||
"resource": "Resource | Element"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -498,5 +498,255 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"es": [
|
||||
{
|
||||
"name": "Changelog-es",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
"name": "Element React",
|
||||
"href": "https://eleme.github.io/element-react/"
|
||||
},
|
||||
{
|
||||
"name": "Element Angular",
|
||||
"href": "https://eleme.github.io/element-angular/"
|
||||
},
|
||||
{
|
||||
"name": "Development",
|
||||
"children": [
|
||||
{
|
||||
"path": "/installation",
|
||||
"name": "Installation-es"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"name": "Quick Start-es"
|
||||
},
|
||||
{
|
||||
"path": "/i18n",
|
||||
"name": "Internationalization-es"
|
||||
},
|
||||
{
|
||||
"path": "/custom-theme",
|
||||
"name": "Custom Theme-es"
|
||||
},
|
||||
{
|
||||
"path": "/transition",
|
||||
"name": "Built-in transition-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Components",
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout-es"
|
||||
},
|
||||
{
|
||||
"path": "/container",
|
||||
"title": "Layout Container-es"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"title": "Color-es"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"title": "Typography-es"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon-es"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio-es"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox-es"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"title": "Input-es"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"title": "InputNumber-es"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"title": "Select-es"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader-es"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch-es"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"title": "Slider-es"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"title": "TimePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"title": "DatePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "DateTimePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"title": "Upload-es"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"title": "Rate-es"
|
||||
},
|
||||
{
|
||||
"path": "/color-picker",
|
||||
"title": "ColorPicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/transfer",
|
||||
"title": "Transfer-es"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"title": "Form-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"title": "Table-es"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag-es"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress-es"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"title": "Tree-es"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"title": "Pagination-es"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Notice",
|
||||
"list": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"title": "Alert-es"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading-es"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"title": "Message-es"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"title": "MessageBox-es"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"title": "Notification-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Navigation",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"title": "NavMenu-es"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"title": "Tabs-es"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"title": "Breadcrumb-es"
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"title": "Dropdown-es"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Others",
|
||||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog-es"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"title": "Tooltip-es"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"title": "Popover-es"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card-es"
|
||||
},
|
||||
{
|
||||
"path": "/carousel",
|
||||
"title": "Carousel-es"
|
||||
},
|
||||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse-es"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
<style>
|
||||
.page-changelog {
|
||||
padding-bottom: 100px;
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
padding: 0;
|
||||
|
||||
&.el-button {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 60px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
color: #5e6d82;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
list-style: none;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 30px 30px 15px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
padding-left: 27px;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
color: #555;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: '';
|
||||
circle: 4px #fff;
|
||||
border: solid 1px #333;
|
||||
margin-right: -12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 16px;
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 5px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
circle: 6px #333;
|
||||
transform: translateX(-20px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin:0;
|
||||
padding: 15px 30px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
margin-bottom: -10px;
|
||||
font-size: 18px;
|
||||
padding-left: 54px;
|
||||
padding-top: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-style: normal;
|
||||
top: 23px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<el-button class="fr">
|
||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
|
||||
</el-button>
|
||||
Changelog
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
<change-log ref="changeLog"></change-log>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../../CHANGELOG.en-US.md';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChangeLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
count: 3
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const changeLog = this.$refs.changeLog;
|
||||
const changeLogNodes = changeLog.$el.children;
|
||||
let a = changeLogNodes[1].querySelector('a');
|
||||
a && a.remove();
|
||||
let release = changeLogNodes[1].textContent.trim();
|
||||
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
|
||||
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
||||
let node = changeLogNodes[i];
|
||||
a = changeLogNodes[i].querySelector('a');
|
||||
a && a.getAttribute('class') === 'header-anchor' && a.remove();
|
||||
if (node.tagName !== 'H3') {
|
||||
fragments += changeLogNodes[i].outerHTML;
|
||||
} else {
|
||||
release = changeLogNodes[i].textContent.trim();
|
||||
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
}
|
||||
}
|
||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
||||
fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
|
||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
||||
|
||||
changeLog.$el.remove();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<style>
|
||||
.page-component__scroll {
|
||||
height: calc(100% - 80px);
|
||||
margin-top: 80px;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-component {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
&.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-component__nav {
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 80px;
|
||||
transition: padding-top .3s;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-extended {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-right: 0;
|
||||
|
||||
& > ul {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-component__content {
|
||||
padding-left: 270px;
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 50px;
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 55px 0 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
line-height: 1.5em;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
padding: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
th:first-child, td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-component-up {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 150px;
|
||||
size: 40px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
|
||||
i {
|
||||
color: #409EFF;
|
||||
display: block;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.back-top-fade-enter,
|
||||
.back-top-fade-leave-active {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-component {
|
||||
.page-component__nav {
|
||||
width: 100%;
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
}
|
||||
.side-nav {
|
||||
padding-top: 0;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.page-component__content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.content {
|
||||
padding-top: 0;
|
||||
}
|
||||
.content > table {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.page-component-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-scrollbar class="page-component__scroll" ref="componentScrollBar">
|
||||
<div class="page-container page-component">
|
||||
<el-scrollbar class="page-component__nav">
|
||||
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
|
||||
</el-scrollbar>
|
||||
<div class="page-component__content">
|
||||
<router-view class="content"></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
<transition name="back-top-fade">
|
||||
<div
|
||||
class="page-component-up"
|
||||
:class="{ 'hover': hover }"
|
||||
v-show="showBackToTop"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="toTop">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
import navsData from '../../nav.config.json';
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData,
|
||||
hover: false,
|
||||
showBackToTop: false,
|
||||
scrollTop: 0,
|
||||
showHeader: true,
|
||||
componentScrollBar: null,
|
||||
componentScrollBoxElement: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
// 触发伪滚动条更新
|
||||
this.componentScrollBox.scrollTop = 0;
|
||||
this.$nextTick(() => {
|
||||
this.componentScrollBar.update();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderAnchorHref() {
|
||||
if (/changelog/g.test(location.href)) return;
|
||||
const anchors = document.querySelectorAll('h2 a,h3 a');
|
||||
const basePath = location.href.split('#').splice(0, 2).join('#');
|
||||
|
||||
[].slice.call(anchors).forEach(a => {
|
||||
const href = a.getAttribute('href');
|
||||
a.href = basePath + href;
|
||||
});
|
||||
},
|
||||
|
||||
goAnchor() {
|
||||
if (location.href.match(/#/g).length > 1) {
|
||||
const anchor = location.href.match(/#[^#]+$/g);
|
||||
if (!anchor) return;
|
||||
const elm = document.querySelector(anchor[0]);
|
||||
if (!elm) return;
|
||||
|
||||
setTimeout(_ => {
|
||||
this.componentScrollBox.scrollTop = elm.offsetTop;
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
toTop() {
|
||||
this.hover = false;
|
||||
this.showBackToTop = false;
|
||||
this.componentScrollBox.scrollTop = 0;
|
||||
},
|
||||
|
||||
handleScroll() {
|
||||
const scrollTop = this.componentScrollBox.scrollTop;
|
||||
this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
|
||||
if (this.showHeader !== this.scrollTop > scrollTop) {
|
||||
this.showHeader = this.scrollTop > scrollTop;
|
||||
}
|
||||
if (scrollTop === 0) {
|
||||
this.showHeader = true;
|
||||
}
|
||||
if (!this.navFaded) {
|
||||
bus.$emit('fadeNav');
|
||||
}
|
||||
this.scrollTop = scrollTop;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
bus.$on('navFade', val => {
|
||||
this.navFaded = val;
|
||||
});
|
||||
window.addEventListener('hashchange', () => {
|
||||
if (location.href.match(/#/g).length < 2) {
|
||||
document.documentElement.scrollTop = document.body.scrollTop = 0;
|
||||
this.renderAnchorHref();
|
||||
} else {
|
||||
this.goAnchor();
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.componentScrollBar = this.$refs.componentScrollBar;
|
||||
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
|
||||
this.throttledScrollHandler = throttle(300, this.handleScroll);
|
||||
this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
|
||||
this.renderAnchorHref();
|
||||
this.goAnchor();
|
||||
document.body.classList.add('is-component');
|
||||
},
|
||||
destroyed() {
|
||||
document.body.classList.remove('is-component');
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Design Disciplines</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>Consistency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>Feedback</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>Efficiency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>Controllability</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>Consistency</h3>
|
||||
<ul>
|
||||
<li><strong>Consistent with real life: </strong>in line with the process and logic of real life, and comply with languages and habits that the users are used to.</li>
|
||||
<li><strong>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</li>
|
||||
</ul>
|
||||
<h3>Feedback</h3>
|
||||
<ul>
|
||||
<li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects.</li>
|
||||
<li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</li>
|
||||
</ul>
|
||||
<h3>Efficiency</h3>
|
||||
<ul>
|
||||
<li><strong>Simplify the process: </strong>keep operating process simple and intuitive.</li>
|
||||
<li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions.</li>
|
||||
<li><strong>Easy to identify: </strong>the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</li>
|
||||
</ul>
|
||||
<h3>Controllability</h3>
|
||||
<ul>
|
||||
<li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users.</li>
|
||||
<li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<style>
|
||||
.page-guide {
|
||||
padding: 55px 30px 95px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
padding-left: 25px;
|
||||
margin-left: -1px;
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 30px;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #99a9bf;
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
background-color: #5e6d82;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #5e6d82;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-guide {
|
||||
.content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-guide">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="5">
|
||||
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="19">
|
||||
<router-view class="content"></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: 'Design Disciplines'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: 'Navigation'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<style scoped>
|
||||
.banner {
|
||||
text-align: center;
|
||||
}
|
||||
.banner-desc {
|
||||
padding-top: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 34px;
|
||||
margin: 0;
|
||||
line-height: 48px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #888;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
width: 890px;
|
||||
height: 465px;
|
||||
margin: 30px auto 100px;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.jumbotron-cloud-1 {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.jumbotron-plant-2 {
|
||||
left: 60px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.jumbotron-web {
|
||||
height: 385px;
|
||||
top: 35px;
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.jumbotron-cloud-2 {
|
||||
left: 0;
|
||||
top: 50px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-1 {
|
||||
left: 94px;
|
||||
height: 90px;
|
||||
top: 220px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-2 {
|
||||
right: 73px;
|
||||
top: 60px;
|
||||
height: 124px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-3 {
|
||||
right: 42px;
|
||||
top: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.jumbotron-plant-1 {
|
||||
bottom: 0;
|
||||
left: 30px;
|
||||
height: 185px;
|
||||
}
|
||||
|
||||
.jumbotron-figure-1 {
|
||||
bottom: 0;
|
||||
right: 180px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.jumbotron-figure-2 {
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all .3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: #409EFF;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid #eaeefb;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #409EFF;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.banner .container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.banner img {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.banner .container {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards {
|
||||
li {
|
||||
width: 80%;
|
||||
margin: 0 auto 20px;
|
||||
float: none;
|
||||
}
|
||||
.card {
|
||||
height: auto;
|
||||
padding-bottom: 54px;
|
||||
}
|
||||
}
|
||||
.banner-stars {
|
||||
display: none;
|
||||
}
|
||||
.banner-desc {
|
||||
#line2 {
|
||||
display: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
p {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<div class="banner-desc">
|
||||
<h1>A Desktop UI Library</h1>
|
||||
<p>Element, a Vue 2.0 based component library for developers, designers and product managers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<div>
|
||||
<img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
|
||||
<img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
|
||||
<img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
|
||||
<img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
|
||||
<img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
|
||||
</div>
|
||||
<div data-hover-layer="0">
|
||||
<img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
|
||||
<img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
|
||||
</div>
|
||||
<div data-hover-layer="1">
|
||||
<img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
|
||||
<img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
|
||||
<img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>Guide</h3>
|
||||
<p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/guide/design"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>Component</h3>
|
||||
<p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/component/layout"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>Resource</h3>
|
||||
<p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/resource"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Hover } from 'perspective.js';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
new Hover('.jumbotron', { // eslint-disable-line
|
||||
max: 3,
|
||||
scale: 1,
|
||||
perspective: 700,
|
||||
layers: [{
|
||||
multiple: 0.01,
|
||||
reverseTranslate: true
|
||||
}, {
|
||||
multiple: 0.02,
|
||||
reverseTranslate: true
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<style scoped>
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.nav-demos {
|
||||
p {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
h5 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
padding: 15px;
|
||||
background-color: #F9FAFC;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dialog-img {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
|
||||
.imgWrap {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #373737;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.zoom-enter-active,
|
||||
.zoom-leave-active {
|
||||
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.zoom-enter,
|
||||
.zoom-leave-active {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Navigation</h2>
|
||||
<div class="block">
|
||||
<p>Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Choose the right navigation</h3>
|
||||
<p>An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Side Navigation</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">
|
||||
<p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p>
|
||||
</el-col>
|
||||
<el-col :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 1 categories</h5>
|
||||
<p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 2 categories</h5>
|
||||
<p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 3 categories</h5>
|
||||
<p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Top Navigation</h3>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p>
|
||||
</el-col>
|
||||
<el-col :span="14" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
||||
<p>Suitable for sites with few navigations and large chunks.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
|
||||
</transition>
|
||||
<transition name="zoom">
|
||||
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
|
||||
<div class="imgWrap" :style="imgStyle">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: '',
|
||||
imgBound: {},
|
||||
showDialog: false,
|
||||
imgStyle: {},
|
||||
imgWrapStyle: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showDialog(val) {
|
||||
document.body.style.overflow = val ? 'hidden' : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enlarge(imgWidth, ev) {
|
||||
var imgNode = ev.target;
|
||||
// var bound = imgNode.getBoundingClientRect();
|
||||
var offset = {};
|
||||
var doc = document;
|
||||
|
||||
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
|
||||
offset.top = 100;
|
||||
|
||||
this.imgUrl = imgNode.src;
|
||||
this.imgBound = imgNode.getBoundingClientRect();
|
||||
|
||||
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
this.imgStyle.width = imgWidth + 'px';
|
||||
this.showDialog = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<style scoped>
|
||||
.page-resource {
|
||||
padding-top: 55px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.resource-placeholder {
|
||||
margin: 50px auto 100px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 20px 0 16px;
|
||||
font-size: 16px;
|
||||
color: #1f2f3d;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 35px auto 110px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 11px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
.card {
|
||||
height: 394px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: bottom .3s;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 75px auto 35px;
|
||||
height: 87px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
a {
|
||||
height: 42px;
|
||||
width: 190px;
|
||||
display: inline-block;
|
||||
line-height: @height;
|
||||
font-size: 14px;
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
.cards {
|
||||
li {
|
||||
max-width: 500px;
|
||||
float: none;
|
||||
margin: 10px auto 30px;
|
||||
width: 80%;
|
||||
.card {
|
||||
height: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>Resource</h2>
|
||||
<div class="resource-placeholder">
|
||||
<img src="~examples/assets/images/resource-placeholder.svg" alt="">
|
||||
<h4>Under construction</h4>
|
||||
<p>Please wait while we prepare the design resources</p>
|
||||
</div>
|
||||
|
||||
<!--<p>Under construction.</p>-->
|
||||
<!--<div class="cards">-->
|
||||
<!--<ul class="container">-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
|
||||
<!--<h3>Axure Components</h3>-->
|
||||
<!--<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
|
||||
<!--<h3>Sketch Template</h3>-->
|
||||
<!--<p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Module.svg" alt="">-->
|
||||
<!--<h3>Interaction Design Documentation</h3>-->
|
||||
<!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,6 +11,11 @@ const LOAD_MAP = {
|
|||
return r => require.ensure([], () =>
|
||||
r(require(`./pages/en-US/${name}.vue`)),
|
||||
'en-US');
|
||||
},
|
||||
'es': name => {
|
||||
return r => require.ensure([], () =>
|
||||
r(require(`./pages/es/${name}.vue`)),
|
||||
'es');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -28,6 +33,11 @@ const LOAD_DOCS_MAP = {
|
|||
return r => require.ensure([], () =>
|
||||
r(require(`./docs/en-US${path}.md`)),
|
||||
'en-US');
|
||||
},
|
||||
'es': path => {
|
||||
return r => require.ensure([], () =>
|
||||
r(require(`./docs/es${path}.md`)),
|
||||
'es');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -134,6 +144,8 @@ let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.
|
|||
let defaultPath = '/en-US';
|
||||
if (userLanguage.indexOf('zh-') !== -1) {
|
||||
defaultPath = '/zh-CN';
|
||||
} else if (userLanguage.indexOf('es') !== -1) {
|
||||
defaultPath = '/es';
|
||||
}
|
||||
|
||||
route = route.concat([{
|
||||
|
|
|
|||
Loading…
Reference in New Issue