基于Vue2实现简易的省市区县三级联动组件效果


Posted in Javascript onNovember 05, 2018

这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等。提供原始省市县代码和名称数据,适用于各种有关城市区县的应用。

安装

我们使用npm安装:

npm install v-distpicker --save

使用

首先在模板中加入组件:

<v-distpicker></v-distpicker>

如果要带默认值,则可以这样:

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

然后在js部分调用组件:

<script>
import VDistpicker from 'v-distpicker'
export default {
 name: 'App',
 components: {
  VDistpicker
 }
}
</script>

这样就可以了,如果要使用更多属性配置和方法请参照以下两个表格。

属性配置

参数 说明 类型 可选值 默认值
province 省份(选填) String 省份名 null
city 城市(选填) String 城市名 null
area 地区(选填) String 地区名 null
type 类型(选填,默认 select) String mobile null
disabled 是否禁用(选填,默认 false,且 type='mobile' 时无效) Boolean true, false false
hide-area 隐藏地区(选填) Boolean true, false false
onlu-province 只显示省份(选填) Boolean true, false false
static-placeholder 是否将占位符显示为已经选择的项(仅 type='mobile' 时有效) Boolean true, false false
placeholders 占位符(选填) Object province, city, area { province: '省', city: '市', area: '区' }
wrapper 外层 Class(选填) String customize address
address-header address-header 样式(选填,类型必须为 mobile) String customize address-header
address-container address-container 样式(选填,类型必须为 mobile) String customize address-contaniner

方法

方法 说明 参数
province 选择省份 返回省份的值
city 选择城市 返回城市的值
area 选择地区 返回地区的值
selected 选择最后一项时触发 返回省市区的值

项目地址:https://github.com/jcc/v-distpicker

总结

以上所述是小编给大家介绍的基于Vue2实现简易的省市区县三级联动组件效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vue组件实现进度条效果
Jun 06 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
基于jQuery的星级评分插件
2011/08/12 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
深入了解Python数据类型之列表
2016/06/24 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Django中提示消息messages的设置方式
2019/11/15 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
医学生自我鉴定范文
2013/11/08 职场文书
婚庆司仪主持词
2014/03/15 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
安全守法证明
2015/06/23 职场文书
志愿者工作心得体会
2016/01/15 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
pytorch实现手写数字图片识别
2021/05/20 Python
部分武汉产收音机展览
2022/04/07 无线电