<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<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>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<style>
#pro_city_country {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 1rem;
height: 2rem;
align-items: center;
}
.arrp {
width: 35%;
text-align: center;
}
.arrinput {
width: 65%;
text-align: center;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
font-size: 1rem;
color: #000;
}
.arrimg {
width: 1.5rem;
height: 1rem;
}
</style>
<body>
<div id="Vue">
<div class="hello">
<div id="pro_city_country">
<div class="arrp">选择地址:</div>
<div class="arrinput" @click="toSelect">
{{city}}
<img class="arrimg" :src="img" />
</div>
</div>
<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>
</div>
</body>
<script>
new Vue({
el:"#Vue",
data:{
show: false,
msg: "",
colNum: "3", //省市区显示列数,3-省市区,2-省市,1-省
city: "请选择",
areaList:are,
img: "https://sucai.suoluomei.cn/sucai_zs/images/20191204103033-xiala.png"
},
mounted() {
console.log("父传过来的", this.areaList);//打印出的结果
},
methods:{
toSelect() {
this.show = true;
},
confirmFn(are) {
this.show = false;
let arr, SelectProvinceName, SelectCityName, SelectCountyName,ko;
arr = are;
SelectProvinceName = arr[0].name; // 省
SelectCityName = arr[1].name; // 市
SelectCountyName = arr[2].name; // 区
ko=" ";//空格
this.$emit("ProCityCountyVal", [
SelectProvinceName, //选择的省
SelectCityName, //选择的市
SelectCountyName //选择的区
]);
this.city =
SelectProvinceName +ko+ SelectCityName +ko + SelectCountyName;//将选择的值赋值给city以显示在页面中
console.log(
"点击了确定按钮",
SelectProvinceName,
SelectCityName,
SelectCountyName,
);
},
cancelFn() {
this.show = false;
console.log("点击了取消按钮");
}
},
created(){
}
})
</script>
</html>
html引入vant省市区选择器
最新推荐文章于 2024-08-07 17:03:10 发布