vue中实现省市区三级联动(V-Distpicker插件)

本次项目中使用了V-Distpicker 插件实现了省市区三级联动

V-Distpicker 项目文档地址
V-Distpicker git地址

使用方法

npm install v-distpicker --save

import VDistpicker from 'v-distpicker'export default {components: { VDistpicker }
}

实现思路

原文档中的并不是input触发的所以在触发div上绑定了点击事件，在插件组件上设置了 v-show 来控制插件的显示，当触发插件的selected事件（当选择完后触发）来使插件的v-show为false隐藏，并把选中的值赋给div以此来显示，为了美观自己设置了一个遮罩层，自我感觉高大上了很多，哈哈哈

html部分

<li><div class="left"><span>所在地区</span></div><div class="right r"><div class="city" @click="toAddress">{{city}}</div><i class="arrow-r"> </i></div>
</li>
<v-distpicker type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
<div class="mask" v-show="mask"></div>

js部分

//定义data数据
city:'请选择',
addInp :false,
mask:false//在methodes中定义方法
// 点击弹出三级联动toAddress(){this.mask = true;this.addInp = true;
},// 省市区三级联动selected(data){this.mask =false;this.addInp = false;this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value},

项目实现效果图

ok 搞定！

记录点滴，每天进步一点点

vue中实现省市区三级联动(V-Distpicker插件)相关推荐

前端 vue中使用省市区三级联动
https://blog.csdn.net/qq_33769914/article/details/82878693
vue移动端省市区三级联动
安装:npm i v-distpicker --save 使用: <div class="address" v-show="pop ...
关于在smarty中实现省市区三级联动
刚开始接触php,,其实对于一些比较深入的东西还不是很了解,就像是这次的省市区联动,都是用三张表为基础编码的,原谅我的无知,谢谢. 接下来就是编码部分了: <?php require('./sm ...
省市区三级联动选择组件前端实现
一代码 <template><el-dialog:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'":c ...
vue——省市区三级联动demo
最近学习vue,想着写一写demo练习练习. 此demo是省市区的三级联动,像这样的场景我们经常看到.我也是刚开始写没有头绪,然后多方查资料. 写此demo时踩过的坑: 1.数据:我们希望后台给我们的 ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
vue实现省市区三级联动地址选择组件
昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用. 效果如下: 下面就记录一下代码叭! 一 ...
vue 实现仿京东、淘宝省市区三级联动
vue 实现仿京东.淘宝省市区三级联动在做电商或其他项目的时候,物流我们肯定会集成进去,那么我们肯定需要集成地址管理,地址管理除了最基本的省.市.区外,我们还要单独添加一个详细地址字段,不然我们无法 ...
vue实现省市区三级联动地址选择
导航利用select下拉框实现 CV通道省市区三级json 凑字数之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...

vue中实现省市区三级联动(V-Distpicker插件)

本次项目中使用了V-Distpicker 插件实现了省市区三级联动

使用方法

实现思路

html部分

js部分

项目实现效果图

vue中实现省市区三级联动(V-Distpicker插件)相关推荐

最新文章

热门文章