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乱码的一次解决过程 图解教程
Feb 20 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
django 常用orm操作详解
2017/09/13 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python的命名规则知识点总结
2019/10/04 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python中的全局变量如何理解
2020/06/04 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python实现三种随机请求头方式
2021/01/05 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
阿拉伯书店:Jamalon
2019/07/24 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
施工协议书范本
2014/04/22 职场文书
师恩难忘教学反思
2014/04/27 职场文书
个人工作主要事迹
2014/05/08 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
学习十八大标语
2014/10/09 职场文书
2014年终个人总结报告
2015/03/09 职场文书
小兵张嘎观后感
2015/06/03 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers