vue实现移动端省市区选择

本文实例为大家分享了某视频剪辑软件实现移动端省市区选择的具体代码，供大家参考，具体内容如下

效果：

安装：

新公共管理安装v-distpicker -保存组件代码：

模板divli div class=' left ' span所在地区/span/div class=' right r ' div class=' city ' @ click=' to address ' { city } }/div I class=' arrow-r '/I/div/liv-dist picker类型=' mobile ' @ selected=' selected ' v-show=' addInp ' class=' area 1 '/v-dist pickerdiv class=' mask ' v-show=' mask '/div/div/template脚本从' v-dist picker '导入VDistpicker导出默认{ components : { VDistpicker }，name请选择，addInp :false，mask:false } }，methods : { to address(){ this。mask=truethis.addInp=true}，//省市区三级联动选定（数据){ this . mask=false this . addinp=false this。城市=数据。车辆。值“”数据。城市。值“”数据。区域。value }，} }/脚本样式作用域李{列表式：无；} .区域1 {宽度： 100%；高： 45%;位置：固定；左： 0；底部： 0；溢出-y:滚动；} .距离选择器-地址包装器。地址标题ul { position:fixed！重要；左转： 0!重要；top: 0！重要；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。