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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
vue如何截取字符串
May 06 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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内核探索之变量
2015/12/22 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python中Flask框架简单入门实例
2015/03/21 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python字典底层实现原理详解
2019/12/18 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
我的网上商城创业计划书
2013/12/26 职场文书
农村党支部先进事迹
2014/01/14 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015年重阳节主持词
2015/07/04 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers