diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap index 50ac653fc..95d25e6dc 100644 --- a/src/area/test/__snapshots__/demo.spec.js.snap +++ b/src/area/test/__snapshots__/demo.spec.js.snap @@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -183,7 +183,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -377,7 +377,7 @@ exports[`renders demo correctly 1`] = `
-
+
标题
@@ -506,7 +506,7 @@ exports[`renders demo correctly 1`] = `
-
+
标题
diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap index c5cbf4a68..42c8863fb 100644 --- a/src/area/test/__snapshots__/index.spec.js.snap +++ b/src/area/test/__snapshots__/index.spec.js.snap @@ -2,7 +2,7 @@ exports[`change option 1`] = `
-
+
@@ -44,7 +44,7 @@ exports[`change option 1`] = ` exports[`change option 2`] = `
-
+
@@ -86,7 +86,7 @@ exports[`change option 2`] = ` exports[`change option 3`] = `
-
+
@@ -128,7 +128,7 @@ exports[`change option 3`] = ` exports[`columns-num prop 1`] = `
-
+
@@ -160,7 +160,7 @@ exports[`columns-num prop 1`] = ` exports[`columns-top、columns-bottom slot 1`] = `
-
+
Top
    @@ -180,7 +180,7 @@ exports[`columns-top、columns-bottom slot 1`] = ` exports[`reset method 1`] = `
    -
    +
    @@ -219,7 +219,7 @@ exports[`reset method 1`] = ` exports[`reset method 2`] = `
    -
    +
    @@ -261,7 +261,7 @@ exports[`reset method 2`] = ` exports[`title slot 1`] = `
    -
    Custom Title
    +
    Custom Title
    @@ -282,38 +282,17 @@ exports[`title slot 1`] = ` exports[`watch areaList & code 1`] = `
    -
    +
    -
      -
    • -
      北京市
      -
      • -
    • -
      天津市
      -
      • -
    +
      -
        -
      • -
        北京市
        -
        • -
      • -
        县
        -
        • -
      +
        -
          -
        • -
          东城区
          -
          • -
        • -
          西城区
          -
          • -
        +
          @@ -324,7 +303,7 @@ exports[`watch areaList & code 1`] = ` exports[`watch areaList & code 2`] = `
          -
          +
          @@ -366,7 +345,7 @@ exports[`watch areaList & code 2`] = ` exports[`watch areaList & code 3`] = `
          -
          +
          diff --git a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap index 5ec919ec2..1489ea5bc 100644 --- a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap @@ -2,7 +2,7 @@ exports[`filter prop 1`] = `
          -
          +
          @@ -112,7 +112,7 @@ exports[`filter prop 1`] = ` exports[`formatter prop 1`] = `
          -
          +
          diff --git a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap index 331b19cc8..93186057a 100644 --- a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap @@ -2,7 +2,7 @@ exports[`time type 1`] = `
          -
          +
          diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap index 158a86576..6fdef11ee 100644 --- a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap @@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          @@ -434,7 +434,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          @@ -604,7 +604,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          @@ -677,7 +677,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          @@ -909,7 +909,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          diff --git a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap index 0fd678721..ec25eb174 100644 --- a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap @@ -2,7 +2,7 @@ exports[`filter prop 1`] = `
          -
          +
          @@ -55,7 +55,7 @@ exports[`filter prop 1`] = ` exports[`format initial value 1`] = `
          -
          +
          @@ -87,7 +87,7 @@ exports[`format initial value 1`] = ` exports[`formatter prop 1`] = `
          -
          +
          @@ -140,7 +140,7 @@ exports[`formatter prop 1`] = ` exports[`max-hour & max-minute 1`] = `
          -
          +
          diff --git a/src/picker/README.md b/src/picker/README.md index 4045b4a33..2d40ac899 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -17,42 +17,14 @@ Vue.use(Picker); ### Basic Usage -```html - -``` - -```js -import { Toast } from 'vant'; - -export default { - data() { - return { - columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], - }; - }, - methods: { - onChange(picker, value, index) { - Toast(`Value: ${value}, Index: ${index}`); - }, - }, -}; -``` - -### Default Index - -```html - -``` - -### Show Toolbar - ```html ``` @@ -69,6 +41,9 @@ export default { onConfirm(value, index) { Toast(`Value: ${value}, Index: ${index}`); }, + onChange(picker, value, index) { + Toast(`Value: ${value}, Index: ${index}`); + }, onCancel() { Toast('Cancel'); }, @@ -76,6 +51,12 @@ export default { }; ``` +### Default Index + +```html + +``` + ### Multiple Columns ```html @@ -147,7 +128,7 @@ export default { ### Disable option ```html - + ``` ```js @@ -167,7 +148,7 @@ export default { ### Set Column Values ```html - + ``` ```js @@ -195,7 +176,7 @@ export default { When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt ```html - + ``` ```js @@ -226,8 +207,9 @@ export default { placeholder="Choose City" @click="showPicker = true" /> - + -``` +Picker 组件通过`columns`属性配置选项数据，`columns`是一个包含字符串或对象的数组。 -```js -import { Toast } from 'vant'; +#### 顶部栏 -export default { - data() { - return { - columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], - }; - }, - methods: { - onChange(picker, value, index) { - Toast(`当前值：${value}, 当前索引：${index}`); - }, - }, -}; -``` - -### 默认选中项 - -单列选择时，可以通过`default-index`属性设置初始选中项的索引 - -```html - -``` - -### 展示顶部栏 - -设置`show-toolbar`属性后会展示顶部操作栏，点击确认按钮触发`confirm`事件，点击取消按钮触发`cancel`事件 +设置`show-toolbar`属性后会展示顶部操作栏，顶部栏包含标题、确认按钮和取消按钮，点击确认按钮触发`confirm`事件，点击取消按钮触发`cancel`事件 ```html ``` @@ -75,6 +49,9 @@ export default { onConfirm(value, index) { Toast(`当前值：${value}, 当前索引：${index}`); }, + onChange(picker, value, index) { + Toast(`当前值：${value}, 当前索引：${index}`); + }, onCancel() { Toast('取消'); }, @@ -82,9 +59,17 @@ export default { }; ``` +### 默认选中项 + +单列选择时，可以通过`default-index`属性设置初始选中项的索引 + +```html + +``` + ### 多列选择 -通过`columns`属性可以配置多列选择 +`columns`属性可以通过对象数组的形式配置多列选择，对象中可以配置选项数据、初始选中项等，详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。 ```html @@ -163,7 +148,7 @@ export default { 选项可以为对象结构，通过设置 disabled 来禁用该选项 ```html - + ``` ```js @@ -185,7 +170,7 @@ export default { 通过 Picker 上的实例方法可以更灵活地控制选择器，比如使用`setColumnValues`方法实现多列联动 ```html - + ``` ```js @@ -213,7 +198,7 @@ export default { 若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示 ```html - + ``` ```js @@ -246,7 +231,7 @@ export default { placeholder="选择城市" @click="showPicker = true" /> - + - - - - - - - - + + + + @@ -43,15 +40,24 @@ - + - + - + @@ -63,9 +69,10 @@ :placeholder="t('chooseCity')" @click="onClickField" /> - + +
          {this.slots() || [ +
          标题
          @@ -94,7 +36,39 @@ exports[`renders demo correctly 1`] = `
          -
          +
          +
          标题
          +
          + +
          +
          +
            +
          • +
            杭州
            +
            • +
          • +
            宁波
            +
            • +
          • +
            温州
            +
            • +
          • +
            嘉兴
            +
            • +
          • +
            湖州
            +
            • +
          +
          +
          +
          +
          + +
          +
          +
          +
          +
          标题
          @@ -139,7 +113,7 @@ exports[`renders demo correctly 1`] = `
          -
          +
          标题
          @@ -182,6 +156,9 @@ exports[`renders demo correctly 1`] = `
          +
          +
          标题
          +
          @@ -205,6 +182,9 @@ exports[`renders demo correctly 1`] = `
          +
          +
          标题
          +
          @@ -244,6 +224,9 @@ exports[`renders demo correctly 1`] = `
          +
          +
          标题
          +
          diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap index 42abda380..016a64223 100644 --- a/src/picker/test/__snapshots__/index.spec.js.snap +++ b/src/picker/test/__snapshots__/index.spec.js.snap @@ -58,7 +58,7 @@ exports[`column watch default index 2`] = ` exports[`columns-top、columns-bottom prop 1`] = `
          -
          +
          Custom Columns Top
            @@ -90,7 +90,7 @@ exports[`not allow html 1`] = ` exports[`render title slot 1`] = `
            -
            Custom title
            +
            Custom title
            @@ -114,6 +114,6 @@ exports[`toolbar-position prop 1`] = `
            -
            +
            `; diff --git a/src/style/var.less b/src/style/var.less index f88190c7f..f67952ae0 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -531,10 +531,11 @@ @picker-background-color: @white; @picker-toolbar-height: 44px; @picker-title-font-size: @font-size-lg; +@picker-title-line-height: 20px; @picker-action-padding: 0 @padding-md; @picker-action-font-size: @font-size-md; -@picker-action-text-color: @blue; -@picker-action-active-color: @active-color; +@picker-confirm-action-color: @text-link-color; +@picker-cancel-action-color: @gray-6; @picker-option-font-size: @font-size-lg; @picker-option-text-color: @black; @picker-option-disabled-opacity: 0.3;