vue-cityPicker

vue2.0+ 移动端 城市选择器 仿京东app的地址管理的城市选择器ui

install

use npm

npm install vue-citypicker --save

usage

<template>
  <div id="app">
    <button type="button" name="button" @click="visible = !visible">show</button>
    <CityPicker
      @on-finish="handleFinish"
      v-model="visible"
      :defaultData='defaultData'></CityPicker>
      <p v-for="(value, key) in selected">
        {{value.name}} | {{value.code}}
      </p>
  </div>
</template>

<script>
import CityPicker from 'vue-citypicker';

export default {
  name: 'app',
  components: {
    CityPicker,
  },
  data() {
    return {
      visible: false,
      defaultData: [],
      selected: {},
    };
  },
  methods: {
    handleFinish(selected) {
      this.selected = selected;
      this.defaultData = [selected.province.code, selected.city.code, selected.area.code];
    },
  },
};
</script>

<style lang="less">
button{
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 2px;
}
</style>

options

attributes

属性	说明	类型	默认值
value	控制是否显示，可以用v-model来绑定	Boolean	false
defaultData	设置默认显示数据	Array	[]

options

方法	说明	类型	返回值
on-finish	选择后的回调	Function	Object, 例子： { province : { name: '北京市', code: '11000' }, city: {name: '东城区', code: '110101' }, area: { name: '', code: '' } }