diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap index 412ab445b..e77192ef2 100644 --- a/packages/address-list/test/__snapshots__/demo.spec.js.snap +++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap @@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
以下地址超出配送范围
-
+
王五，1320000000
浙江省杭州市滨江区江南大道 15 号
diff --git a/packages/area/demo/index.vue b/packages/area/demo/index.vue index 016e9c138..56280c795 100644 --- a/packages/area/demo/index.vue +++ b/packages/area/demo/index.vue @@ -21,6 +21,14 @@ :title="$t('title')" /> + + + + @@ -33,11 +41,15 @@ export default { 'zh-CN': { title2: '选中省市区', title3: '配置显示列', + title4: '配置列占位提示文字', + columnsPlaceholder: ['请选择'], areaList: AreaList }, 'en-US': { title2: 'Initial Value', title3: 'Columns Number', + title4: 'Columns Placeholder', + columnsPlaceholder: ['Choose'], areaList: AreaListEn } }, diff --git a/packages/area/en-US.md b/packages/area/en-US.md index e35b16932..2ee1765f6 100644 --- a/packages/area/en-US.md +++ b/packages/area/en-US.md @@ -36,6 +36,17 @@ Set `columns-num` with 2, you'll have a 2 level picker. ``` +### Columns Placeholder + +`columns-placeholder` property is used to config placeholder of columns. + +```html + +``` ### API @@ -45,6 +56,7 @@ Set `columns-num` with 2, you'll have a 2 level picker. | title | Toolbar title | `String` | - | | area-list | Area data | `Object` | - | | columns-num | level of picker | `String | Number` | `3` | +| columns-placeholder | placeholder of columns | `string[]` | `[]` | - | | item-height | Option height | `Number` | `44` | | loading | Whether to show loading prompt | `Boolean` | `false` | | visible-item-count | Count of visible columns | `Number` | `5` | diff --git a/packages/area/index.js b/packages/area/index.js index 60966827c..b750138de 100644 --- a/packages/area/index.js +++ b/packages/area/index.js @@ -15,6 +15,10 @@ export default sfc({ columnsNum: { type: [String, Number], default: 3 + }, + columnsPlaceholder: { + type: Array, + default: () => [] } }, @@ -40,6 +44,13 @@ export default sfc({ displayColumns() { return this.columns.slice(0, +this.columnsNum); + }, + typeToColumnsPlaceholder() { + return { + province: this.columnsPlaceholder[0] || '', + city: this.columnsPlaceholder[1] || '', + county: this.columnsPlaceholder[2] || '', + }; } }, @@ -81,6 +92,14 @@ export default sfc({ name: list[listCode] })); + if (this.columnsPlaceholder.length) { + // set columns placeholder + result.unshift({ + code: '000000', + name: this.typeToColumnsPlaceholder[type] + }); + } + if (code) { // oversea code if (code[0] === '9' && type === 'city') { @@ -119,8 +138,30 @@ export default sfc({ this.$emit('change', picker, picker.getValues(), index); }, + onConfirm(values, index) { + values.forEach(value => { + if (value.code === '000000') { + value.code = ''; + value.name = ''; + } + }); + this.setValues(); + this.$emit('confirm', values, index); + }, + setValues() { - let code = this.code || Object.keys(this.county)[0] || ''; + let { code } = this; + + if (!code) { + if (this.columnsPlaceholder.length) { + code = '000000'; + } else if (Object.keys(this.county)[0]) { + code = Object.keys(this.county)[0]; + } else { + code = ''; + } + } + const { picker } = this.$refs; const province = this.getList('province'); const city = this.getList('city', code.slice(0, 2)); @@ -186,7 +227,8 @@ export default sfc({ render(h) { const on = { ...this.$listeners, - change: this.onChange + change: this.onChange, + confirm: this.onConfirm }; return ( diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap index 8d0a741b5..168dc9649 100644 --- a/packages/area/test/__snapshots__/demo.spec.js.snap +++ b/packages/area/test/__snapshots__/demo.spec.js.snap @@ -63,5 +63,27 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
取消
+
标题
+
确认
+
+ +
+
+
    +
    +
    +
      +
      +
      +
        +
        +
        +
        +
        +
        `; diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap index 6d1d8ffdc..3009f7d91 100644 --- a/packages/area/test/__snapshots__/index.spec.js.snap +++ b/packages/area/test/__snapshots__/index.spec.js.snap @@ -96,24 +96,23 @@ exports[`change option 3`] = ` exports[`columns-num prop 1`] = `
        -
        取消
        -
        确认
        +
        取消
        +
        确认
        -
        -
          -
        • 北京市
          • +
          +
            +
          • 北京市
          • 天津市
          -
          -
            -
          • 北京市
            • +
            +
              +
            • 北京市
            • 县
            -
        diff --git a/packages/area/zh-CN.md b/packages/area/zh-CN.md index 26428e64e..7d65f6cfc 100644 --- a/packages/area/zh-CN.md +++ b/packages/area/zh-CN.md @@ -35,6 +35,18 @@ Vue.use(Area); ``` +### 配置列占位提示文字 + +可以通过`columns-placeholder`属性配置每一列的占位提示文字 + +```html + +``` + ### API | 参数 | 说明 | 类型 | 默认值 | 版本 | @@ -43,6 +55,7 @@ Vue.use(Area); | title | 顶部栏标题 | `String` | - | - | | area-list | 省市区数据，格式见下方 | `Object` | - | - | | columns-num | 显示列数，3-省市区，2-省市，1-省 | `String | Number` | `3` | - | +| columns-placeholder | 列占位提示文字 | `string[]` | `[]` | - | | loading | 是否显示加载状态 | `Boolean` | `false` | - | | item-height | 选项高度 | `Number` | `44` | - | | visible-item-count | 可见的选项个数 | `Number` | `5` | - |