脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 三级联动组件

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

 更新时间：2018年11月05日 09:02:59   作者：月光光  
这是一个基于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实现简易的省市区县三级联动组件效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue中的v-model，v-bind，v-on的区别解析

    Vue中的v-model，v-bind，v-on的区别解析

    vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合，vue.js有配套的第三方类库，可以整合起来做大型项目的开发，这篇文章主要介绍了v-model，v-bind，v-on的区别,需要的朋友可以参考下
    2022-12-12
  • 详解三种方式解决vue中v-html元素中标签样式

    详解三种方式解决vue中v-html元素中标签样式

    这篇文章主要介绍了三种方式解决vue中v-html元素中标签样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 手把手教你Vue-cli项目的搭建

    手把手教你Vue-cli项目的搭建

    这篇文章主要为大家详细介绍了Vue-cli项目的搭建方法，文中图片介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • 解读Vue组件注册方式

    解读Vue组件注册方式

    无论是Vue还是React，都有组件的概念。组件，就是能和别人组合在一起的物件。在前端页面开发过程中，将一个页面划分成一个个小的模块，每个模块单独定义，每个模块就是一个组件。组件可以进行复用，A页面和B页面有一个相似的模块，可以抽离成一个可局部修改的组件。
    2021-05-05
  • vue3实现动态添加路由

    vue3实现动态添加路由

    这篇文章主要介绍了vue3实现动态添加路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue3之 Vue CLI多环境配置

    Vue3之 Vue CLI多环境配置

    这篇文章主要介绍了Vue3之 Vue CLI多环境配置，通俗点说就是使用配置文件来管理多环境，实现环境的切换，西阿棉详细内容,需要的朋友可以参考一下
    2021-11-11
  • Vue必学知识点之forEach()的使用

    Vue必学知识点之forEach()的使用

    在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，这时候就需要用到forEach()了，下面这篇文章主要给大家介绍了关于Vue必学知识点之forEach()使用的相关资料，需要的朋友可以参考下
    2021-05-05
  • 详解vue+vueRouter+webpack的简单实例

    详解vue+vueRouter+webpack的简单实例

    这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例，非常具有实用价值，需要的朋友可以参考下
    2017-06-06
  • 使用Vue-cli3.0创建的项目 如何发布npm包

    使用Vue-cli3.0创建的项目 如何发布npm包

    这篇文章主要介绍了使用Vue-cli3.0创建的项目，如何发布npm包,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-10-10
  • vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

    vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例

    在vue项目中难免遇到有要生成条形码或者二维码的功能需求,下面这篇文章主要给大家介绍了关于vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论