Review: radio/rate/select/slider (#1001)

da3b2f42 · 杨奕 · FuryBean · b215f71d · da3b2f42 · da3b2f42
Commit da3b2f42 authored Nov 11, 2016 by 杨奕 Committed by FuryBean Nov 11, 2016
20 changed files
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
-## 更新日志
+## Changelog
-### 1.0.0
+### 1.0.1
-*2016-11-9*
- 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
- 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
- 修复 Input blur 事件的参数不是 event 对象的问题
-### 1.0.0-rc.9
-*2016-11-07*
- 新增 MessageBox 确定按钮自动获取焦点, #721
- 修复 Popover focus 失效, #734
- 修复 Clickoutside 报错, #729
- 修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错
- 更新 TimePicker 滚动条在 IE10+ 下隐藏
- 新增 Dropdown 的 command api #432
- 修复 Slider 在 Form 中的显示问题
- 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
- 改善 tabs 现在支持动态更新
- Table 新增 highlightCurrentRow 属性、新增 current-change 事件
- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
- TableColumn 新增属性 render-header
- Pagination 新增属性 pageCount
- DatePicker 修复重置 value 后默认选中日期没有重置, #878
-#### 非兼容性更新
- Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)
-### 1.0.0-rc.8
-*2016-10-28*
- 修复 Form reset method 对日期控件不起效的问题
- 修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误
- 修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题
- 修复 Autocomplete 的弹出框不会消失 #439
- 新增 Input 图标的点击事件 #444
- 修复 Loading 关闭后有几率滚动失效的问题
- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
- 修复 Switch 的 width 属性无效的问题
- Table 增加 rowClassName 属性
- TableColumn 增加 fixed 属性，可选值：true, false, left, right
- TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue
- TableColumn[type="selection"] 增加 selectable 属性
- 修复 Input textarea 在动态赋值时 autosize 没有触发的问题
- 修复 Input Number min max 属性设置后点击加减出现的崩溃的bug
- 优化 TimePicker/DatePicker 输入日期行为
- 修复 DatePicker 输入禁用状态的日期却生效的问题 #484
- 新增 Slider 的 disabled 属性
- 新增 Menu 的 menu-trigger 属性
- 新增 i18n 的支持
-#### 非兼容性更新
- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例
- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
- Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode
- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
- Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change
-### 1.0.0-rc.7
-*2016-10-13*
- Upload 新增 Data 属性支持额外数据的传输
- DatePicker 修复 `$t` 报错
- Popper 重构 vue-popper
- Pagination 修复输入后再点击切换，输入框的值不更新
- Step: 修复自定义 icon 的样式
- 修复 Tree 组件 checkbox 点击失效的问题
- Breadcrumb 增加路由跳转的功能
- 修复 可清空的 Select 中清空按钮的不恰当动画
- DatePicker 修复使用 Tab 键切换时弹出框未隐藏
-### 1.0.0-rc.6
-*2016-10-11*
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
+*2016-XX-XX*
- 修复 TimePicker 错误的隐藏面板
- 修复 Table Cell 的样式, #204
- 修复 Menu default-active 属性不能为空的问题, #200
- 修复 Menu unique-opened 开启后无法展开子菜单的问题, #200
- 为 Notification 和 Message 的不同 type 添加独立的调用方法
- 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
- 新增 Input textarea 类型的 rows, autosize 属性
- 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
- 新增 DatePicker 禁用日期功能 #253
- 修复 多选可搜索的 Select 下拉选项自动展开的问题
- 为 Dialog 添加 top 属性
- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
- Checkbox change 事件现在只能被人为的交互操作所触发
- 新增 Checkbox checked 属性
- 修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题
-#### 非兼容性更新
+- Fixed Pagination improperly triggering multiple `current-change` events
+- Fixed Switch style when nested in a Form, #967
+- Fixed Loading locks scroll of `body` in specific scenarios, #968
+- `span` of Col is no longer a required attribute, and its default value is `24` if omitted
- Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式
+### 1.0.0
-### 1.0.0-rc.5
-*2016-09-30*
- 修复 Table 头部不同步的问题
- 修复 Menu 组件 default-active 绑定动态值无法更新的问题
- 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单
- 修复 vue-popper 引入 popper 路径错误
- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
- 修复 Pagination 的图标没有正确切换样式, #163
- 修复 Row 组件 align 属性不生效的问题
- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
- 新增 Menu 组件中 MenuItem 的 route 属性
-#### 非兼容性更新
- Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
-### 1.0.0-rc.4
-*2016-09-21*
- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
- 修复 Time Picker 时间选择可滚动
- 修复 Tooltip 有时会错位的问题
- 修复 丢失的组件 css 文件
- 修复 Table 在 Safari 下边框没对齐
- 修复 TimePicker 图标样式被默认图标样式覆盖
- 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
- 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
- 修复 Table 初次渲染时宽度重新计算 #78
- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
- 新增 TableColumn 的 align 属性
- 新增 autocomplete 的 select 事件
-#### 非兼容性更新
- Select 组件样式的 `display` 属性默认值修改为 `block`
-### 1.0.0-rc.3
-*2016-09-09*
- 修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题
- 修复 Steps 样式
- 修复 无法安装的问题
-### 1.0.0-rc.2
-*2016-09-09*
- 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
- Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
- 修复 Table 自定义模板中渲染静态数据错误
- 修复 Table 中被固定列的高度不与其他列的高度协调的问题
- 修复 Time Picker 的 `picker-options` 属性
- 修复一些组件图标丢失的问题
- 修复 远程搜索的 Select 在 Form 中的显示问题
- 修复 Input Number 输入小数和非数字值时的问题
- 修复 Select 选中 value 为 0 的值时绑定值不更新的问题
- 修复 Tree 取消选择某节点后，其同级节点均被取消的问题
- 修复 Upload 的 headers 属性设置无效
- 修复 Pagination 包含 sizes 子组件时 page-size 无效的问题
- 优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs
-#### 非兼容性更新
- Menu 组件 `mode` 属性默认值修改为 `vertical`
- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档
- Popover 现在可以通过 slot 指定 reference
-### 1.0.0-rc.1
-*2016-08-30*
+*2016-11-9*
-Element 1.0.0-rc.1 发布
+Element 1.0.0 released.
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
 ## 更新日志
