vue-citypicker v1.0.1

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

options