基于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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
使用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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php GUID生成函数和类
2014/03/10 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php中序列化与反序列化详解
2017/02/13 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
初探js和简单隐藏效果的实例
2017/11/23 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python3实现字符串操作的实例代码
2019/04/16 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
上课迟到检讨书
2014/02/19 职场文书
写自荐信的注意事项
2014/03/09 职场文书
出生公证书样本
2014/04/04 职场文书
成绩单公证书
2014/04/10 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
英语导游欢迎词
2015/09/30 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
python之django路由和视图案例教程
2021/07/26 Python