+### 1.0.1
+*2016-XX-XX*
+- 修复 Pagination 错误地多次触发 `current-change` 事件的问题
+- 修复 Switch 在 Form 中的样式错误，#967
+- 修复 Loading 在某些情况下错误地锁定 `body` 滚动的问题，#968
+- Col 组件的 `span` 属性不再是必填属性，在省略的情况下其默认值为 `24`
 ### 1.0.0
 *2016-11-9*

--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -267,7 +267,7 @@ Picking a date range is supported.
 | readonly | if the picker is read only | boolean | — | false |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`，<br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | picker-options | additional options, check the table below | object | — | {} |

--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -234,7 +234,7 @@ Select date and time in one picker.
 | readonly | if the picker is read only | boolean | — | false |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`，<br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | picker-options | additional options, check the table below | object | — | {} |

--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
 <script>
  var Vue = require('vue');
-  Vue.component('my-item', {
+  Vue.component('my-item-en', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;
@@ -56,7 +56,6 @@
      querySearchAsync(queryString, cb) {
        var links = this.links;
        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-        console.log(results);
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
@@ -82,7 +81,7 @@
 </script>
 <style>
-  .demo-input {
+  .demo-input.demo-en-US {
    .el-select .el-input {
      width: 100px;
    }
@@ -346,14 +345,14 @@ Customize how suggestions are displayed.
  class="my-autocomplete"
  v-model="state3"
  :fetch-suggestions="querySearch"
-  custom-item="my-item"
+  custom-item="my-item-en"
  placeholder="Please input"
  @select="handleSelect"
 ></el-autocomplete>
 <script>
  var Vue = require('vue');
-  Vue.component('my-item', {
+  Vue.component('my-item-en', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;

--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -173,7 +173,7 @@ Flexible alignment of columns.
 ### Col Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| **span** | number of column the grid spans, **required** | number | — | — |
+| span | number of column the grid spans | number | — | — |
 | 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 |

--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -3,6 +3,7 @@
    methods: {
      open() {
        this.$alert('This is a message', 'Title', {
+          confirmButtonText: 'OK',
          callback: action => {
            this.$message({
              type: 'info',
@@ -14,6 +15,8 @@
      open2() {
        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
@@ -34,6 +37,8 @@
      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 }) => {
@@ -57,7 +62,9 @@
        this.$msgbox({
          title: 'Message',
          message: 'This is a message',
-          showCancelButton: true
+          showCancelButton: true,
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel'
        }).then(action => {
          setTimeout(() => {
            this.$message({
@@ -92,6 +99,7 @@ Alert interrupts user operation until the user confirms.
    methods: {
      open() {
        this.$alert('This is a message', 'Title', {
+          confirmButtonText: 'OK',
          callback: action => {
            this.$message({
              type: 'info',
@@ -122,6 +130,8 @@ Confirm is used to ask users' confirmation.
    methods: {
      open2() {
        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          this.$message({
@@ -158,6 +168,8 @@ Prompt is used when user input is required.
    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 => {
@@ -196,7 +208,9 @@ Can be customized to show various content.
        this.$msgbox({
          title: 'Message',
          message: 'This is a message',
-          showCancelButton: true
+          showCancelButton: true,
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel'
        }).then(action => {
          this.$message({
            type: 'info',

--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@@ -13,16 +13,13 @@
 ## Radio
-A single selection is made in a set of alternatives.
+Single selection among multiple options.
-### How to use
+### Basic usage
-As the option is visible by default, there should not be too many options. If too many options, the Select component is recommended.
+Radio should not have too many options. Otherwise, use the Select component instead.
-Creating a radio component is easy, you just need to bind a variable by `v-bind` directive, and it means that the value of bound variable is equals to the value of `label` of which the `radio` you select. The type of `label` is `String` or `Number`.
-:::demo
+:::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` or `Number`.
 ```html
 <template>
  <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
@@ -43,13 +40,12 @@ Creating a radio component is easy, you just need to bind a variable by `v-bind`
 ### Disabled
-`disabled` attribute is used to disable radio button. You just need to add `disabled` attribute, and default value is `true`.
+`disabled` attribute is used to disable the radio.
-:::demo
+:::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="diabaled">optionA</el-radio>
+  <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
 </template>
@@ -67,11 +63,9 @@ Creating a radio component is easy, you just need to bind a variable by `v-bind`
 ### Radio button group
-Applicable to scenes selecting from multiple mutex options. 
+Suitable for choosing from some mutually exclusive options. 
-Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable in `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event to respond to the change of bound value.
+:::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.
-:::demo
 ```html
 <el-radio-group v-model="radio2">
@@ -80,52 +74,57 @@ Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a va
  <el-radio :label="9">optionC</el-radio>
 </el-radio-group>
 ```
 :::
 ### Button style
 Radio with button styles.
-You just need to change `<el-radio>` element into `<el-radio-button>` element. Element also provides `size` attribute for the buttons array. There are two options: `large` and `small` if not default.
+:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
-:::demo
 ```html
 <el-radio-group v-model="radio3">
-  <el-radio-button label="New York" size="small"></el-radio-button>
+  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington" size="large"></el-radio-button>
+  <el-radio-button label="Washington"></el-radio-button>
  <el-radio-button label="Los Angeles" :disabled="true"></el-radio-button>
  <el-radio-button label="Chicago"></el-radio-button>
 </el-radio-group>
-```
+<script>
+  export default {
+    data () {
+      return {
+        radio3: ''
+      };
+    }
+  }
+</script>
+```
 :::
 ### Radio Attributes
-Attribute | Description | Type | options | Default 
+ Attribute      | Description          | Type      | Accepted Values       | Default  
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string, number | --- | ---
+label | the value of radio | string/number | — | —
-disabled | whether disabled or not | boolean | --- | false
+disabled | whether radio is disabled | boolean | — | false
 ### Radio-group Attributes
-Attribute | Description | Type | options | Default 
+ Attribute      | Description          | Type      | Accepted Values       | Default  
 ---- | ---- | ---- | ---- | ----
-size | the size of radio button | string | large, small | ---
+size | the size of radio buttons | string | large/small | —
 ### Radio-group Events
-Event | Description | callback parameters 
+| Event Name | Description | Parameters |
 --- | --- | ---
-change | event triggered when the bound variable changes | the label value of the radio which you select
+change | triggers when the bound value changes | the label value of the chosen radio
 ### Radio-button Attributes
-Attribute | Description | Type | options | Default 
+ Attribute      | Description          | Type      | Accepted Values       | Default  
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string, number | --- | ---
+label | the value of radio | string/number | — | —
-disabled | whether disabled or not | boolean | --- | false
+disabled | whether radio is disabled | boolean | — | false
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -13,73 +13,73 @@
      this.$nextTick(() => {
        let firstDemo = document.querySelector('.source');
        firstDemo.style.padding = '0';
-        firstDemo.style.display = 'flex';
      });
    }
  }
 </script>
-<style>
-  .demo-rate .block {
-    display: inline-block;
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-rate .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
 ## Rate
-Rate component
+Used for rating
-### How to use
+### Basic usage
-:::demo This component separate rate into three different levels and add colors to different rate (there is no color by default). Add colors by attribute `colors`. And using `low-threshold` and `high-threshold` to set thrasholds between different levels  
+:::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">no color by default</span>
+  <span class="demonstration">Default</span>
  <el-rate v-model="value1"></el-rate>
 </div>
 <div class="block">
-  <span class="demonstration">color for different levels</span>
+  <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>
 ```
 :::
-### Help Text
+### With text
-Using help text to indicate the rate
+Using text to indicate rating score
-:::demo Add attribute `show-text` to the component to display help text at the right side. The help texts for each rate can be defined by `texts`. `texts` is array, its length should be `max`.
+:::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>
 ```
 :::
-### Additional Icon
+### More icons
 You can use different icons to distinguish different rate components.
-:::demo You can customize the icons for different level by attribute `icon-classes`. Following example also uses `void-icon-class` to set the icon when rate is empty.
+:::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
@@ -88,14 +88,23 @@ You can use different icons to distinguish different rate components.
  void-icon-class="icon-rate-face-off"
  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
+<script>
+  export default {
+    data() {
+      return {
+        value4: null
+      }
+    }
+  }
+</script>
 ```
 :::
 ### Read-only
-Only display the rate and allow to set half star.
+Read-only Rate is for displaying rating score. Half star is supported.
-:::demo Use attribute `disabled` to make the component read-only. Meanwhile, add `show-text` to display the rate value at the right side. Additionally, you can use attribute `text-template` to create a template, it contains a string `{value}`, and `{value}` will be converted to rate value.
+:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 ``` html
 <el-rate
@@ -103,31 +112,40 @@ Only display the rate and allow to set half star.
  disabled
  show-text
  text-color="#ff9900"
-  text-template="{value}">
+  text-template="{value} points">
 </el-rate>
+<script>
+  export default {
+    data() {
+      return {
+        value5: 3.7
+      }
+    }
+  }
+</script>
 ```
 :::
 ### Attributes
-| Attribute      | Description    | Type      | Options       | Default   |
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| max | Max rate | number | — | 5 |
+| max | max rating score | number | — | 5 |
-| disabled | Read-only | boolean | — | false |
+| disabled | whether Rate is read-only | boolean | — | false |
-| allow-half | Allow set half star or not | boolean | — | false |
+| allow-half | whether picking half start is allowed | boolean | — | false |
-| low-threshold | Threshold value for low and medium level，this is value itself will be in low level | number | — | 2 |
+| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
-| high-threshold | Threshold value for medium and high level，this is value itself will be in high level | number | — | 4 |
+| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
-| colors | Color array for icon, it should contain 3 colors, each one for a level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| 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 icon | string | — | #C6D1DE |
+| void-color | color of unselected icons | string | — | #C6D1DE |
-| disabled-void-color | Color of unselected read-only icon | string | — | #EFF2F7 |
+| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  Array of class names of icon, it should contain 3 elements，each of them is associated with a rate level | array | — | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| 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',<br>'el-icon-star-on'] |
-| void-icon-class | The class name of unselected icon | string | — | el-icon-star-off |
+| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
-| disabled-void-icon-class | The class name of unselected read-only icon | string | — | el-icon-star-on |
+| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
-| show-text | Display help text or not | boolean | — | false |
+| show-text | whether to display texts | boolean | — | false |
-| text-color | Color of help text | string | — | 1F2D3D |
+| text-color | color of texts | string | — | 1F2D3D |
-| texts | Help text array | array | — | ['Bad', 'Disappoint', 'Normal', 'Satisfy', 'Surprise'] |
+| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | Help text template when the component is read-only| string | — | {value} |
+| text-template | text template when the component is read-only | string | — | {value} |
 ### Events
-| Event      | Description    | Callback      |
+| Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change | Trigerred when rate value is changed | value after changing |
+| change | Triggers when rate value is changed | value after changing |
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
--- a/examples/docs/en-US/slider.md
+++ b/examples/docs/en-US/slider.md
@@ -4,46 +4,20 @@
      return {
        value1: 0,
        value2: 50,
-        value3: 0,
+        value3: 42,
        value4: 0,
-        value5: 0
+        value5: 0,
+        value6: 0
      };
    }
  }
 </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 
-Select within a fixed interval by dragging the slider.
+Drag the slider within a fixed range.
-### How to use
+### Basic usage
 The current value is displayed when the slider is being dragged.
@@ -59,6 +33,10 @@ The current value is displayed when the slider is being dragged.
    <span class="demonstration">Customized initial value</span>
    <el-slider v-model="value2"></el-slider>
  </div>
+  <div class="block">
+    <span class="demonstration">Disabled</span>
+    <el-slider v-model="value3" disabled></el-slider>
+  </div>
 </template>
 <script>
@@ -66,7 +44,8 @@ The current value is displayed when the slider is being dragged.
    data() {
      return {
        value1: 0,
-        value2: 50
+        value2: 50,
+        value3: 42
      }
    }
  }
@@ -74,25 +53,25 @@ The current value is displayed when the slider is being dragged.
 ```
 :::
-### Discrete value
+### Discrete values
 The options can be discrete.
-:::demo Change the value of `step` to change the step size. You can display breakpoints by setting the `show-step` attribute.
+:::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 are not displayed</span>
+    <span class="demonstration">Breakpoints not displayed</span>
    <el-slider
-      v-model="value3"
+      v-model="value4"
      :step="10">
    </el-slider>  
  </div>
  <div class="block">
-    <span class="demonstration">Displays the breakpoints</span>
+    <span class="demonstration">Breakpoints displayed</span>
    <el-slider
-      v-model="value4"
+      v-model="value5"
      :step="10"
      show-stops>
    </el-slider>
@@ -103,8 +82,8 @@ The options can be discrete.
  export default {
    data() {
      return {
-        value3: 0,
+        value4: 0,
-        value4: 0
+        value5: 0
      }
    }
  }
@@ -112,17 +91,17 @@ The options can be discrete.
 ```
 :::
-### Slide with input box
+### Slider with input box
-Set the exact value via the input box.
+Set value via a input box.
-:::demo Set the `show-input` attribute to display an inputbox on the right.
+:::demo Set the `show-input` attribute to display an input box on the right.
 ```html
 <template>
  <div class="block">
    <el-slider
-      v-model="value5"
+      v-model="value6"
      show-input>
    </el-slider>  
  </div>
@@ -132,7 +111,7 @@ Set the exact value via the input box.
  export default {
    data() {
      return {
-        value5: 0
+        value6: 0
      }
    }
  }
@@ -141,16 +120,17 @@ Set the exact value via the input box.
 :::
 ## Attributes
-| Attribute      | Description          | Type      | Options                           | Default  |
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| min | The minimum value | number | — | 0 |
+| min | minimum value | number | — | 0 |
-| max | The maximum value | number | — | 100 |
+| max | maximum value | number | — | 100 |
-| step | Step size | number | — | 1 |
+| disabled | whether Slider is disabled | boolean | — | false |
-| show-input | Whether to display the input box | boolean | — | false |
+| step | step size | number | — | 1 |
-| show-stops | Whether to display breakpoints | boolean | — | false |
+| show-input | whether to display an input box | boolean | — | false |
+| show-stops | whether to display breakpoints | boolean | — | false |
 ## Events
-| Event      | Description    | Callback      |
+| Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change | Triggered when the value changes | the Value after the change |
+| change | triggers when the value changes | value after changing |
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -159,4 +159,4 @@ Can pick an arbitrary time range.
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range，e.g.<br>`'18:30:00 - 20:30:00'`<br>or<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | available time range, e.g.<br>`'18:30:00 - 20:30:00'`<br>or<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
 <script>
  var Vue = require('vue');
-  Vue.component('my-item', {
+  Vue.component('my-item-zh', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;
@@ -16,6 +16,7 @@
  export default {
    data() {
      return {
+        restaurants: [],
        input: '',
        input1: '',
        input2: '',
@@ -121,7 +122,7 @@
 </script>
 <style>
-  .demo-input {
+  .demo-input.demo-zh-CN {
    .el-select .el-input {
      width: 100px;
    }
@@ -507,7 +508,7 @@ export default {
  class="my-autocomplete"
  v-model="state3"
  :fetch-suggestions="querySearch"
-  custom-item="my-item"
+  custom-item="my-item-zh"
  placeholder="请输入内容"
  @select="handleSelect"
 ></el-autocomplete>
@@ -535,7 +536,7 @@ export default {
 </style>
 <script>
-  Vue.component('my-item', {
+  Vue.component('my-item-zh', {
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;

--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -172,7 +172,7 @@
 ### Col Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| **span** | 栅格占据的列数，**必选参数** | number | — | — |
+| span | 栅格占据的列数 | number | — | — |
 | offset | 栅格左侧的间隔格数 | number | — | 0 |
 | push |  栅格向右移动格数 | number | — | 0 |
 | pull |  栅格向左移动格数 | number | — | 0 |
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -3,6 +3,7 @@
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
+          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
@@ -14,6 +15,8 @@
      open2() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
@@ -34,6 +37,8 @@
      open3() {
        this.$prompt('请输入邮箱', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
@@ -58,7 +63,9 @@
        this.$msgbox({
          title: '消息',
          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
-          showCancelButton: true
+          showCancelButton: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
        }).then(action => {
          setTimeout(() => {
            this.$message({
@@ -90,6 +97,7 @@
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
+          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
@@ -120,6 +128,8 @@
    methods: {
      open2() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
@@ -155,6 +165,8 @@
    methods: {
      open3() {
        this.$prompt('请输入邮箱', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
@@ -193,7 +205,9 @@
        this.$msgbox({
          title: '消息',
          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
-          showCancelButton: true
+          showCancelButton: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
        }).then(action => {
          this.$message({
            type: 'info',

--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -133,7 +133,7 @@
 :::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
 ```html
 <template>
-  <el-select v-model="value">
+  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"
@@ -175,7 +175,7 @@
 :::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
 ```html
 <template>
-  <el-select v-model="value2">
+  <el-select v-model="value2" placeholder="请选择">
    <el-option
      v-for="item in options2"
      :label="item.label"
@@ -221,7 +221,7 @@
 :::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
 ```html
 <template>
-  <el-select v-model="value3" disabled>
+  <el-select v-model="value3" disabled placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"
@@ -265,7 +265,7 @@
 :::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
 ```html
 <template>
-  <el-select v-model="value4" clearable>
+  <el-select v-model="value4" clearable placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"
@@ -309,7 +309,7 @@
 :::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
 ```html
 <template>
-  <el-select v-model="value5" multiple>
+  <el-select v-model="value5" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"
@@ -353,7 +353,7 @@
 :::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
 ```html
 <template>
-  <el-select v-model="value6">
+  <el-select v-model="value6" placeholder="请选择">
    <el-option
      v-for="item in cities"
      :label="item.label"
@@ -402,7 +402,7 @@
 :::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
 ```html
 <template>
-  <el-select v-model="value7">
+  <el-select v-model="value7" placeholder="请选择">
    <el-option-group
      v-for="group in options3"
      :label="group.label">
@@ -459,7 +459,7 @@
 :::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
 ```html
 <template>
-  <el-select v-model="value8" filterable>
+  <el-select v-model="value8" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :label="item.label"

--- a/examples/docs/zh-CN/slider.md
+++ b/examples/docs/zh-CN/slider.md
@@ -7,7 +7,7 @@
        value3: 42,
        value4: 0,
        value5: 0,
-        value6: 0,
+        value6: 0
      };
    }
  }

--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
    "async-validator": "^1.6.6",
    "deepmerge": "^1.2.0",
    "throttle-debounce": "^1.0.1",
-    "vue-popup": "^0.2.9",
+    "vue-popup": "^0.2.10",
    "wind-dom": "0.0.3"
  },
  "peerDependencies": {

--- a/packages/col/src/col.vue
+++ b/packages/col/src/col.vue
@@ -19,7 +19,7 @@
    props: {
      span: {
        type: Number,
-        required: true
+        default: 24
      },
      offset: Number,
      pull: Number,

--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
 import PopperJS from './popper';
 import { PopupManager } from 'vue-popup';
-PopupManager.zIndex = 2000;
 /**
 * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.