vue,用vant完成,要求 默认为线下活动,切换到线上活动时让地址选择不出现
时间: 2023-05-17 11:06:39 浏览: 76
您可以在vant的Picker组件中设置一个v-if条件,当活动类型为线下时,显示地址选择器,当活动类型为线上时,隐藏地址选择器。以下是示例代码:
<template>
<div>
<van-picker
v-if="isOffline"
title="地址选择"
:columns="columns"
@change="onChange"
>
<template v-slot:toolbar>
<van-button size="small" text @click="isOffline = false">
取消
</van-button>
<van-button size="small" text @click="onConfirm">
确定
</van-button>
</template>
</van-picker>
<van-switch v-model="isOffline" />
</div>
</template>
<script>
export default {
data() {
return {
isOffline: true,
columns: [
{
values: ['北京', '上海', '广州', '深圳'],
},
{
values: ['朝阳区', '海淀区', '丰台区', '西城区'],
},
{
values: ['三里屯', '国贸', '王府井', '西单'],
},
],
};
},
methods: {
onChange(picker, values) {
console.log(values);
},
onConfirm() {
console.log('confirm');
},
},
};
</script>
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)