前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >v-distpicker 省市区插件的使用

v-distpicker 省市区插件的使用

作者头像
用户4344670
发布2019-08-28 11:15:42
1.9K0
发布2019-08-28 11:15:42
举报
文章被收录于专栏:vue的实战vue的实战

v-distpicker 使用说明

下拉菜单选择省市区

第一步: 安装v-distpicker

npm install v-distpicker -s

第二步: 在main.js中引入

// 省市区插件
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)
  • 第三步: 在vue的组件中使用
  <v-distpicker  @selected="onSelected" :province="select.province" :city="select.city" :area="select.area">
  </v-distpicker>

* 数据绑定
 data() {
  return {

    select: { province: 130000, city: 130300, area: 130321 },
   ///  select: { province: "江西省", city: "", area: "" },
  ///  当值是中文的时候,要完整的省份名称,比如"江西省,不能给 "江西
   }
}
* 事件绑定 获得选择好的的省市区的code 传送给后台。
  onSelected(val) {
              console.log(val);
              console.log(val.city.code); //  打印出城市的code

    },
  • 优点: 支持通过code来显示省市区的中文,而不用手写代码来显示。
  • 实际开发过程中,会接收后台返回的code用于显示当前的省市区的名称,当用户不做任何修改的时候又要把当前的code发送给后台。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.07.03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档