1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 Area：
<template>
<div>
<!-- 其他页面内容 -->
<!-- Area 组件 -->
<van-area
v-model="areaValue"
:area-list="areaList"
:columns-num="3"
@change="onAreaChange"
/>
</div>
</template>
<script>
import { VanArea } from 'vant';
export default {
components: {
VanArea
},
data() {
return {
areaValue: [],
areaList: []
};
},
methods: {
onAreaChange(value) {
// 地区选择变化的逻辑
console.log('选择的地区：', value);
}
},
mounted() {
// 异步加载地区数据
this.loadAreaData();
},
methods: {
async loadAreaData() {
try {
// 模拟异步加载地区数据
const response = await fetch('https://example.com/api/area');
const data = await response.json();
this.areaList = data;
} catch (error) {
console.error('加载地区数据失败：', error);
}
}
}
};
</script>
在上述示例中，van-area 组件用于创建省市区选择页面。v-model 绑定了选择的地区数据，area-list 属性用于设置地区的数据，columns-num 属性设置显示的列数。通过监听 @change 事件，你可以在地区选择变化时执行相应的逻辑。
请注意，为了演示异步加载地区数据的情况，我在 mounted 钩子中调用了 loadAreaData 方法，你需要根据实际情况替换为你的异步加载逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5859/Vant