今天给大家推荐一款超好用的 vue.js 组件,省市区三级联动选择器VDistpicker。
![33ed1b3400d41af18cb4db959d415cdb.png](https://i-blog.csdnimg.cn/blog_migrate/686a81bc7ec536bf5c54e713d1ef6add.jpeg)
v-distpicker 一个简单易用的地区选择器组件。支持省、市、地区三级联动选择,提供多种选择模式。
![2c9f2d9106dbea37a52dd6fb30b26b6c.gif](https://i-blog.csdnimg.cn/blog_migrate/a864dfdc9506b9a7e2f13cdb92180434.gif)
![25defbcb7d26379f7e963f090edb4d7e.png](https://i-blog.csdnimg.cn/blog_migrate/7bef71e5e8f471c4d5a56de30b457aee.jpeg)
安装
$ npm i v-distpicker -S
引入
# 在main.js中全局引入import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker)# 在组件页面引入import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}
插件使用
提供各种丰富的示例及API接口
![e0f8bc01a6e45c5321516fbfb717c0a2.png](https://i-blog.csdnimg.cn/blog_migrate/ee3cd0ca238924319852aa96d67d6e36.jpeg)
![50250dbcb5323548fecd3705f71d55d8.png](https://i-blog.csdnimg.cn/blog_migrate/4256ba952cde38be3a998b56605e7a1c.jpeg)
![75f233f543a23670954b9595fc860006.png](https://i-blog.csdnimg.cn/blog_migrate/ec589d0a6ad4bc41e7bf76c3b0e5ab83.jpeg)
附上示例及仓库地址
# 示例地址https://distpicker.unie.fun/# 仓库地址https://github.com/jcc/v-distpicker
这次就分享到这里,如果小伙伴们有更好的Vue省市区选择器,欢迎在评论区一起交流讨论。喜欢的话给个赞或转发,多谢!