diff --git a/src/area/README.md b/src/area/README.md index ad445f776..eff701e1f 100644 --- a/src/area/README.md +++ b/src/area/README.md @@ -40,6 +40,18 @@ 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 ### Props @@ -50,6 +62,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/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 9621e27c3..0952ac170 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -39,6 +39,18 @@ Vue.use(Area); ``` +### 配置列占位提示文字 + +可以通过`columns-placeholder`属性配置每一列的占位提示文字 + +```html + +``` + ## API ### Props @@ -49,6 +61,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` | - | diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue index 1901524ad..8c5e18f20 100644 --- a/src/area/demo/index.vue +++ b/src/area/demo/index.vue @@ -18,6 +18,14 @@ :title="$t('title')" /> + + + + @@ -30,12 +38,16 @@ export default { 'zh-CN': { title2: '选中省市区', title3: '配置显示列', - areaList: AreaList + title4: '配置列占位提示文字', + columnsPlaceholder: ['请选择'], + areaList: AreaList, }, 'en-US': { title2: 'Initial Value', title3: 'Columns Number', - areaList: AreaListEn + title4: 'Columns Placeholder', + columnsPlaceholder: ['Choose'], + areaList: AreaListEn, } }, diff --git a/src/area/index.js b/src/area/index.js index 6e59f5cf1..fcfcc1e0d 100644 --- a/src/area/index.js +++ b/src/area/index.js @@ -23,6 +23,10 @@ export default createComponent({ isOverseaCode: { type: Function, default: isOverseaCode + }, + columnsPlaceholder: { + type: Array, + default: () => [] } }, @@ -48,6 +52,14 @@ export default createComponent({ displayColumns() { return this.columns.slice(0, +this.columnsNum); + }, + + typeToColumnsPlaceholder() { + return { + province: this.columnsPlaceholder[0] || '', + city: this.columnsPlaceholder[1] || '', + county: this.columnsPlaceholder[2] || '', + }; } }, @@ -87,6 +99,14 @@ export default createComponent({ name: list[listCode] })); + if (this.columnsPlaceholder.length) { + // set columns placeholder + result.unshift({ + code: '000000', + name: this.typeToColumnsPlaceholder[type] + }); + } + if (code) { // oversea code if (this.isOverseaCode(code) && type === 'city') { @@ -126,8 +146,30 @@ export default createComponent({ 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)); @@ -193,7 +235,8 @@ export default createComponent({ render() { const on = { ...this.$listeners, - change: this.onChange + change: this.onChange, + confirm: this.onConfirm }; return ( diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap index 5d33e6fab..6fbd301c4 100644 --- a/src/area/test/__snapshots__/demo.spec.js.snap +++ b/src/area/test/__snapshots__/demo.spec.js.snap @@ -214,5 +214,68 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
标题
+
+ +
+
+
    +
  • 请选择
    • +
  • 北京市
    • +
  • 天津市
    • +
  • 河北省
    • +
  • 山西省
    • +
  • 内蒙古自治区
    • +
  • 辽宁省
    • +
  • 吉林省
    • +
  • 黑龙江省
    • +
  • 上海市
    • +
  • 江苏省
    • +
  • 浙江省
    • +
  • 安徽省
    • +
  • 福建省
    • +
  • 江西省
    • +
  • 山东省
    • +
  • 河南省
    • +
  • 湖北省
    • +
  • 湖南省
    • +
  • 广东省
    • +
  • 广西壮族自治区
    • +
  • 海南省
    • +
  • 重庆市
    • +
  • 四川省
    • +
  • 贵州省
    • +
  • 云南省
    • +
  • 西藏自治区
    • +
  • 陕西省
    • +
  • 甘肃省
    • +
  • 青海省
    • +
  • 宁夏回族自治区
    • +
  • 新疆维吾尔自治区
    • +
  • 台湾省
    • +
  • 香港特别行政区
    • +
  • 澳门特别行政区
    • +
  • 海外
    • +
+
+
+
    +
  • +
+
+
+
    +
  • +
+
+
+
+
+ +
+
`;