You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
779 B
40 lines
779 B
2 years ago
|
|
||
|
|
## 代码演示
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
下面演示了省市区选择组件的用法，省市区选择完成后会触发 `confirm` 事件,返回值为省市区三项的数组。
|
||
|
|
|
||
|
|
首先安装vant提供的省市区数据源
|
||
|
|
```sh
|
||
|
|
yarn add @vant/area-data
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-area :area-data="areaData" :area="areaSelect" @confirm="doConfirm"></hd-area>
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { areaList } from '@vant/area-data'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const areaData = ref(areaList) // 位置信息数据
|
||
|
|
const areaSelect = ref<Ucn[]>([]) // 已选省市区
|
||
|
|
const area = useArea()
|
||
|
|
|
||
|
|
function showArea() {
|
||
|
|
area.showArea()
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 省市区选择成功
|
||
|
|
* @param select 选择的省市区
|
||
|
|
*/
|
||
|
|
function doConfirm(select: Ucn[]) {
|
||
|
|
areaSelect.value = select
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
```
|