基于Vue2实现简易的省市区县三级联动组件效果

这是一个基于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实现简易的省市区县三级联动组件效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue.js模仿京东省市区三级联动的选择组件实例代码

    vue.js模仿京东省市区三级联动的选择组件实例代码

    前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section cl

  • vue省市区三联动下拉选择组件的实现

    vue省市区三联动下拉选择组件的实现

    我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用 我们今天来实现一个 利用vuejs开发的 省市区三联动的组件  CitySelect.vue组件 首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了):    provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的

  • Vue.js组件tree实现省市多级联动

    Vue.js组件tree实现省市多级联动

    小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo

  • 基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装 我们使用npm安装: npm install v-distpicker --save 使用 首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市

  • Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

    本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档. 此处选用的xml文档(共1000多行)主要结构如下: <?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" provinceID="110000" province="

  • jQuery实现的省市县三级联动菜单效果完整实例

    jQuery实现的省市县三级联动菜单效果完整实例

    本文实例讲述了jQuery实现的省市县三级联动菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • vue移动端城市三级联动组件使用详解

    vue移动端城市三级联动组件使用详解

    本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下 先看效果图 以下组件代码 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text

  • Vue2仿淘宝实现省市区三级联动

    Vue2仿淘宝实现省市区三级联动

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样--为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可.(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的.请配合博客再下载此json)). 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取) 这个张什么样,以什么形式出现,取决于贵公

  • JavaScript省市区三级联动菜单效果

    本文实例为大家分享了三级联动省市区js完整代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var c

  • JavaScript实现三级联动菜单效果

    三级联动考察的应该是对于数据的处理,只要清楚其中的关系,再多几级都是一样的: html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3级联动菜单</title> <script> var region = { 广东: { "广州":["广州1","广州2",&

  • js 实现省市区三级联动菜单效果

    js 实现省市区三级联动菜单效果

    效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>省市区三级联动</title> </head> <body> <form> <select id="province"> <option>请选择省份</option> </se

  • 最好用的Android省市区三级联动选择效果

    Android省市区选择三级联动效果,一个不大不小的功能,就算你做过,但是没有相关的代码直接写,也要花掉你至少半天时间. 下面我写出我的实现过程(思路绝对清晰). 先上效果图 一.准备数据 我是用的本地的json数据(走网络的话太慢,每次都要请求),放在asserts中.格式如下: [{ "name": "河北省", "city": [ { "name": "石家庄市", "area":

  • 基于jQuery+JSON的省市二三级联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

随机推荐