一个vue手机三级联动城市插件

t-city-picker

demo演示

[demo] (http://121.196.208.78/tcitypicker/index.html)

安装

npm install t-city-picker -d

使用

import tCityPicker from 't-city-picker'
// require
var tCityPicker = require('t-city-picker')

Vue.use(tCityPicker)

// 或者直接使用script导入
<script src="./dist/t-city-picker.js"></script>

// 作为组件的方式使用

<t-city-picker :color="'#d33'" ref="tCityPicker" v-model="value"></t-city-picker>

配置

  <t-city-picker
    :color="#d33"
    ref="tCityPicker"
    v-model="value"
    >
   ...可以自己自定义名字
  </t-city-picker>

methods:{
  data () {
    return {
      value: '四川省南充市南部县'
      // 四川省南充市南部县  支持4种格式
      // 四川省-南充市-南部县 
      // 四川省-南充市-南部县
      // 四川省 南充市 南部县
    }
  }
  open() { // 打开选择器
    this.$refs.tCityPicker.open()
  }
}

Props

| 名字 | 描述 | 参数类型 |默认值| 其他说明 | | ----------------- | ---------------- | :--------: | :----------: | :----------: | | color | 选择时的颜色 |String| #81b2f9 | v-model | 双向绑定地址 |String| 北京市北京市东城区 |