vue地区选择组件教程详解


Posted in Javascript onMay 04, 2018

概述

主要用于全国地区数据的操作,包括省,市,区三级联动,地区数据的添加和删除; 在操作地区数据时,以前也用过树形的地区选择组件,但因其在再操作大量的地区数据时,渲染缓慢,所以我们就换了另一种数据展示形式和交互形式,从而就有了这个组件。

注意:该组件是 vue.js 组件

demo

抢鲜体验请点击这里 demo

API

Props

参数 类型 说明
area Array 传入组件的地区的数据

Events

事件名 参数 说明
selected area 组件中选中的地区

详细说明

Props

area

area 参数是必选项,表示组件初始化时的地区数据,可以为空。 area 是一个包含多个对象的数组,其中每个对象的数据结构如下:

...
area: [
 {Name: '北京', ID: '01'},
 {Name: '南京', ID: '0401'},
 {Name: '西湖区', ID: '060105'}
],
...

因为后来在实际的使用中,发现有时候,后台只会返回一个地区的 ID 值,所以这里做了优化,可以只传入 ID 的值,比如这样:

...
area: [
 {ID: '01'},
 {ID: '0401'},
 {ID: '060105'}
],
...

selected

selected 是由组件内部发布的一个事件,你可以在组件外面订阅这个事件,从而得到它返回的值,这个值就是组件当前选中的所有的地区,返回的这个值是由多个包含地区数据的对象组成的数组,数据结构和 area 参数一样

简单的例子

<div>
  <addressmap :area="area" @selected="selected"></addressmap>
</div>

安装和使用

npm install adc-addressmap

若作为全局组件使用

//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
 components: { Addressmap},
...
}

总结

以上所述是小编给大家介绍的vue地区选择组件教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue 按键修饰符处理事件的方法
May 04 #Javascript
vue mint-ui tabbar变组件使用
May 04 #Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
详解vue组件基础
May 04 #Javascript
You might like
Javascript中Eval函数的使用说明
2008/10/11 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue跨域解决方法
2017/10/15 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python备份Mysql脚本
2008/08/11 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
文员岗位职责
2013/11/09 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
二手房购房意向书范本
2014/04/01 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
会计实训总结范文
2015/08/03 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android