<!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
: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) {
that = this
that.show = false;
let arr, SelectProvinceName, SelectCityName, SelectCountyName, ko;
arr = are;
// console.log(arr[0].name, arr[1].name, arr[2].name)
//判断是否都选择
if (arr[0].name == "" || arr[1].name == "" || arr[2].name == "") {
that.$dialog.alert({
title: "提示", //加上标题
message: "请选择完整的地址", //改变弹出框的内容
showCancelButton: false //展示取消按钮
})
.then(() => { //点击确认按钮后的调用
console.log("点击了确认按钮噢")
})
console.log(that.city)
} else {
SelectProvinceName = arr[0].name; // 省
SelectCityName = arr[1].name; // 市
SelectCountyName = arr[2].name; // 区
ko = " ";//空格
that.$emit("ProCityCountyVal", [
SelectProvinceName, //选择的省
SelectCityName, //选择的市
SelectCountyName //选择的区
]);
that.city =
SelectProvinceName + SelectCityName + SelectCountyName;//将选择的值赋值给city以显示在页面中
that.addressinfo = that.city
console.log(
"点击了确定按钮",
SelectProvinceName,
SelectCityName,
SelectCountyName,
);
that.isActive = true;
that.address = arr
console.log(arr)
console.log(that.city)
}
},
cancelFn() {
this.show = false;
console.log("点击了取消按钮");
}
},
created(){
}
})
</script>
</html>
html引入vant省市区选择器
最新推荐文章于 2024-08-02 16:04:15 发布