首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

V-Distpicker 是一个简单易用的地区选择器

如何安装

npm install v-distpicker --save

或者

yarn add v-distpicker --save

注册全局组件

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

注册局部组件

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker }

}

基本使用

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

}

占位符

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

data() {

return {

placeholders: {

province: '------- 省 --------',

city: '--- 市 ---',

area: '--- 区 ---',

}

}

}

}

原始值

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

data() {

return {

select: { province: '广东省', city: '广州市', area: '海珠区' },

}

},

}

隐藏区

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

}

只有省

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

}

事件触发

import VDistpicker from 'v-distpicker'

export default {

components: { VDistpicker },

methods: {

onSelected(data) {

alert(data.province + ' | ' + data.city + ' | ' + data.area)

console.log(data)

},

}

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200903A0OAVO00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券