AreaPicker 地区选择器

使用指南

areaPicker组件是地区选择器，自定义显示模式 省、省-市、省-市-区

TIP

此组件基于h3-cascade-picker组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div class="list">
    <p>area-picker 组件</p>
    <br />
    <h3-button type="primary" @click="areapickervisible1 = true">
      show P-C-T areapicker
    </h3-button>
    <br />
    <p>mode</p>
    <br />
    <h3-button type="primary" @click="areapickervisible2 = true">
      show P-C areapicker
    </h3-button>
    <br />
    <h3-button type="primary" @click="areapickervisible3 = true">
      show P areapicker
    </h3-button>

    <h3-area-picker
      v-model="areapickervisible1"
      :source="source"
      :value="areapickerdata"
      mode="P-C-T"
      maskClosable
    />
    <h3-area-picker
      v-model="areapickervisible2"
      :source="source"
      :value="areapickerdata"
      mode="P-C"
      maskClosable
    />
    <h3-area-picker
      v-model="areapickervisible3"
      :source="source"
      :value="areapickerdata"
      mode="P"
      maskClosable
    />
  </div>
</template>

<script>
import H3AreaPicker from '@/components/h3-area-picker/';
import H3Button from '@/components/h3-button/';

function ajax (url, fnSuccess, fnFaild) {
  const oAjax = new XMLHttpRequest();
  oAjax.open('GET', url, true);
  oAjax.send();
  oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
      if (oAjax.status === 200) {
        try {
          fnSuccess(JSON.parse(oAjax.responseText));
        } catch (e) {
          fnFaild(oAjax.responseText);
        }
      } else {
        if (fnFaild) {
          fnFaild(oAjax.responseText);
        }
      }
    }
  };
}

export default {
  name: 'AreaPicker',
  components: {
    H3AreaPicker,
    H3Button,
  },
  data () {
    return {
      areapickervisible1: false,
      areapickervisible2: false,
      areapickervisible3: false,
      source: () =>
        new Promise((resolve, reject) => {
          ajax('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json', resolve, reject);
        }),
      mode: 'P-C',
      areapickerdata: [
        { id: '440000', name: '广东省', level: 'province' },
        { id: '440300', name: '深圳市', level: 'city' },
        { id: '440305', name: '南山区', level: 'district' },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件，仅仅是一个简单的picker式的组件，与原来的h3-area-selector不同。

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
round	是否圆角	boolean	false
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	标题	string	-
cancelText	第一个按钮文本	string	'取消'
clearText	第二个按钮文本	string	'清空'
extraText	第三个按钮文本	string	-
confirmText	第四个按钮文本	string	'确定'
value	选中的数据	array	[{ "id": "440000", "name": "广东省", "level": "province" }, { "id": "440300", "name": "深圳市", "level": "city" }, { "id": "440305", "name": "南山区", "level": "district" }], id别名为adcode
mode	地址选择模式P-C-T|P-C|P	string	'P-C-T'
source	区域数据，一个返参为Promise(Promise 需要返回 Array 数据)或Array类型的函数 或 数组	function|array	() => []

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
select	当点击确认按钮或清空按钮时的回调	[{ "id": "440000", "name": "广东省", "center": "113.280637,23.125178", "level": "province", "adcode": "440000" }, { "id": "440300", "name": "深圳市", "center": "114.085947,22.547", "level": "city", "adcode": "440300" }, { "id": "440305", "name": "南山区", "center": "113.92943,22.531221", "level": "district", "adcode": "440305"}]
cancel	当点击取消按钮及蒙层回调	-
extra	点击第三个按钮回调	-