基于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 相关文章推荐
javascript Array对象基础知识小结
Nov 16 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Django xadmin安装及使用详解
2020/10/26 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
创先争优活动承诺书
2014/08/30 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
机械生产实习心得体会
2016/01/22 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
SQL Server内存机制浅探
2022/04/06 SQL Server