非nodejs环境的vue，html引入vant的area省市地

转载请声明地址！！https://blog.csdn.net/zyxWebRoad/article/details/107867381

先放上我的效果图

省市地js代码，完整数据见 area.js

var areaJson =  {
    province_list: {
        110000: '北京市',
        120000: '天津市',
        130000: '河北省',
        140000: '山西省',
        150000: '内蒙古自治区',
        210000: '辽宁省',
        220000: '吉林省',
        230000: '黑龙江省',
        310000: '上海市',
        320000: '江苏省',
        330000: '浙江省',
        ......

引入js

<!--引入省市地的js-->
    <script th:src="@{/js/util/area.js}"></script>

html代码

<van-cell title="商铺所在地:" :border="false">
                            <template #label>
                                <van-field
                                        readonly
                                        clickable
                                        name="area"
                                        v-model="registerPageVo.shopAddress"
                                        placeholder="点击选择省市区"
                                        @click="showArea = true"
                                        :rules="[{ required: true, message: '商铺所在地不能为空' }]"
                                />
                            </template>
                        </van-cell>

<van-popup v-model="showArea" position="bottom">
            <van-area
                    :area-list="areaList"
                    title="行业类型"
                    @confirm="onConfirmArea"
                    @cancel="showArea = false"
            />
        </van-popup>

data部分代码，重点看registerPageVo.shopAddress和areaList(其它的可以忽略)

data() {
            return {
                userfaceList: [],
                businessLicensePictureList: [],
                tradeLicensePictureList: [],
                registerPageVo: {
                    name: '',
                    username: '',
                    userface: '',
                    tradeCode: '',
                    shopName: '',
                    shopAddress: '',
                    shopDetailedAddress: '',
                    tradeLicenseNumber: '',
                    businessLicensePicture: '',
                    tradeLicensePicture: '',
                    phone: '',
                    code: '',
                    password: '',
                    confirmPassword: ''
                },
                showPopup: false,
                showArea:false,
                areaList: areaJson, 
                columns: ['酒店', '网吧'],
                registerPage: 1,
                //手机号校验规则
                phoneRegex: /^1[3456789]\d{9}$/,
                sendAble: 1,
            }
        },

method部分代码

onConfirmArea(values) {
                console.log(values.map((item) => item.name).join('/'));
                this.registerPageVo.shopAddress = values.map((item) => item.name).join('/');
                this.showArea = false;
            },

觉得我写的乱的可以去看vant文档，我只是把我觉得重要的代码摘出来了，欢迎留言讨论！！！