Merge remote-tracking branch 'eleme/dev' into carbon

# Conflicts:
#	CHANGELOG.en-US.md
#	CHANGELOG.zh-CN.md
#	examples/app.vue
#	examples/index.tpl
#	examples/versions.json
#	package.json
#	packages/dropdown/src/dropdown.vue
#	packages/theme-default/package.json
#	packages/theme-default/src/date-picker/date-picker.css
#	src/index.js
pull/7695/head
Leopoldthecoder 2017-10-24 18:48:54 +08:00
commit 6d3636fbac
10 changed files with 150 additions and 202 deletions

View File

@ -6,42 +6,42 @@
#### New features #### New features
- General - General
- Added TypeScript typings - Added TypeScript typings
- All existing icons are redesigned. Some new icons are added. - All existing icons are redesigned. Some new icons are added.
- To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a - To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a
removed or renamed attribute or event in your project, you'll get a warning like this: removed or renamed attribute or event in your project, you'll get a warning like this:
``` ```
[Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color. [Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
``` ```
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions - Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Layout - Layout
- Added a new breakpoint `xl` for viewport wider than 1920px - Added a new breakpoint `xl` for viewport wider than 1920px
- Table - Table
- Added `span-method` attribute for merging cells - Added `span-method` attribute for merging cells
- Added `clearSort` method to clear sorting programmatically - Added `clearSort` method to clear sorting programmatically
- Added `clearFilter` method to clear filter programmatically - Added `clearFilter` method to clear filter programmatically
- For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles - For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles
- DatePicker - DatePicker
- Added `unlink-panels` attribute to unlink the two date panels when selecting a date range - Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
- Select - Select
- Added `reserve-keyword` attribute for reserving current search keyword after selecting an option - Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
#### Fixes #### Fixes
- Table - Table
- Now `header-align` of TableColumn works properly - Now `header-align` of TableColumn works properly
- Fixed a bug that Table remains hiding when its parent element appears from `display: none` - Fixed a bug that Table remains hiding when its parent element appears from `display: none`
- Fixed Table expanding its width when its parent element has `display: flex` - Fixed Table expanding its width when its parent element has `display: flex`
- Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched - Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
- Fixed `expand-row-keys` attribute not working with initial value - Fixed `expand-row-keys` attribute not working with initial value
- Fixed filter failing when `data` updates - Fixed filter failing when `data` updates
- Fixed a calculation error of fixed columns layout with grouped headers - Fixed a calculation error of fixed columns layout with grouped headers
#### Breaking changes #### Breaking changes
- Switch - Switch
- Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not - Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value` able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
- Table - Table
- `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
### 2.0.0-alpha.3 ### 2.0.0-alpha.3
@ -49,38 +49,38 @@ able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordi
#### New features #### New features
- General - General
- Configure component sizes globally. Now when you import Element, you can add a global config object with a `size` prop to configure default sizes for all components. For fully import: - Configure component sizes globally. Now when you import Element, you can add a global config object with a `size` prop to configure default sizes for all components. For fully import:
```JS ```JS
import Vue from 'vue' import Vue from 'vue'
import Element from 'element-ui' import Element from 'element-ui'
Vue.use(Element, { size: 'small' }) Vue.use(Element, { size: 'small' })
``` ```
For partial import: For partial import:
```JS ```JS
import Vue from 'vue' import Vue from 'vue'
import { Button } from 'element-ui' import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button) Vue.use(Button)
``` ```
With the above config, the default size of all components that have `size` attribute will be 'small'. With the above config, the default size of all components that have `size` attribute will be 'small'.
- Loading - Loading
- Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390 - Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
- Autocomplete - Autocomplete
- Added `debounce` attribute, #7413 - Added `debounce` attribute, #7413
- Upload - Upload
- Added `limit` and `on-exceed` attributes to limit the amount of files, #7405 - Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
- Menu - Menu
- Added `open` and `close` methods to open and close SubMenu programmatically, #7412 - Added `open` and `close` methods to open and close SubMenu programmatically, #7412
- DatePicker - DatePicker
- Added `value-format` attribute to customize the format of the binding value, #7367 - Added `value-format` attribute to customize the format of the binding value, #7367
- TimePicker - TimePicker
- Added `arrow-control` attribute to spin the time with arrows #7438 - Added `arrow-control` attribute to spin the time with arrows #7438
- DateTimePicker - DateTimePicker
- Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438 - Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
- Form - Form
- Form and Form-item now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428 - Form and Form-item now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
- `validate` method will now return a promise if the callback is omitted, #7405 - `validate` method will now return a promise if the callback is omitted, #7405
#### Fixes #### Fixes
- Fixed the console warning `Injection "elFormItem" not found` of some components - Fixed the console warning `Injection "elFormItem" not found` of some components
@ -106,121 +106,129 @@ able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordi
#### New features #### New features
- General - General
- A new theme: `theme-chalk` - A new theme: `theme-chalk`
- Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload - Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
- Layout components: Container, Header, Aside, Main, Footer - Layout components: Container, Header, Aside, Main, Footer
- Button - Button
- Added `round` attribute. It's used for round-cornered Buttons #6643 - Added `round` attribute. It's used for round-cornered Buttons #6643
- TimeSelect - TimeSelect
- Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023 - Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023
- TimePicker - TimePicker
- Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050 - Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169 - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
- Tree - Tree
- Now child nodes don't render before the first expand #6257 - Now child nodes don't render before the first expand #6257
- Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node - Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node
in `lazy` mode #6235 in `lazy` mode #6235
- Tag - Tag
- Added `size` attribute #7203 - Added `size` attribute #7203
- Datepicker - Datepicker
- Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052 - Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169 - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
- MessageBox - MessageBox
- Added `closeOnHashChange` attribute #6043 - Added `closeOnHashChange` attribute #6043
- Added `center` attribute so that the content can be centered #7029 - Added `center` attribute so that the content can be centered #7029
- Added `roundButton` attribute to display round Buttons #7029 - Added `roundButton` attribute to display round Buttons #7029
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043 - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043
- Dialog - Dialog
- Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested - Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested
- Added `center` attribute so that the content can be centered #7042 - Added `center` attribute so that the content can be centered #7042
- Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511 - Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511
- ColorPicker - ColorPicker
- Now you can type colors in the input box #6167 - Now you can type colors in the input box #6167
- Added `size` and `disabled` attributes #7026 - Added `size` and `disabled` attributes #7026
- Message - Message
- Now color of the icons can be overridden by CSS #6207 - Now color of the icons can be overridden by CSS #6207
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207 - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207
- Added `center` attribute so that the content can be centered #6875 - Added `center` attribute so that the content can be centered #6875
- Notification - Notification
- Added `position` attribute to configure where Notification pops up #6231 - Added `position` attribute to configure where Notification pops up #6231
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231 - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231
- Added `showClose` attribute to hide the close button #6402 - Added `showClose` attribute to hide the close button #6402
- Rate - Rate
- Added `show-score` attribute to determine if current score is displayed #6295 - Added `show-score` attribute to determine if current score is displayed #6295
- Tabs - Tabs
- Added `tab-position` attribute #6096 - Added `tab-position` attribute #6096
- Radio - Radio
- Improved accessibility #6101 - Improved accessibility #6101
- Added `border` and `size` attributes #6690 - Added `border` and `size` attributes #6690
- Checkbox - Checkbox
- Added `border` and `size` attributes #6690 - Added `border` and `size` attributes #6690
- Alert - Alert
- Added `center` attribute so that the content can be centered #6876 - Added `center` attribute so that the content can be centered #6876
- Menu - Menu
- Added `background-color`, `text-color` and `active-text-color` attributes #7064 - Added `background-color`, `text-color` and `active-text-color` attributes #7064
- Form - Form
- Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032 - Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032
- Added `status-icon` attribute to display a feedback icon when validated #7032 - Added `status-icon` attribute to display a feedback icon when validated #7032
- Input - Input
- Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032 - Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032
- Breadcrumb - Breadcrumb
- Added `separator-class` attribute to support icons as item separators #7203 - Added `separator-class` attribute to support icons as item separators #7203
- Steps - Steps
- Added `simple` attribute to activate simple-styled Steps #7274 - Added `simple` attribute to activate simple-styled Steps #7274
- Pagination - Pagination
- Added `prev-text` and `next-text` attributes to customize texts of prev page and next page #7005 - Added `prev-text` and `next-text` attributes to customize texts of prev page and next page #7005
#### Bug fixes #### Bug fixes
- DatePicker - DatePicker
- Fixed `v-model` returning the second day of the selected week in week mode #6038 - Fixed `v-model` returning the second day of the selected week in week mode #6038
- Fixed the first input being cleared in `daterange` type #6021 - Fixed the first input being cleared in `daterange` type #6021
- DateTimePicker - DateTimePicker
- Fixed DateTimePicker and TimePicker affecting each other when picked #6090 - Fixed DateTimePicker and TimePicker affecting each other when picked #6090
- Fixed hour and second can be beyond limit when selecting time #6076 - Fixed hour and second can be beyond limit when selecting time #6076
- TimePicker - TimePicker
- Fixed `v-model` not update correctly when blurred #6023 - Fixed `v-model` not update correctly when blurred #6023
- Dialog - Dialog
- Fixed texts having blurry edges when opening and closing nesting dropdowns #6088 - Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
- Select - Select
- Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151 - Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
#### Breaking changes #### Breaking changes
- General - General
- Removed `theme-default` - Removed `theme-default`
- `change` event of form components and `current-change` event of Pagination now only trigger on user interaction - `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
- `size` attribute of Button and form components can no longer be set to `large`. Now they accept `medium`, `small` and `mini` - `size` attribute of Button and form components can no longer be set to `large`. Now they accept `medium`, `small` and `mini`
- To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name - To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name
- Dialog - Dialog
- Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen` - Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`
- Now the visibility of Dialog cannot be controlled by `v-model` - Now the visibility of Dialog cannot be controlled by `v-model`
- Rate - Rate
- `text-template` is renamed to `score-template` - `text-template` is renamed to `score-template`
- Dropdown - Dropdown
- `menu-align` is renamed to `placement`. Now it supports more positions - `menu-align` is renamed to `placement`. Now it supports more positions
- Transfer - Transfer
- `footer-format` is renamed to `format` - `footer-format` is renamed to `format`
- Switch - Switch
- `on-text` and `off-text` attributes now don't have default values - `on-text` and `off-text` attributes now don't have default values
- Tag - Tag
- `type` attribute now accepts `success`, `info`, `warning` and `danger` - `type` attribute now accepts `success`, `info`, `warning` and `danger`
- `close-transition` is renamed to `disable-transitions` - `close-transition` is renamed to `disable-transitions`
- Menu - Menu
- Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color` - Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`
- Input - Input
- Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot - Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
- Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots - Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
- Autocomplete - Autocomplete
- Removed `icon` and `on-icon-click` attributes. Now the icons can be configured using `prefix` or `suffix` named slot - Removed `icon` and `on-icon-click` attributes. Now the icons can be configured using `prefix` or `suffix` named slot
- Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot` - Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
- Table - Table
- Removed support for customizing column template using `inline-template` - Removed support for customizing column template using `inline-template`
- Steps - Steps
- Removed `center` attribute - Removed `center` attribute
- Now the Steps will fill its parent container by default - Now the Steps will fill its parent container by default
## ##
<i><sup>*</sup> 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.</i> <i><sup>*</sup> 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.</i>
### 1.4.8
*2017-10-24*
- Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579
- Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)
- Added `show-timeout` and `hide-timeout` attributes for Dropdown, #7621 (by @phongkt-dev)
### 1.4.7 ### 1.4.7
*2017-10-16* *2017-10-16*
@ -228,7 +236,6 @@ in `lazy` mode #6235
- Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai) - Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)
- Added `allow-focus` attribute for Switch, #7494 (by @breadadams) - Added `allow-focus` attribute for Switch, #7494 (by @breadadams)
### 1.4.6 ### 1.4.6
*2017-09-27* *2017-09-27*

