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

chokingwin_cw發表於2018-06-02
View元件

01 需求來源

前陣子專案中有一個城市多選的需求，分解後有以下幾個需要實現的指標：

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

02 效果

不多說先看效果。

演示效果動圖

再來幾張靜態圖。

演示效果靜圖1

演示效果靜圖2

演示效果靜圖3

演示效果靜圖4

演示效果靜圖5

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 包裡

就這樣，週末愉快~

相關文章