vdistpicker 的简单使用 移动端

v-distpicker 的简单使用 移动端

npm安装

npm install v-distpicker --save

注册组件

全局注册

import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker);

局部注册

import VDistpicker from "v-distpicker";

使用效果

html 中使用

data 中定义变量

      showDistpicker: false, //省市区选择弹窗
      transportation_list: [], //出行方式列表

js methods中的内容

  /**
     * @description: 选中省的事件
     * @param {*} e
     * @return {*}
     */
    onChangeProvince(e) {
      console.log(e);
      this.addForm.province = e.value;
    },
    /**
     * @description: 选中城市的事件
     * @param {*} e
     * @return {*}
     */
    onChangeCity(e) {
      console.log(e);
      this.addForm.city = e.value;
    },
    /**
     * @description: 选中区的事件
     * @param {*} e
     * @return {*}
     */
    onChangeArea(e) {
      this.addForm.county = e.value;
      this.showDistpicker = false;

      if (this.$refs["addForm"]) {
        this.$refs["addForm"].validateField("county");
      }
    },

style 中改写的样式

<style scoped>
.divwrap {
  /* height: 400px; */
  height: calc(100vh - 40px);
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
   100%;
  background-color: #fff;
  z-index: 9999;
}
.divwrap >>> .distpicker-address-wrapper {
  color: #999;
}
.divwrap >>> .address-header {
  position: fixed;
  /* bottom: 400px; */
  top: 0px;
   100%;
  background: #2db95b;
  color: #fff;
}
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}
.divwrap >>> .address-header .active {
  color: #fff;
  border-bottom: #2ae367 solid 3px;
}
.divwrap >>> .address-container .active {
  color: #000;
}
</style>