<template>
<div>
<!-- 使用 van-area 组件 -->
<van-area
:area-list="areaList"
:value="selectedArea"
@confirm="onConfirm"
@cancel="onCancel"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 地区列表数据，需要提前准备好
areaList: [],
// 当前选中的地区值
selectedArea: [],
};
},
methods: {
// 确认选择的回调
onConfirm(values) {
// 处理选择地区后的逻辑，values 包含了用户选择的地区信息
console.log('选择地区:', values);
},
// 取消选择的回调
onCancel() {
// 处理取消选择的逻辑
console.log('取消选择');
},
},
};
</script>
在上述代码中：
- areaList 是一个地区列表数据，需要提前准备好。这个数据包括省、市、区等信息，可以根据实际需求来配置。
- selectedArea 是一个数组，用于表示当前选中的地区。可以将它设置为默认值，也可以根据用户的选择动态更新。
通过这些属性，你可以根据实际需求配置 van-area 组件的外观和行为。在 @confirm 和 @cancel 事件回调中，你可以处理用户选择确认和取消的逻辑。
确保在使用 van-area 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { Area } from 'vant';
Vue.use(Area);
转载请注明出处：http://www.zyzy.cn/article/detail/5705/Vant