Vue使用distpicker插件实现省市级下拉框三级联动
更新时间：2023年02月22日 15:02:17 作者：小花皮猪
这篇文章主要介绍了Vue使用distpicker插件实现省市级下拉框三级联动,比如通过JSON文件生成对应的区域下拉框，element-china-are插件，包括distpicker插件，通过代码讲解如何使用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省市级下拉框三级联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧2024-02-02
埋点（Track）是指在应用程序、网站或平台中添加代码,以记录特定用户行为和事件的做法,通过添加埋点代码,可以观察和分析用户行为,以调整和改进产品设计和使用体验,本文给大家介绍了基于Vue+Node.js实现埋点功能的全流程,需要的朋友可以参考下2025-04-04
今天小编就为大家分享一篇VUE解决 v-html不能触发点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
Vue.js 是一个流行的前端框架,它提供了多种方法来实现数据的双向绑定和事件处理,在构建表单时,我们经常需要实现清空输入框的功能,本文将介绍两种在Vue中实现输入框清空功能的方法,感兴趣的小伙伴跟着小编一起来看看吧2024-12-12
这篇文章主要介绍了vue跳转同一个路由参数不同的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue3使用讯飞大模型的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
Three.js是一个轻量级的WebGL封装库,用于在浏览器中渲染复杂的3D图形,它提供了便捷的API,可以快速构建3D场景、对象和动画,Vue.js是一个渐进式JavaScript框架,擅长构建用户界面,本文给大家介绍了在Vue3项目中安装和配置Three.js的操作,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了Vue中如何实现在线预览word文件、excel文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue3响应式原理之Ref用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
今天来看看JavaScript中的一些实用的工具函数，希望能帮助你提高开发效率！需要的朋友可以参考下面文章的具体内容2021-10-10
最新评论