city-selector

city-selector是一款基于vue2+的全国城市筛选器

截图

安装

npm

$ npm install vue2-city-selector

使用

<city-selector field="city" placeholder="请选择城市" :city-list="cityListArr" v-model="cityId"></city-selector>

// 全局使用
import Vue from 'vue';
import citySelector from 'vue2-city-selector'
Vue.use(citySelector)

// 局部引用
import {citySelector} from "vue2-city-selector";
export default {
    components: {
        citySelector
    },
    data() {
        return {
            cityId: '',
            cityListArr: {
                'hot': [
                    {id: 410500, name: "安阳市"}
                ],
                A: [
                    {id: 152900, name: "阿拉善盟"},
                    {id: 210300, name: "鞍山市"},
                    {id: 340800, name: "安庆市"},
                    {id: 410500, name: "安阳市"},
                    {id: 513200, name: "阿坝藏族羌族自治州"},
                    {id: 520400, name: "安顺市"},
                    {id: 542500, name: "阿里地区"},
                    {id: 610900, name: "安康市"},
                    {id: 652900, name: "阿克苏地区"},
                    {id: 654300, name: "阿勒泰地区"}
                ]
            }
        }
    }
}

相关参数

| 名称 | 类型 | 默认 | 说明 | | ----------------- | ----------------- | ---------------- | --------------------------------------------- | | v-model | String | "" | 要双向绑定的城市Id | | field | String | "" | 会给input标签添加name及id属性 | | placeholder | String | "" | 提示信息 | | no-hot | Boolean | false | 没有‘热门城市’ | | city-list | Object | [] | 可以自定义城市列表