基于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 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
react中Suspense的使用详解
Sep 01 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安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
javascript json2 使用方法
2010/03/16 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
校外活动方案
2014/08/28 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书