View File

@ -213,6 +213,13 @@
## ##
<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下,确保 `message` 的内容是可信的,**永远不要**将用户提交的内容赋值给 `message` 属性。</i> <i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下,确保 `message` 的内容是可信的,**永远不要**将用户提交的内容赋值给 `message` 属性。</i>
### 1.4.8
*2017-10-24*
- 修复鼠标在折叠的 Menu 子菜单中快速移动时会将菜单收起的问题,#7579
- 修复 DateTimePicker 的快捷菜单过长时,最后一项会被隐藏的问题,#7567by @DuLinRain
- 新增 Dropdown 的 `show-timeout``hide-timeout` 属性,#7621by @phongkt-dev
### 1.4.7 ### 1.4.7
*2017-10-16* *2017-10-16*

View File

@ -18,9 +18,9 @@
> A Vue.js 2.0 UI Toolkit for Web. > A Vue.js 2.0 UI Toolkit for Web.
<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/element'> <!--<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/element'>-->
<img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/element.svg' /> <!--<img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/bD3dKbdDE2F7Ky9LUN1kjTFK/ElemeFE/element.svg' />-->
</a > <!--</a >-->
## Links ## Links
- [Home Page](http://element.eleme.io/) - [Home Page](http://element.eleme.io/)

View File

@ -328,6 +328,8 @@ Besides default size, Dropdown component provides three additional sizes for you
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | | 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 | | trigger | how to trigger | string | hover/click | hover |
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true | | 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 ### Dropdown Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |

View File

@ -407,7 +407,7 @@ Depending on your design, there are several different ways to align your label e
Form component allows you to verify your data, helping you find and correct errors. Form component allows you to verify your data, helping you find and correct errors.
:::demo Just add the `rule` 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). :::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 ```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">

View File

@ -334,6 +334,8 @@ Dropdown 组件提供除了默认值以外的三种尺寸,可以在不同场
| placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | | placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | 触发下拉的行为 | string | hover, click | hover | | trigger | 触发下拉的行为 | string | hover, click | hover |
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true | | hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true |
| show-timeout | 展开下拉菜单的延时 | number | — | 250 |
| hide-timeout | 收起下拉菜单的延时 | number | — | 150 |
### Dropdown Events ### Dropdown Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |

View File

@ -399,7 +399,7 @@
在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。 在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。
::: demo Form 组件提供了表单验证的功能,只需要通过 `rule` 属性传入约定的验证规则,并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator) ::: demo Form 组件提供了表单验证的功能,只需要通过 `rules` 属性传入约定的验证规则,并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
```html ```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name"> <el-form-item label="活动名称" prop="name">

View File

@ -1 +1 @@
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.7":"1.4","2.0.0-beta.1":"2.0"} {"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.8":"1.4","2.0.0-beta.1":"2.0"}

View File

@ -46,6 +46,14 @@
}, },
visibleArrow: { visibleArrow: {
default: true default: true
},
showTimeout: {
type: Number,
default: 250
},
hideTimeout: {
type: Number,
default: 150
} }
}, },
@ -88,14 +96,14 @@
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.visible = true; this.visible = true;
}, 250); }, this.showTimeout);
}, },
hide() { hide() {
if (this.triggerElm.disabled) return; if (this.triggerElm.disabled) return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.visible = false; this.visible = false;
}, 150); }, this.hideTimeout);
}, },
handleClick() { handleClick() {
if (this.triggerElm.disabled) return; if (this.triggerElm.disabled) return;

View File

@ -805,84 +805,6 @@ describe('Table', () => {
}, DELAY); }, DELAY);
}); });
it('reserve-selection', done => {
const getData = function(page = 0) {
let id = 0;
const rows = [];
const row = () => {
return {
id: ++id + page * 10,
date: new Date().getTime()
};
};
let count = 10;
while (--count) {
rows.push(row());
}
return rows;
};
const vm = createVue({
template: `
<el-table ref="table" :row-key="rowKey" :data="testData" @selection-change="change">
<el-table-column type="selection" reserve-selection />
<el-table-column prop="id" label="id" />
<el-table-column prop="date" label="date" />
</el-table>
`,
created() {
this.testData = getData();
},
data() {
return { selected: [], testData: [] };
},
methods: {
rowKey(row) {
return row.id;
},
change(rows) {
this.selected = rows;
}
}
}, true);
setTimeout(_ => {
// click first
vm.$el.querySelectorAll('.el-checkbox')[1].click();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
// go to second page
vm.testData = getData(1);
setTimeout(_ => {
// expect no checked
expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
// click first checkbox
vm.$el.querySelectorAll('.el-checkbox')[1].click();
vm.$el.querySelectorAll('.el-checkbox')[2].click();
setTimeout(_ => {
// back first page
vm.testData = getData();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
// clear
vm.$refs.table.clearSelection();
setTimeout(_ => {
expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
destroyVM(vm);
done();
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);
});
describe('type', () => { describe('type', () => {
const createTable = function(type) { const createTable = function(type) {
return createVue({ return createVue({