zoukankan      html  css  js  c++  java
  • vue城市选择组件

    适用于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)
    

    使用:

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

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

    
    <p>选择返回的数据:</p>
    
    

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

    
    <h2>属性</h2>
    <table>
    <thead><tr>
    <th>参数</th>
    <th>说明</th>
    <th>类型</th>
    <th>默认值</th>
    </tr></thead>
    <tbody><tr>
    <td>placeholder</td>
    <td>不说明</td>
    <td>String</td>
    <td>选择城市</td>
    </tr></tbody>
    </table>
    <h2>本地运行</h2>
    ```npm install
    npm run dev
    

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

  • 相关阅读:
    016 vue的组件通信
    015 vue组件中的数据
    014 vue的组件化开发
    013 vue的js中的高阶函数
    012 vue的v-model的使用
    011 vue的购书案例
    010 vue的过滤器的使用
    CF1519F
    CF1519E
    CF1517F
  • 原文地址:https://www.cnblogs.com/datiangou/p/10121734.html
Copyright © 2011-2022 走看看