vue+elementui+v-distpicker实现城市三级联动/地址选择

由于项目中有城市选择的业务需求，百度之下发现了v-distpicker，这个插件不错，基本能满足业务需求，但是它使用了原生的select标签，样式很难看，不同的浏览器上显示的效果也不尽相同，而且貌似没有办法去重置它的样式，于是就把它改成了ElementUI的Select，v-distpicker的具体用法参考官方文档

1、安装官方v-distpicker,怎么安装就不说了，官方文档https://distpicker.unie.fun/

2、安装完成后,安装到node_modules/v-distpicker/src目录，如图

3、将src里面的内容复制到合适的目录，并取个名字，名字随意，比如distPicker

4、改造Dispicker.vue文件，将<select>标签修改为<el-select>,<option>标签修改为<el-option>，也就是ElementUI的select组件，既然使用ElementUI的组件，那v-distpicker的样式文件可以全部删除

<template><div :class="wrapper"><template v-if="type != 'mobile'"><el-select  @change="getCities" v-model="currentProvince" :disabled="disabled || provinceDisabled" class="province"><el-option v-for="(item, index) in provinces"  :value="item" :key="index" :label="item"></el-option></el-select><template v-if="!onlyProvince"><el-select @change="getAreas" v-model="currentCity" :disabled="disabled || cityDisabled" class="city"><el-option :value="placeholders.city">{{ placeholders.city }}</el-option><el-option v-for="(item, index) in cities":value="item":key="index":label="item">{{ item }}</el-option></el-select><el-select v-if="!hideArea" v-model="currentArea" :disabled="disabled || areaDisabled" class="area"><el-option :value="placeholders.area">{{ placeholders.area }}</el-option><el-option v-for="(item, index) in areas ":value="item":key="index":label="item"></el-option></el-select></template></template><template v-else><div :class="addressHeader"><ul><li :class="{'active': tab === 1}" @click="resetProvince">{{ currentProvince && !staticPlaceholder ? currentProvince : placeholders.province }}</li><template v-if="!onlyProvince"><li v-if="showCityTab" :class="{'active': tab === 2}" @click="resetCity">{{  currentCity && !staticPlaceholder ? currentCity : placeholders.city }}</li><li v-if="showAreaTab && !hideArea" :class="{'active': tab === 3}">{{ currentArea && !staticPlaceholder ? currentArea : placeholders.area }}</li></template></ul></div><div :class="addressContainer"><ul v-if="tab === 1"><li v-for="(item, index) in provinces":class="{'active': item === currentProvince}"@click="chooseProvince(item)":key="index">{{ item }}</li></ul><template v-if="!onlyProvince"><ul v-if="tab === 2"><li v-for="(item, index) in cities":class="{'active': item === currentCity}"@click="chooseCity(item)":key="index">{{ item }}</li></ul><ul v-if="tab === 3 && !hideArea"><li v-for="(item, index) in areas":class="{'active': item === currentArea}"@click="chooseArea(item)":key="index">{{ item }}</li></ul></template></div></template></div>
</template>

5、在组件中使用

<template><div><VDistpicker:province="select.province" :city="select.city" :area="select.area" @province="selectProvince" @city="selectCity"@area="selectArea"@selected="onSelected"></VDistpicker></div>
</template><script>import VDistpicker from './distPicker'  //注意路径export default {components: { VDistpicker },data() {return {}},methods: {selectProvince(value) {this.select.province = value.value;},selectCity(value) {this.select.city = value.value;},selectArea(value) {this.select.area = value.value;},onSelected(data) {console.log(data)},reset() {this.select.province = ''this.select.city = ''this.select.area = ''},}}
</script>

6、删除v-distpicker。至此，已经把v-distpicker改造成了自己的组件，它已经没哈用了，可以从依赖中删除v-distpicker，怎么删除依赖包，自行百度。

vue+elementui+v-distpicker实现城市三级联动/地址选择相关推荐

vue实现省市区三级联动地址选择
导航利用select下拉框实现 CV通道省市区三级json 凑字数之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...
vue实现省市区三级联动地址选择组件
昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用. 效果如下: 下面就记录一下代码叭! 一 ...
java 多级级联菜单回显_详解element-ui级联菜单（城市三级联动菜单）和回显问题...
代码最下面各项的参数截图代码如下 v-model="ruleForm.censusLand" style="width:180px;padding-left:7px; ...
python三级联动菜单_详解element-ui级联菜单（城市三级联动菜单）和回显问题
代码最下面各项的参数截图代码如下 v-model="ruleForm.censusLand" style="width:180px;padding-left:7px; ...
基于vue element-ui 的省市区数据结构省市区三级联动数据---
[{"name":"北京","sub":[{"name":"东城区"},{"name&qu ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
element-ui省市区三级联动：选择即改变
element-ui 省市区三级联动:选择即改变注意: 阅读本文,经验传授: vue.js单组件引入外部或自定义的 .js文件,并调用文件内三级联动的 json数据: 自定义设置默认地址,结合js ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...

vue+elementui+v-distpicker实现城市三级联动/地址选择

vue+elementui+v-distpicker实现城市三级联动/地址选择相关推荐

最新文章

热门文章