1. 程式人生 > >vue城市選擇組件

vue城市選擇組件

nor 處理 index turn port 返回 城市選擇 安裝 fault

技術分享圖片

適用於vue的城市選擇組件

倉庫地址

基本功能:

  1. 支持全選、反選以及全部清空。
  2. 支持按拼音篩選。
  3. 勾選省份將會勾選省份下所有城市。
  4. 返回數據可靈活處理。

安裝

npm install cn-region-picker # 或者 yarn add cn-region-picker

用法

組件引入:


// import包
import CnRegionPicker from 'cn-region-picker'

// use
Vue.use(CnRegionPicker)

使用:

  v-model="pickCity"
  placeholder="城市"
>
</cn-region-picker>

<!-- 省略代碼 -->
data () {
  return {
    pickCity: []
  }
}

選擇返回的數據:


[{
  "cityIndex": 37,
  "id": "210200",
  "name": "大連市",
  "pinYin": "dalian",
  "shortName": "大連"
}, {
  "cityIndex": 41,
  "id": "210600",
  "name": "丹東市",
  "pinYin": "dadong",
  "shortName": "丹東"
}]

屬性

參數 說明 類型 默認值
placeholder 不說明 String 選擇城市

本地運行

npm install npm run dev

原文地址:https://segmentfault.com/a/1190000017269825

vue城市選擇組件