Vant实现省市区三级联动
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
</head>
<body>
<div id="Vue">
<van-button type="info" @click="toSelect">调起选择器</van-button>
<van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
<van-area @cancel="cancelFn" :area-list="areaList" @confirm="confirmFn"
:columns-placeholder="['请选择', '请选择', '请选择']" title="选择所在省市区" />
</van-popup>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://sucai.suoluomei.cn/sucai_zs/file/20191217145416-area.js"></script>
<script>
new Vue({
el: "#Vue",
data: {
show: false,
areaList: are,
},
mounted() {
console.log("省市区Json数据", this.areaList)
},
methods: {
toSelect() {
this.show = true;
},
confirmFn(value) {
this.show = false;
console.log(value)
},
cancelFn() {
this.show = false;
}
},
})
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-04-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读