基于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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
利用 JavaScript 构建命令行应用
Nov 17 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
使用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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP线程的内存回收问题
2016/07/08 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python实现对变位词的判断方法
2020/04/05 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Python request中文乱码问题解决方案
2020/09/17 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2014年财政局工作总结
2014/12/09 职场文书
优秀校长事迹材料
2014/12/24 职场文书