vue 省市区选择插件v-distpicker设置初值与选择后触发方法

最新推荐文章于 2024-08-13 08:58:12 发布
最新推荐文章于 2024-08-13 08:58:12 发布
阅读量2k 收藏 2
点赞数 4
分类专栏： vue 三级联动 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a82048195/article/details/107717365
版权
本文介绍了如何在Vue项目中使用v-distpicker插件进行省市区选择，并详细说明了安装、引入以及如何设置初始值和响应选择事件的方法。
摘要由CSDN通过智能技术生成

废话不多说，先看效果：
在这里插入图片描述

一、安装

npm install v-distpicker --save

二、引用（main.js）

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

三、使用

<a-form-item label=
最低0.47元/天 解锁文章
丶酸酸
关注
专栏目录
v-distpicker
weixin_46801609的博客
11-10 2578
v-distpicker的简单安装和使用 — 一款地区选择插件 1.安装 （1）进入到对应的vue项目目录中，打开终端 （2）输入安装指令 npm install v-distpicker --save 2.引用方式(二选一) (1)在main.js中引入 import VDistpicker from 'v-distpicker';//引入v-distpicker Vue.component('v-distpicker',VDistpicker);//全局注册v-distpicker
VUE-地区选择器(V-Distpicker)组件使用
xcxcsdn的博客
11-15 3350
代码转自：VUE-地区选择器(V-Distpicker)组件使用_小猪的博客-CSDN博客 效果如下： 1、安装 使用 npm 安装： npm install v-distpicker --save 使用 yarn 安装 yarn add v-distpicker --save2、使用 注册组件 注册全局组件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker); 注册组件 ..
distpicker省市区插件设置"请选择省市区"提示/或设置初始值问题
hey
09-26 7085
使用distpicker插件时想是设置初始值“请选择省/市/县  文档中给的方法并不能生效 以下为解决办法 html代码 &lt;div id="distpicker1"&gt; &lt;select data-province="---请选择省---"&gt;&lt;/select&gt; &lt;select data-city="---选择市---"&
V - Distpicker：中国省市区选择器的灵活解决方案
最新发布
gitblog_00292的博客
08-13 325
V - Distpicker：中国省市区选择器的灵活解决方案 v-distpicker:sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.项目地址:https://gitcode.com/gh_mirrors/vd/v-distpi...
VUE-地区选择器(V-Distpicker)
热门推荐
书写人生
04-29 2万+
V - Distpicker 地区选择器环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上.文档: https://distpicker.uine.org/github: https://github.com/jcc/v-distpicker项目运用:1.表单... &lt;el-form-item label="地区"&gt; &lt;v-distpick...
distpicker初始化以及设定指定值
shanliang
04-22 1414
## 碰到的问题 在jquery插件库中下载了distpicker,然后根据它的模板用了一下，但是在给它设定特定的值以及初始化时出现问题（编辑的时候显示的应该是数据库中的记录，所以应该用自己的数据，然后如果要插入，则需要清空数据，设定默认值----我新增和修改用的是同一个。） ## 解决方法 ### html 代码 ··· <div class="form-group" st...
jQuery Distpicker如果修改功能的时候，怎么默认选中省市区
rendeyishi的专栏
01-12 9634
Distpicker省市区如果修改功能的时候，怎么默认选中 需要在data-toggle这个div 这里定义一个id，然后在通过distpicker来自定义省市区 destroy一定要写 在select 的 data-province="---- 选择省 ----"  data-city="---- 选择市 ----" data-district="---- 选择区 ----"
v-distpicker一个灵活，高度可用的区域选择器，用于为Vue.js 2.x拾取中国的省，市和地区。-Vue.js开发
05-27
V-Distpicker这是文档安装npm一个灵活的，高度可用的区域选择器，用于选择中国的省，市和地区。 V-Distpicker这是文档安装npm install v-distpicker --save或yarn add v-distpicker --save用法注册组件注册全局组件...
v-distpicker：一种灵活，高度可用的区域选择器，用于选择中国的省，市和地区
02-06
V-Distpicker 这是 安装 npm install v - distpicker -- save 要么 yarn add v - distpicker -- save 用法 注册组件 注册全局组件： import Distpicker from 'v-distpicker' Vue . component ( 'v-distpicker' , ...
CitySelector:基于vue的移动端城市选择组件
05-13
CitySelector 基于vue的移动端城市选择组件 手机扫这里看demo 针对移动端的城市选择组件 可以使用拼音或关键字进行检索，也可以在右侧检索栏快速滑动 本地构建方法：clone后npm install->npm run dev 欢迎大家提issues呀 如有需要可e-mail: 版本管理 pub+数字 6.1 去掉了rem，改为px， 分支pub1 tips: master分支在开发，需要clone的话找pub版本
vue省市区组件，mint-ui封装的省市区组件
07-03
当用户在 Distpicker 中选择时，`onConfirm` 方法会被触发，输出选定的省市区名称。 总的来说，通过 Mint-UI 的 Distpicker 组件，我们可以轻松地在 Vue-CLI 项目中实现省市区三级联动的功能。这个组件提供了良好的...
一个简单易用的 Vue 组件 V - Distpicker
weixin_34241036的博客
03-17 185
V - Distpicker 是一个简单、易用、灵活的 Vue 组件，且兼容 PC端、移动端。 由于最近使用 vue 比较多，加上项目需求，写了这个地址选择器。 有人会觉得已经有很多的地址选择器，为何还要花那么多的精力去写一个？ 大多数的地址选择器都是基于 JQuery 的，当然也有 vue 的，但是满足不了需求， 因为我需要移动端的。...
v-distpicker重置的问题
暖一杯茶的博客
02-22 360
v-distpicker重置的问题
VUE-地区选择器(V-Distpicker)组件使用心得
weixin_34353714的博客
05-07 812
废话不多说，直接进入正题。安装，引用，这些直接从官网拷贝来的，就不多说了。1、安装使用 npm 安装： npm install v-distpicker --save使用 yarn 安装 yarn add v-distpicker --save2、使用 注册组件 注册全局组件 import VDistpicker from 'v-dis...
vue底部选择器_vue 地区选择器v-distpicker的常用功能
weixin_39700397的博客
12-20 236
今天给大家推荐一款好用的vue插件，地区选择器 v-distpicker ，接下来我给大家介绍一些常用的功能1.引入插件(截图官网并解释)2.使用插件(截图官网并解释)就是这么简单，只需写个标签，就会出现地区选择器，并且全国匹配城市(有插件就是好，直接拿来用)3.与后端进行接口联调------------- 重点来啦！！！前端之所以使用 地区选择器 ，目的就是为了提交用户选择的地区信息，最终通过接...
前端JQuery插件distpicker.js的部分操作使用
互联网编程爱好者
03-26 2132
前端JQuery插件distpicker.js的部分操作使用 前言： 需要导入的插件JQuery以及distpicker.js。distpicker GitHub官网，可在官网查询，也可在bootcdn中下载。 简单引入 <!-- data-toggle="distpicker"必选,data-value-type="code"可选，表示选中值为省市区代码， data-province 可选，默认省级显示 data-city 可选，默认市级显示 data-district 可选，默
js函数中参数设置默认值——基本用法-推荐、与解构赋值默认值结合、双重默认值 & js中的!!-非布尔类型值转为布尔类型值之对于null、undefined、0、“”都会被转为flase
weixin_44867717的博客
09-03 1717
js
vue实现地区三级联动
txyllyyj的博客
11-07 252
引入vue.js文件和v-distpicker.js文件 v-distpicker.js-HTML5文档类资源-CSDN下载 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="/vue/vue-v2.6.10.js"></script> <script type="tex
Vue.js教程：v-bind详解与class、style用法示例
"这篇文章主要探讨了Vue.js框架中的v-bind属性、class和style的使用方法，通过实例展示了如何在Vue应用中动态绑定元素属性、切换CSS类和控制内联样式。" 在Vue.js中，v-bind是一个非常重要的指令，用于将数据绑定到...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值