使用原生vue（非脚手架）基于vant来实现省市区选择器（附源码）

最新推荐文章于 2022-12-12 23:28:25 发布

刺心疯

最新推荐文章于 2022-12-12 23:28:25 发布

阅读量838

点赞数 1

分类专栏： vue HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/106120313

版权

HTML5 同时被 2 个专栏收录

201 篇文章 10 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

<!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>

刺心疯

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用原生vue（非脚手架）基于vant来实现省市区选择器（附源码）

<!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 文件 .
复制链接

扫一扫