v-distpicker 省市区插件的使用

用户4344670

发布于 2019-08-28 11:15:42

2K0

发布于 2019-08-28 11:15:42

文章被收录于专栏：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

    },