vue 省市区三级联动插件v-distpicker

2024年5月12日 557次阅读 来源: 哈哈哈

十分便捷的三级联动插件

官网：https://www.awesomes.cn/repo/…

步骤1：下载

  npm install v-distpicker --save

Or

  yarn add v-distpicker --save

步骤2：使用与引入
① 在main.js中注册全局组件

import Distpicker from 'v-distpicker'

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

② 在.vue文件中使用组件（你需要用到三级联动的.vue页面的js里）

import VDistpicker from 'v-distpicker'
 
export default {
  components: { VDistpicker }
}

③ 如何使用组件<v-distpicker></v-distpicker>（在该.vue文件的html部分写）

<template>
  <div>
      <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
  </div>
</template>

移动端Mobile

<v-distpicker type="mobile"></v-distpicker>

步骤3：如何获取他们的数据
① 给html部分一个点击事件

    <v-distpicker @selected='selected'></v-distpicker>

② 在vue配置方法里边用点击事件获取data:

selected(data){
 
    this.province = data.province.value

    this.city = data.city.value

}
    原文作者：哈哈哈
    原文地址: https://segmentfault.com/a/1190000019431276
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