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)

使用:

  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

原文地址:https://www.cnblogs.com/datiangou/p/10121734.html

时间: 2024-11-10 13:01:39

vue城市选择组件的相关文章

省份、城市选择组件

组件要求: 1.能够选择中国的省份.城市 2.组件具有可扩展性,较好的复用性 效果: 具体实施: 1.类似于照片选择组件,第一个界面显示省份,第二个组件显示城市. // // ViewController.m // CityPicker // // Created by vousaimer on 15-1-23. // Copyright (c) 2015年 va. All rights reserved. // #import "ViewController.h" #import &

vue动态选择组件

有时候会用到同一位置因为条件不同而使用不同组件,vue中可以用 :is 1 <template> 2 <div class="RuleContent"> 3 <el-container> 4 <el-header>{{benginLable}}</el-header> 5 <el-main> 6 <component :is="ruleMsg" :id="treeid"

vue仿京东省市区三级联动选择组件

工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section class="address"> <secti

vue仿淘宝地址选择组件

Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': leftValue + 'px', 'top': topValue + 'px' }" class="content"> <ul class="area-select"> <li v-for="(item, index) in

vue --子父组件传值

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: [plain] view plain copy <template> <div class="train-city"> <span @click='select(`大连`)'>大

Vue 中数据流组件

好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的还是我们自己给的?其实我觉得自己选择的方向是对的,但是有时难免会怀疑,是否有人和我在做一样的事情,我希望找到有趣的伙伴,做一些有趣的事情. Vue 中数据流组件 又将年终了,该做年终总结了呀..最近花了一些时间,升级了一下我们的技术架构,使用 vue 作为我们的框架.延续传统,我们仍然需要开发一些

Vue自定义日历组件

今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart="true" :calendarType="1" :markDate="markDate" :markDateClass="markDateClass" :agoDayPrevent="agoDayPrevent&qu

Vue的入门&amp;&amp;组件

Vue基础 什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 组件的作用 组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 表单属性 表单元素的分类 注册组件并使用 通过Vue.component(

Vue.js说说组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创