首页 » PHP教程 » php多级选择技巧_超棒 Vue 省市县联动选择器组件VDistpicker

php多级选择技巧_超棒 Vue 省市县联动选择器组件VDistpicker

duote123 2024-12-10 0

扫一扫用手机浏览

文章目录 [+]

v-distpicker 一个大略易用的地区选择器组件。
支持省、市、地区三级联动选择,供应多种选择模式。

安装

php多级选择技巧_超棒 Vue 省市县联动选择器组件VDistpicker

$ npm i v-distpicker -S

引入

php多级选择技巧_超棒 Vue 省市县联动选择器组件VDistpicker
(图片来自网络侵删)

# 在main.js中全局引入import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker)# 在组件页面引入import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}

插件利用

<template> <v-distpicker :province="select.province" :city="select.city" :area="select.area" @selected="onSelected" > </v-distpicker><template><script>import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }, data() { return { select: { province: '湖北省', city: '武汉市', area: '汉阳区' }, } }, methods: { onSelected(data) { console.log(data); } }}</script>

供应各种丰富的示例及API接口

附上示例及仓库地址

# 示例地址https://distpicker.unie.fun/# 仓库地址https://github.com/jcc/v-distpicker

这次就分享到这里,如果小伙伴们有更好的Vue省市区选择器,欢迎在评论区一起互换谈论。
喜好的话给个赞或转发,多谢!

相关文章