npm

npm install hk-city-list

引入插件

...
import Vue from "vue";
import CityList from "hk-city-list";
....

Vue.use(CityList);

使用说明

基本用法

组件会挂载在Vue的prototype上可通过this.CityList调用

...
this.CityList({
    api,
    cityCode,
    cityName
});
...

参数说明

| 参数 | 说明 | 类型 | | ------ | ------ | ------ | | api | 城市列表接口 | Function | | cityCode | 当前cityCode | String | | cityName | 当前cityName | String |

通知

用户选择城市后，CityList会发出一条广播，载荷为{cityName, cityCode}

global.vbus.$emit("changeCity", {
    cityName,
    cityCode
});

使用者需要订阅该事件

global.vbus.$on("changeCity", ({cityName,cityCode}) => {
    // 业务逻辑
});

备注

本组件需要使用全局的event-bus，所以需要

global.vbus = new Vue();

可使用close方法从调用方关闭组件并销毁

let cityList = this.CityList({
    api,
    cityCode,
    cityName
});
cityList.close()