Area 省市区选择

优质

小牛编辑

137浏览

2023-12-01

使用指南

组件介绍

Area 组件用于省市区选择，默认包装在 popup 弹出层中显示。

引入方式

import { Area } from 'feart';
components:{
  'fe-area':Area
}

代码演示

默认 Area

<div class="fe-center">
  <fe-area v-model="value" :list="list" />
</div>

添加事件监听

<div class="fe-center">
  <fe-area
    v-model="value"
    :list="list"
    @on-show="onShow"
    @on-hide="onHide"
    @on-change="onChange1"
    @on-confirm="onConfirm"
  />
</div>

export default {
  methods:{
    onChange1(value, names, items){
      console.log(value, 'selected value')
      console.log(names, 'selected names')
      console.log(items, 'selected items')
    },
    onConfirm(value, names, items){
      console.log(value, 'selected value')
      console.log(names, 'selected names')
      console.log(items, 'confirm items')
      this.names = names;
    },
  }
  // ...
}

隐藏区县选择，只选择省市

<div class="fe-center">
  <fe-area
    v-model="value"
    :list="list"
    hide-district
  />
</div>

自定义点击选择标题栏

<div class="fe-center">
  <fe-area v-model="value" :list="list">
    <template v-slot:title="slotProps">
      <div class="value" @click="slotProps.click">
        <span>当前选中: </span>
        <span>{{slotProps.title}}</span>
      </div>
    </template>
  </fe-area>
</div>

只显示选择器，不包装在 popup 中

<div class="fe-center">
  <fe-area v-model="value4" :list="list" :disablePopup="true" @on-change="onChange1" />
</div>

API

参数	说明	类型	默认值	可选值
value	选中省市区值，使用 v-model 绑定	`Array`	-	-
list	地址列表	`Array`	-	-
placeholder	没有值的提示文字	`String`	`请选择地址`	-
hide-district	隐藏区县，只显示省市	`Boolean`	`false`	`true`,`false`
show	是否在初始渲染时直接显示 `popup`	`Boolean`	`false`	`true`,`false`
disable-popup	直接显示选择器，不包装在 `popup` 中	`Boolean`	`false`	`true`,`false`
popup-style	`popup` 样式	`Object`	-	-
label	标题栏提示文本	`String`	`当前选中`	-
popup-title	`popup` 顶部中间标题	`String`	-	-
confirm-text	`popup` 右上角按钮文字	`String`	`确定`	-
cancel-text	`popup` 左上角按钮文字	`String`	`取消`	-

Slots

Slot 名	说明	备注
title	`title` 插槽，可以使用它来添加 `icon` 等自定义样式，可通过 `slotProps` `{click, title}`对象获取点击事件方法 `click` 打开弹窗，使用 `title` 显示已选值
-

Events

事件名	参数	说明	备注
on-show	-	显示时触发	-
on-hide	-	关闭时触发	-
on-change	1. `values`: 选中的 `value`(即 `areaCode`) 数组; 2. `names`: 选中项的名称数组 3. `items`: 选中的值对应 `list` 中的原数据对象	选择器滚动改变选中值时触发	-
on-confirm	同 `on-change`	点击右上角确定按钮时触发，同时关闭 `popup`	-
on-cancel	-	点击左上角取消按钮时触发，同时关闭 `popup`	-

list 数据格式

数组数据中对象元素按必需有效验证属性分为 2 种，除必需的 3 个属性外可包含其他任意属性，在 onConfirm 事件回调第二个参数中可直接获取选择数据对象的所有属性

1. 基本格式

有效属性为 name, value, parent

[
  {
    "name": "北京",
    "parent": "100000",
    "value": "110000"
  },
  {
    "value": "110101",
    "name": "东城区",
    "parent": "110100"
  }
]

1. areaCode 形式数据

有效属性为 areaCode, areaName, parentCode

[
    {
        "id": "2",
        "areaId": "201204151213140002",
        "areaCode": "110000",
        "areaName": "北京",
        "parentCode": "100000",
        "parentId": null
    },
    {
        "id": "3",
        "areaId": "201204151213140003",
        "areaCode": "110100",
        "areaName": "北京市",
        "parentCode": "110000",
        "parentId": "201204151213140002"
    }
    ...
]

1. areaCode 嵌套数组(公司后端返回统一数据格式，可直接使用)

有效嵌套子元素验证属性 cityAreaOlds

[
  {
    "id": "2",
    "areaId": "201204151213140002",
    "areaCode": "110000",
    "areaName": "北京",
    "parentCode": "100000",
    "parentId": null,
    "cityAreaOlds": [
      {
        "id": "3",
        "areaId": "201204151213140003",
        "areaCode": "110100",
        "areaName": "北京市",
        "parentCode": "110000",
        "parentId": "201204151213140002",
        "cityAreaOlds": [
          {
            "id": "4",
            "areaId": "201204151213140004",
            "areaCode": "110101",
            "areaName": "东城区",
            "parentCode": "110100",
            "parentId": "201204151213140003",
            "cityAreaOlds": null,
            "ipAddress": null
          }
        ]
      }
    ]
  },
  {
    "id": "21",
    "areaId": "201204151213140021",
    "areaCode": "120000",
    "areaName": "天津",
    "parentCode": "100000",
    "parentId": null,
    "cityAreaOlds": [
      {
        "id": "22",
        "areaId": "201204151213140022",
        "areaCode": "120100",
        "areaName": "天津市",
        "parentCode": "120000",
        "parentId": "201204151213140021",
        "cityAreaOlds": [
          {
            "id": "23",
            "areaId": "201204151213140023",
            "areaCode": "120101",
            "areaName": "和平区",
            "parentCode": "120100",
            "parentId": "201204151213140022",
            "cityAreaOlds": null,
            "ipAddress": null
          }
        ]
      }
    ]
  }
]