更新记录

0.0.2（2023-06-06）

优化使用文档

0.0.1（2023-06-06）

一个基于Vue3和TypeScript开发的 Area 省市区三级联动选择组件。

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Area 省市区选择

省市区三级联动选择。

代码演示

基础用法

下面演示了省市区选择组件的用法，省市区选择完成后会触发 confirm 事件,返回值为省市区三项的数组。

首先安装vant提供的省市区数据源

yarn add @vant/area-data

  <hd-area :area-data="areaData" :area="areaSelect" @confirm="doConfirm"></hd-area>

<script lang="ts" setup>
import { areaList } from '@vant/area-data'
import { ref } from 'vue'
import { useArea } from '@/uni_modules/hd-area/components/hd-area';

const areaData = ref(areaList) // 位置信息数据
const areaSelect = ref<any[]>([]) // 已选省市区
const area = useArea()

function showArea() {
  area.showArea()
}

/**
 * 省市区选择成功
 * @param select 选择的省市区
 */
function doConfirm(select: Ucn[]) {
  areaSelect.value = select
}
</script>

Props

Events

联系方式

有不明白或者建议可以扫码交流

联系我们