原生html中使用vant组件的三级联动

原生html中使用有赞的vant组件库

整体dom元素以及事件的绑定

<!-- vant组件库所需的样式文件 -->
<link rel="stylesheet" href="./Public/h5newcss/util.css">
<div class="ad-group" id="myvue">
                <label><em class="required">*</em>所在地区</label>
                <div class="region">
                  <div class="van-field__body" @click="showProp">
                    <input type="text" name="data[pro]" readonly="readonly" class="van-field__control" :value="city" id="proList">
                    <div class="van-field__right-icon">
                      <i class="van-icon van-icon-arrow"></i>
                    </div>
                  </div>
                </div>
                <van-popup v-model="show" position="bottom">
                  <van-area
                      :area-list="areaList"
                      :columns-placeholder="['请选择', '请选择', '请选择']"
                      @cancel="cancelFn"
                      @confirm="confirmFn"
                  />
              </van-popup>
            </div>

js部分

 <!-- vue语法js文件_有赞的UI组件库js_省市区三级联动js -->
  <script src="./Public/h5newjs/vue.min.js"></script>
  <script src="./Public/h5newjs/vant.min.js"></script>
  <script src="./Public/h5newjs/area.js"></script>
  <script>
  	//这里定义三个全局变量  因为整体不是全是vue开发的，这里主要作用是提交表单进行校验而用
	    var SelectProvinceName, SelectCityName, SelectCountyName;
	    new Vue({
	      el: '#myvue',
	      data: {
	        show: false,
	        colNum: "3", //省市区显示列数，3-省市区，2-省市，1-省
	        city: "选择省 / 市 / 区",
	        areaList: are  //省市区列表 必须为are
	      },
	      methods:{
	        // 显示弹出层
	        showProp() {
	          this.show = true
	        },
	        // 确认选取省市区
	        confirmFn(are) {
	          that = this
	          let arr = are
	          //省份未选取
	          if (arr[0].name == "" || arr[1].name == "" || arr[2].name == "") {
	            $.Util.Alert('请选择地区');
	          } else {
	            SelectProvinceName = arr[0].name;  //省
	            SelectCityName = arr[1].name;  //市
	            SelectCountyName = arr[2].name;  //区
	
	            that.$emit("ProCityCountyVal", [
	              SelectProvinceName,     //选择的省
	              SelectCityName,         //选择的市
	              SelectCountyName        //选择的区
	            ]);
	            that.city = SelectProvinceName+'-'+SelectCityName+'-'+SelectCountyName;
	            this.show = false
	          }
	        },
	        //点击取消 隐藏弹出层
	        cancelFn() {
	          this.show = false
	        }
	      }
	    });
  </script>

传送门：https://vant-contrib.gitee.io/vant/#/zh-CN/col