diff --git a/packages/picker/demo/index.vue b/packages/picker/demo/index.vue index efd4b3206..3d9588c47 100644 --- a/packages/picker/demo/index.vue +++ b/packages/picker/demo/index.vue @@ -7,8 +7,12 @@ /> - - + + @@ -21,6 +25,10 @@ /> + + + + -``` - -```javascript -export default { - data() { - return { - columns: [ - { text: 'Delaware', disabled: true }, - { text: 'Florida' }, - { text: 'Georqia' } - ] - }; - } -}; + ``` #### Show Toolbar @@ -81,6 +71,26 @@ export default { }; ``` +#### Disable option + +```html + +``` + +```javascript +export default { + data() { + return { + columns: [ + { text: 'Delaware', disabled: true }, + { text: 'Florida' }, + { text: 'Georqia' } + ] + }; + } +}; +``` + #### Multi columns ```html @@ -137,6 +147,7 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show | confirm-button-text | Text of confirm button | `String` | `Confirm` | | cancel-button-text | Text of cancel button | `String` | `Cancel` | | visible-item-count | Count of visible columns | `Number` | `5` | +| default-index | Default value index of single column picker | `Number` | `0` | ### Event Picker events will pass different parameters according to the columns are single or multiple diff --git a/packages/picker/index.js b/packages/picker/index.js index 546706c6b..702ebc7fe 100644 --- a/packages/picker/index.js +++ b/packages/picker/index.js @@ -11,6 +11,10 @@ export default sfc({ props: { ...pickerProps, columns: Array, + defaultIndex: { + type: Number, + default: 0 + }, valueKey: { type: String, default: 'text' @@ -185,7 +189,7 @@ export default sfc({ valueKey={this.valueKey} className={item.className} itemHeight={this.itemHeight} - defaultIndex={item.defaultIndex} + defaultIndex={item.defaultIndex || this.defaultIndex} visibleItemCount={this.visibleItemCount} initialOptions={this.simple ? item : item.values} onChange={() => { diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap index fd7f2fffa..49e853d8f 100644 --- a/packages/picker/test/__snapshots__/demo.spec.js.snap +++ b/packages/picker/test/__snapshots__/demo.spec.js.snap @@ -22,10 +22,12 @@ exports[`renders demo correctly 1`] = `
-
    -
  • 杭州
  • -
  • 宁波
  • -
  • 温州
  • +
      +
    • 杭州
    • +
    • 宁波
    • +
    • 温州
    • +
    • 嘉兴
    • +
    • 湖州
@@ -53,6 +55,20 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+
    +
  • 杭州
  • +
  • 宁波
  • +
  • 温州
  • +
+
+
+
+
+
diff --git a/packages/picker/zh-CN.md b/packages/picker/zh-CN.md index f38ca7356..6f883a3e2 100644 --- a/packages/picker/zh-CN.md +++ b/packages/picker/zh-CN.md @@ -10,9 +10,10 @@ Vue.use(Picker); ### 代码演示 - #### 基础用法 +对于单列选择器,传入数值格式的 columns 即可,同时可以监听选项改变的 change 事件 + ```html ``` @@ -32,29 +33,22 @@ export default { }; ``` -#### 禁用选项 -选项可以为对象结构,通过设置 disabled 来禁用该选项 +#### 默认选中项 + +单列选择器可以直接通过`default-index`属性设置初始选中项的索引值 ```html - -``` - -```javascript -export default { - data() { - return { - columns: [ - { text: '杭州', disabled: true }, - { text: '宁波' }, - { text: '温州' } - ] - }; - } -}; + ``` #### 展示顶部栏 +通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏,并可以监听对应的`confirm`和`cancel`事件 + ```html +``` + +```javascript +export default { + data() { + return { + columns: [ + { text: '杭州', disabled: true }, + { text: '宁波' }, + { text: '温州' } + ] + }; + } +}; +``` + #### 多列联动 ```html @@ -120,7 +136,8 @@ export default { ``` #### 加载状态 -当 Picker 数据是通过异步获取时,可以通过 `loading` 属性显示加载提示 + +若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示 ```html @@ -139,6 +156,7 @@ export default { | confirm-button-text | 确认按钮文字 | `String` | `确认` | - | | cancel-button-text | 取消按钮文字 | `String` | `取消` | - | | visible-item-count | 可见的选项个数 | `Number` | `5` | - | +| default-index | 单列选择器的默认选中项索引,
多列选择器请参考下方的 Columns 配置 | `Number` | `0` | 1.6.9 | ### Event