Skip to content

E
Element
Commit 45043754 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

update dependencies

parent 7c9ec6d1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 307 deletions
examples/components/side-nav.vue
View file @ 45043754
......@@ -118,6 +118,7 @@
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
......
examples/docs/en-US/card.md
View file @ 45043754
......@@ -60,7 +60,7 @@ Card includes title, content and operations.
<span style="line-height: 36px;">Card name</span>
<el-button style="float: right;" type="primary">Operation button</el-button>
</div>
<div v-for="o in 4" class="text item">
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
......@@ -97,7 +97,7 @@ The header part can be omitted.
:::demo
```html
<el-card class="box-card">
<div v-for="o in 4" class="text item">
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
......@@ -125,7 +125,7 @@ Display richer content by adding some configs.
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
<el-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;">
......
examples/docs/en-US/carousel.md
View file @ 45043754
......@@ -22,7 +22,7 @@ Loop a series of images or texts in a limited space
<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">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -30,7 +30,7 @@ Loop a series of images or texts in a limited space
<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">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -65,7 +65,7 @@ Indicators can be displayed outside the carousel
```html
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -99,7 +99,7 @@ You can define when arrows are displayed
```html
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -133,7 +133,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......
examples/docs/en-US/checkbox.md
View file @ 45043754
......@@ -127,7 +127,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
<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">{{city}}</el-checkbox>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
......@@ -169,7 +169,7 @@ The `min` and `max` properties can help you to limit the number of checked items
v-model="checkedCities1"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
......@@ -195,15 +195,15 @@ Checkbox with button styles.
<template>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</template>
<script>
......
examples/docs/en-US/icon.md
View file @ 45043754
......@@ -32,7 +32,7 @@ Just assign the class name to `el-icon-iconName`.
### Icons
<ul class="icon-list">
<li v-for="name in icons">
<li v-for="name in icons" :key="name">
<span>
<i :class="'el-icon-' + name"></i>
{{'el-icon-' + name}}
......
examples/docs/en-US/select.md
View file @ 45043754
......@@ -139,6 +139,7 @@ When there are plenty of options, use a drop-down menu to display and select des
<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>
......@@ -182,6 +183,7 @@ When there are plenty of options, use a drop-down menu to display and select des
<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">
......@@ -228,6 +230,7 @@ Disable the whole component.
<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>
......@@ -272,6 +275,7 @@ You can clear Select using a clear icon.
<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>
......@@ -316,6 +320,7 @@ Multiple select uses tags to display selected options.
<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>
......@@ -361,6 +366,7 @@ You can customize HTML templates for options.
<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>
......@@ -411,9 +417,11 @@ Display options in groups.
<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>
......@@ -468,6 +476,7 @@ You can filter options for your desired ones.
<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>
......@@ -593,6 +602,7 @@ Create and select new items that are not included in select options
placeholder="Choose tags for your article">
<el-option
v-for="item in options5"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......
examples/docs/en-US/switch.md
View file @ 45043754
......@@ -44,12 +44,12 @@ Switch is used for switching between two opposing states.
```
:::
### Expand value
### Extended value types
:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean`, `String` or `Number` type.
:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
```html
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
<el-tooltip :content="'Switch value: ' + value3" placement="top">
<el-switch
v-model="value3"
on-color="#13ce66"
......@@ -110,8 +110,8 @@ on-close-icon | class name of the icon displayed when in `on` state, overrides `
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
on-text | text displayed when in `on` state | string | — | ON
off-text | text displayed when in `off` state | string | — | OFF
on-value | switch value when in `on` state | boolean \| string \| number | — | true
off-value | switch value when in `off` state | boolean \| string \| number | — | false
on-value | switch value when in `on` state | boolean / string / number | — | true
off-value | switch value when in `off` state | boolean / string / number | — | false
on-color | background color when in `on` state | string | — | #20A0FF
off-color | background color when in `off` state | string | — | #C0CCDA
name| input name of Switch | string | — | —
......
examples/docs/en-US/tabs.md
View file @ 45043754
......@@ -201,6 +201,7 @@ Only card type Tabs support addable & closeable.
<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"
>
......@@ -274,6 +275,7 @@ Only card type Tabs support addable & closeable.
<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"
>
......
examples/docs/en-US/tag.md
View file @ 45043754
......@@ -64,6 +64,7 @@ Used for marking and selection.
```html
<el-tag
v-for="tag in tags"
:key="tag.name"
:closable="true"
:type="tag.type"
>
......
examples/docs/zh-CN/card.md
View file @ 45043754
......@@ -61,7 +61,7 @@
<span style="line-height: 36px;">卡片名称</span>
<el-button style="float: right;" type="primary">操作按钮</el-button>
</div>
<div v-for="o in 4" class="text item">
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
......@@ -98,7 +98,7 @@
:::demo
```html
<el-card class="box-card">
<div v-for="o in 4" class="text item">
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
......@@ -126,7 +126,7 @@
:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
<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;">
......
examples/docs/zh-CN/carousel.md
View file @ 45043754
......@@ -73,7 +73,7 @@
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -81,7 +81,7 @@
<div class="block">
<span class="demonstration">Click 指示器触发</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -116,7 +116,7 @@
```html
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -149,7 +149,7 @@
```html
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......@@ -182,7 +182,7 @@
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
......
examples/docs/zh-CN/checkbox.md
View file @ 45043754
......@@ -137,7 +137,7 @@
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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">{{city}}</el-checkbox>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
......@@ -179,7 +179,7 @@
v-model="checkedCities1"
:min="1"
:max="2">
<el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
......@@ -206,15 +206,15 @@
<template>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
<el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</template>
<script>
......
examples/docs/zh-CN/icon.md
View file @ 45043754
......@@ -85,7 +85,7 @@
### 图标集合
<ul class="icon-list">
<li v-for="name in icons">
<li v-for="name in icons" :key="name">
<span>
<i :class="'el-icon-' + name"></i>
{{'el-icon-' + name}}
......
examples/docs/zh-CN/select.md
View file @ 45043754
......@@ -145,6 +145,7 @@
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......@@ -187,6 +188,7 @@
<el-select v-model="value2" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
......@@ -233,6 +235,7 @@
<el-select v-model="value3" disabled placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......@@ -277,6 +280,7 @@
<el-select v-model="value4" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......@@ -321,6 +325,7 @@
<el-select v-model="value5" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......@@ -365,6 +370,7 @@
<el-select v-model="value6" placeholder="请选择">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
......@@ -414,9 +420,11 @@
<el-select v-model="value7" placeholder="请选择">
<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>
......@@ -471,6 +479,7 @@
<el-select v-model="value8" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......@@ -594,6 +603,7 @@
placeholder="请选择文章标签">
<el-option
v-for="item in options5"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
......
examples/docs/zh-CN/switch.md
View file @ 45043754
......@@ -52,12 +52,12 @@
```
:::
### 扩展 value
### 扩展的 value 类型
:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean`, `String` 或 `Number` 类型的值。
:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
```html
<el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
<el-tooltip :content="'Switch value: ' + value3" placement="top">
<el-switch
v-model="value3"
on-color="#13ce66"
......@@ -119,8 +119,8 @@
| off-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text` | string | — | — |
| on-text | switch 打开时的文字 | string | — | ON |
| off-text | switch 关闭时的文字 | string | — | OFF |
| on-value | switch 打开时的值 | boolean \| string \| number | — | true |
| off-value | switch 关闭时的值 | boolean \| string \| number | — | false |
| on-value | switch 打开时的值 | boolean / string / number | — | true |
| off-value | switch 关闭时的值 | boolean / string / number | — | false |
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — |
......@@ -128,4 +128,4 @@
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | switch 状态发生变化时的回调函数 | 新状态的布尔值 |
| change | switch 状态发生变化时的回调函数 | 新状态的值 |
examples/docs/zh-CN/tabs.md
View file @ 45043754
......@@ -198,6 +198,7 @@
```html
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name"
......@@ -272,6 +273,7 @@
<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"
>
......
examples/docs/zh-CN/tag.md
View file @ 45043754
......@@ -87,6 +87,7 @@
```html
<el-tag
v-for="tag in tags"
:key="item.name"
:closable="true"
:type="tag.type"
>
......
packages/pagination/src/pagination.js
View file @ 45043754
......@@ -205,7 +205,7 @@ export default {
type="number"
min={ 1 }
max={ this.internalPageCount }
domProps-value={ this.$parent.internalCurrentPage }
value={ this.$parent.internalCurrentPage }
on-change={ this.handleChange }
on-focus={ this.handleFocus }
style={{ width: '30px' }}
......
packages/table/src/filter-panel.vue
View file @ 45043754
......@@ -5,6 +5,7 @@
<el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
<el-checkbox
v-for="filter in filters"
:key="filter.value"
:label="filter.value">{{ filter.text }}</el-checkbox>
</el-checkbox-group>
</div>
......@@ -23,6 +24,7 @@
<li class="el-table-filter__list-item"
v-for="filter in filters"
:label="filter.value"
:key="filter.value"
:class="{ 'is-active': isActive(filter) }"
@click="handleSelect(filter.value)" >{{ filter.text }}</li>
</ul>
......
packages/table/src/table-column.js
View file @ 45043754
......@@ -35,11 +35,11 @@ const forced = {
renderHeader: function(h) {
return <el-checkbox
nativeOn-click={ this.toggleAllSelection }
domProps-value={ this.isAllSelected } />;
value={ this.isAllSelected } />;
},
renderCell: function(h, { row, column, store, $index }) {
return <el-checkbox
domProps-value={ store.isSelected(row) }
value={ store.isSelected(row) }
disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
},
......
packages/theme-default/src/index.css
View file @ 45043754
......@@ -15,6 +15,7 @@
@import "./radio-group.css";
@import "./radio-button.css";
@import "./checkbox.css";
@import "./checkbox-button.css";
@import "./checkbox-group.css";
@import "./switch.css";
@import "./select.css";
......
yarn.lock
View file @ 45043754
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment