vue地区选择组件教程详解
时间:2019-04-14
本文章向大家介绍vue地区选择组件教程详解,主要包括vue地区选择组件教程详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概述
主要用于全国地区数据的操作,包括省,市,区三级联动,地区数据的添加和删除; 在操作地区数据时,以前也用过树形的地区选择组件,但因其在再操作大量的地区数据时,渲染缓慢,所以我们就换了另一种数据展示形式和交互形式,从而就有了这个组件。
注意:该组件是 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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel框架中视图的基本使用方法分析
- laravel5 Eloquent 实现事务方式
- Laravel 微信小程序后端搭建步骤详解
- Laravel使用swoole实现websocket主动消息推送的方法介绍
- Laravel框架Eloquent ORM删除数据操作示例
- PHP常用函数之base64图片上传功能详解
- laravel-admin 实现在指定的相册下添加照片
- Laravel框架Eloquent ORM修改数据操作示例
- PHP常用函数之格式化时间操作示例
- 在phpstudy集成环境下的nginx服务器下配置url重写
- 关于laravel-admin ueditor 集成并解决刷新的问题
- PHP常用函数之根据生日计算年龄功能示例
- Laravel 之url参数,获取路由参数的例子
- PHP call_user_func和call_user_func_array函数的简单理解与应用分析
- PHP常用函数之获取汉字首字母功能示例