Vue使用distpicker插件实现省市级下拉框三级联动
前言
这几天做项目，想着用一个全国省市区插件，之前就知道有几种，比如通过JSON文件生成对应的区域下拉框，element-china-are插件，包括distpicker插件
今天主要介绍的是如何使用distpicker插件实现省市级三联跳动
官网：distpicker官网
ps：不知为何，我一直进不去
安装distpicker
如果是使用npm，直接以下执行命令即可
npm install v-distpicker --save
如果是yarn，可以使用下面的命令执行：
yarn add v-distpicker --save
我这里选择的是npm
这个包很小，网络顺畅的情况下10s内就完事了。
引用并注册distpicker
安装完成之后，就可以使用了
为了方便，我们可以直接在入口文件(main.js)中进行全局注册，这样不管哪个组件想要使用，就可以引入并直接使用了
// 引用地区选择器distpicker插件
import vdistpicker from 'v-distpicker'
// 注册全局地区选择器distpicker组件
Vue.component('v-distpicker', vdistpicker);
使用distpicker
比如我现在这个组件想要使用我们注册的公共distpicker 组件，我们就可以直接引用过来进行使用了。
<v-distpicker></v-distpicker>
和其他组件一样，直接使用组件即可：
然后就可以看到效果了：
简单选择下区域：
默认选择
我们可以给组件设置默认选择：
移动端适配
可以通过设置type="mobile"来适配移动端
<v-distpicker type="mobile"></v-distpicker>
美化样式
据说官网有代码可以美化下拉框样式，但是由于我进不去官方，就看不到相关的代码和效果，反正默认有点难看。
取值
我们可以通过以下方式进行取值，先绑定对应的函数
<v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
然后在data中声明省市区这三个变量，用于接收下拉框省市区的值
然后是回调函数，主要就是对选择的值赋给data中定义的属性：
province:'', // 省
city:'', // 市
area:'', // 区
onChangeProvince(province){
this.province = province.value
},
onChangeCity(city){
this.city = city.value
},
onChangeArea(area){
this.area = area.value
},
查看效果，可以在前端或者后端进行拼成成一个整体，这里就不做演示了
总结
使用起来确实很方便，但是官网进不去加上页面不太适配，就不打算再使用它了，等到哪天优化之后，再回来更新
到此这篇关于Vue使用distpicker插件实现省市级下拉框三级联动的文章就介绍到这了,更多相关Vue省市级下拉框三级联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这几天研究项目时,看到了 better-scroll 插件,看着感觉功能挺强,这篇文章主要给大家介绍了关于vue使用better-scroll实现横向滚动的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了vue实现websocket客服聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue 使用class创建和清除水印的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
VUE中路由变化this.$router(push\replace\go\back)解读
这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue中的baseurl如何配置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue 中 element-ui table合并上下两行相同数据单元格
这篇文章主要介绍了vue 中 element-ui table合并上下两行相同数据单元格,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
vue3+vite中报错信息处理方法Error: Module “path“ has&nb
这篇文章主要介绍了vue3+vite中报错信息处理方法Error: Module “path“ has been externalized for browser compatibility...,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
本文主要介绍，通过使用基于 vue技术栈的前端开发技术，在浏览器端调起摄像头，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理，对vue浏览器扫码功能的实现代码感兴趣的朋友一起看看吧2021-10-10
本文主要介绍了Vue3结合TypeScript项目开发实践总结，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue如何解决子组件data从props中无法动态更新数据问题
这篇文章主要介绍了Vue如何解决子组件data从props中无法动态更新数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论