fcl-npm-select-city

选择城市组件 增加字母快速定位功能

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

使用

template中

<!--id为1,选择city1-->
<div @click="chooseCity( {id:1})">{{ this.city1 }}</div>
<!--id为2,选择city2,若只有一个城市,该项可以不引入-->
<div @click="chooseCity({id:2})">{{ this.city2 }}</div>
<!--引入组件-->
<selectCity
  v-if="isShowChooseCity"
  :isShowChooseCity="isShowChooseCity"
  :closeFunc="closeFunc"
  :chooseCity="chooseCity"
  :isPy="isPy"
  :id="id"
  :title="title"
></selectCity>

• isShowChooseCity:决定是否显示该组件

• closeFunc:关闭该组件

• chooseCity:选择城市;在点击位置写入**@click='chooseCity({id:1})' 或者@click='chooseCity({id:2})'**

• id为1时,是选择城市1,id为2是选择城市2

• isPy:当为false时,显示中文,当为true时显示拼音

script中

import selectCity from "fcl-npm-select-city";
export default{
    data () {
        return {
          title:'选择城市', //该值可按照需求修改
          id:1,  // 默认选择city1
          isPy:false, //默认显示汉字
          isShowChooseCity: false, //默认不显示该组件
          city1:'中国香港', //城市1,可以自己设置默认城市
          city2:'上海', //城市2,可以自己设置默认城市,如果只有一个城市,此项可删除
        }
      },
    methods:{
        closeFunc() {
          this.isShowChooseCity = false
        },
        chooseCity({id,value}){
          let oldCity1 = this.city1
      	  let oldCity2 = this.city2 //如果只有一个城市,此项可删除
          this.isShowChooseCity = !this.isShowChooseCity
          if (id === 1){
            this.isPy = false //false时城市显示为汉字,可自行设置,默认显示汉字
            this.id=1
            this.city1 = value || oldCity1
          }else{ // 如果只有一个城市,else内容可删除
            this.isPy = true //true时城市显示为拼音,可自行设置,默认显示汉字
            this.id = 2
            this.city2 = value || oldCity2
          }
        }
      },
    components:{
        selectCity
    }
}