美文网首页
weex vue实现省市区县三级联动选择(包括数据源)

weex vue实现省市区县三级联动选择(包括数据源)

作者: silencefun | 来源:发表于2020-02-19 22:30 被阅读0次

    参考weex 实现仿ios 三级联动地址选择器

    做了一些改进

    一、改进部分:

    1.增加是否显示县区级单位控制。
    2.增加直辖市返回是否 显示三级样式。
    3.修改数据源排列,直辖市放到最前面。
    4.补全数据源中台湾省(只有市,没有县)。
    5.修改源码中一些可能空指针错误(某些市下面没有区县行政区划)。
    6.完善半透明遮罩,而非全局半透明。
    7.删除无效引用,补充缺少的变量声明,完善更换上级索引下级索引默认为第一个。

    二、使用

    说明:
    1.showdisList //是否显示 县区级行政
    2.renturnMunicipalityThree
    返回直辖市 北京-北京-东城 这样格式 若为false 省-市两级 则是 北京一个

    使用的时候:

       <template>
         <div >
           <text class="title" @click="update" :value="date"> </text>
           <selectvue class="list-mask" v-if="isselectaddress" :proviceList="proviceList" :cityListMap="cityListMap" :disListMap="disListMap"  @haveselectedaddress="selectedaddress"></selectvue>
         </div>
    
       </template>
    
    <style>
    .title { font-size: 48px; }
    .list-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 750px;
    z-index: 10;
    }
    </style>
    
    <script>
         import selectvue from '@/components/select_address.vue'
         import citydata from "./data/citydataconfig.js";
    
     export default {
         components:{selectvue},
    
    methods: {
      update(e) {
        this.isselectaddress = true
      },
    
      selectedaddress(evtValue){
        this.isselectaddress = false
        if(evtValue === ''){
          return
        }
        this.date = evtValue
    
      }
    },
    data(){
      return{
        proviceList:[],
        cityListMap:{},
        disListMap:{},
        isselectaddress: false,
        date:'点击选择地址',
        showdisList: true,//显示县区级单位
        renturnMunicipalityThree: true,//直辖市是否显示三级
      }
    },
    mounted(){
    
      this.proviceList = citydata.proviceList;
      this.cityListMap = citydata.cityListMap;
      this.disListMap = citydata.disListMap;
    }
    }
    </script>
    

    截图:

    展示效果图

    项目地址包括数据源(数据源可能是2017年的数据):

    github:https://github.com/silencefun/weex-cityselector

    相关文章

      网友评论

          本文标题:weex vue实现省市区县三级联动选择(包括数据源)

          本文链接:https://www.haomeiwen.com/subject/jfpzfhtx.html