v- dis tpicker 介绍
1.下载
npm?install?v- dis tpicker?--save
Or
yarn add v- dis tpicker --save
2:使用与引入
在main.js中 注册 全局组件import dis tpicker from 'v- dis tpicker'vue.component('v- dis tpicker', dis tpicker)
在.vue 文件 中使用组件(你需要用到三级联动的.vue 页面 的js里)
import V dis tpicker from 'v- dis tpicker'
export default {
components: { V dis tpicker }
}
如何使用组件<v- dis tpicker></v- dis tpicker>(在该.vue 文件 的html部分写)
<template>
<div>
<v- dis tpicker province="广东省" city="广州市" area="海珠区"></v- dis tpicker>
</div>
</template>
移动端Mobile
<v- dis tpicker type="mobile"></v- dis tpicker>
3.如何 获取 他们的数据
给html部分 一个 点击事件<v- dis tpicker @selected='selected'></v- dis tpicker>
在vue配置 方法 里边用点击事件 获取 data:
selected(data){
this.province = data.province.value
this.city = data.city.value
}
网站地址 : https://distpicker.pigjian.com/
GitHub: https://github.com/jcc/v-distpicker
网站描述: 一个 灵活的,高可用的 vue 省市区选择 插件
v-distpicker官方网站
官方网站: https://distpicker.pigjian.com/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。