基于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 相关文章推荐
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
js实现简单的轮播图效果
Dec 13 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 strrpos()与strripos()函数
2013/08/31 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js 操作符汇总
2014/11/08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
vue项目上传Github预览的实现示例
2018/11/06 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Python入门篇之列表和元组
2014/10/17 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python程序退出方式小结
2017/12/09 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python三大神器之fabric使用教程
2019/06/10 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
晚宴邀请函范文
2014/01/15 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
婚前保证书范文
2015/02/28 职场文书
MySQL约束超详解
2021/09/04 MySQL
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers