vue三级联动(省市区)插件v-distpicker

vue三级联动(省市区)插件v-distpicker

项目中很多地方需要实现三级联动的效果,介绍 一个简单好用的插件 v-distpicker
步骤如下:
1.下载

npm install v-distpicker --save

2.在main.js中引入注册

import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)

3.在当前组件中引入

<template>
  <v-distpicker></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}
</script>

效果如下:
在这里插入图片描述

4.另一种样式

<template>
  <v-distpicker type="mobile"></v-distpicker>
<template>

在这里插入图片描述

还有其他样式可参考官网,文档简单易懂,方便使用
v-distpicker官方文档
但是该插件中的省市区是固定的,不能使用自己的接口城市,如何使用自己的接口城市实现以上效果请期待我的下一篇博客~

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
简介CJPCD 是一款原生开源的 javascript 插件,用于生成省市区选择器,基本用法十分简单。使用方法最简单的使用只需要两个步骤:放置容器,引入依赖<!--存放省市区数据的三个 select--> <select id="province"></select> <select id="city"></select> <select id="district"></select> <!--引入插件--> [removed][removed]调用方法var pcd = new CJPCD('province','city','district');效果如下图API初始化/**     provinceId :省份 select id     cityId     :城市 select id     districtId :县区 select id */ var pcd = new CJPCD(provinceId,cityId,districtId);设置初始值/**     provinceName :省份名称     cityName     :城市名称     districtName :县区名称     注意:前提是必须初始化 */ pcd.setUp('provinceName','cityName','districtName');eg:var pcd = new CJPCD('provinceId','cityId','districtId');//先初始化 pcd.setUp("广东省","广州市","越秀区");//设置值使用场景:设置值一般用于地址信息的修改重置pcd.reSet();获取值pcd.getValue('json');//指定以json对象返回 pcd.getValue();//默认以json对象返回,效果同上json 对象返回如下:{"province":"广东省","city":"广州市","district":"越秀区"};指定拼接成一定格式的字符串进行返回,以逗号为例(当然也可以使用其他字符串)pcd.getValue(',');//结果使用逗号拼接成字符串返回值如下"广东省,广州市,越秀区"补充说明如果业务中涉及多组地址选择,请创建多个 CJPCD 实例 如var pcd1 = new CJPCD(provinceId1,cityId1,districtId1); var pcd2 = new CJPCD(provinceId2,cityId2,districtId2); ... var pcdn = new CJPCD(provinceIdn,cityIdn,districtIdn);  标签:省市区三级联动
Vue三级联动省市区可以使用mint-ui的Picker组件来实现。在Vue实例中,你可以定义一个data对象来存储当前选择的省市区的值,如引用所示。通过设置初始值和监听变化,可以实现当省市的选项改变时,自动更新市区的选项。同时,你可以使用v-for指令来循环遍历省市区的选项,并绑定相应的value和label属性。这样,当用户选择省市区时,Vue会自动更新data对象中的值。你还可以根据具体需求,使用computed属性或watch来监听data对象的变化,并在变化时执行相应的逻辑。通过这种方式,你可以实现Vue三级联动省市区功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue省市区三级联动-封装集成](https://blog.csdn.net/weixin_38633659/article/details/83625778)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue------实现省市区三级联动](https://blog.csdn.net/weixin_52953038/article/details/126555237)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值