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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
详解vue 组件
Jun 11 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
留言板翻页的实现详解
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Web制作验证码功能实例代码
2017/06/19 Javascript
vue组件与复用详解
2018/04/08 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
新手常见6种的python报错及解决方法
2018/03/09 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python序列类型的打包和解包实例
2019/12/21 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Django封装交互接口代码
2020/07/12 Python
python调用百度API实现人脸识别
2020/11/17 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
干部竞争上岗演讲稿
2014/09/11 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python