iview組件輪子。多是你想要的二級城市多選。

01 需求來源

前陣子項目中有一個城市多選的需求，分解後有如下幾個須要實現的指標：

1. 一次性展現中國的全部省份
2. 省份的下屬城市，在鼠標hover到省份上時也觸發顯示
3. 支持局部全選和反選
4. 省份下屬的城市若沒有全選，顯示當前已選擇個數
5. 支持省市下標和省市名稱兩種輸出方式

02 效果

很少說先看效果。

再來幾張靜態圖。

03 項目地址

git repertory：https://github.com/chokingwin/area-multi-selection，歡迎star

04 如何使用

須要說明的是，這是一個基於iview提供的 checkbox 和 poptip 組件封裝而成。

1.導入area組件文件夾

area組件在項目 src/components/ 目錄下，包括 area-source.json、area-producer.js、area.vue 三個文件，直接複製這文件夾到你的vue工程中。

2.引入組件並註冊

import areaMultiSelection from './components/area/area';
複製代碼

components: {
    'area-multi-selection': areaMultiSelection
}
複製代碼

3.直接使用

<area-multi-selection @areaData="receiveAreaData" :AreaData="areaIndexArr"></area-multi-selection>
複製代碼

這裏相應，還要準備一個傳入組件的 data areaIndexArr ，還有一個接收組件輸出結果的 method receiveAreaData

data() {
    return {
      isShowAreaModel: false,
      areaIndexArr: [],
      areaNameArr: []
    };
  },
  methods: {
    receiveAreaData(data) {
      this.areaIndexArr = data.index;
      this.areaNameArr = data.name;
    }
  }
複製代碼

05 最後

整個項目已經放到github上：https://github.com/chokingwin/area-multi-selection，再次歡迎star。
大夥能夠 clone 下來，跑起來看看。項目裏也寫了個簡單的頁面，直觀展現了城市多選的輸出結果。

還有不少不足，這裏說幾點：

• 多處循環遍歷，代碼可優化
• 省市的源數據格式特定，後續會適應多種數據源格式的輸入
• 能夠的話，後續會作到 npm 包裏

就這樣，週末愉快~