基于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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
vue router 配置路由的方法
Jul 26 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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自定义分页类完整实例
2015/12/25 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python脚本替换指定行实现步骤
2017/07/11 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python进行两个表格对比的方法
2018/06/27 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
详解Python的三种拷贝方式
2020/02/11 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python必须了解的35个关键词
2020/07/16 Python
python实现银行账户系统
2021/02/22 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
Delphi笔试题
2016/11/14 面试题
意向书范文
2014/03/31 职场文书
企业金融服务方案
2014/06/03 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
九寨沟导游词
2015/02/02 职场文书
联谊会开场白
2015/06/01 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL