v-distpicker

最新推荐文章于 2024-05-15 10:04:15 发布
最新推荐文章于 2024-05-15 10:04:15 发布
阅读量2.5k 收藏 7
点赞数
分类专栏： vue插件 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46801609/article/details/109609143
版权
v-distpicker的简单安装和使用 — 一款地区选择插件1.安装（1）进入到对应的vue项目目录中，打开终端（2）输入安装指令npm install v-distpicker --save2.引用方式(二选一)(1)在main.js中引入import VDistpicker from 'v-distpicker';//引入v-distpickerVue.component('v-distpicker',VDistpicker);//全局注册v-distpicker
摘要由CSDN通过智能技术生成

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)
最低0.47元/天 解锁文章
潇筱子萧
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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'导入Distpicker Vue.component（'v-distpicker'，Distpicker ）注册组件：从“ v-distpicker”导入VDistpicker导出默认{组件：{VDistpicker}}如何使用Basic：
城市选择插件 V-Distpicker 组件详解以及全套用法
laihaodong的博客
04-29 2万+
首先第一步,这个插件是一定要在vue项目中使用的 一,安装 使用 npm 安装： npm install v-distpicker --save 使用 yarn 安装 yarn add v-distpicker --save 二使用 1.在main.js中引入 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker...
推荐使用：V-Distpicker - 中国区域选择组件
最新发布
gitblog_00048的博客
05-15 287
推荐使用：V-Distpicker - 中国区域选择组件 项目地址:https://gitcode.com/jcc/v-distpicker 项目介绍 V-Distpicker 是一款轻巧灵活的 Vue 组件，专为选取中国省份、城市和区县而设计。它提供了高度可用的界面，并支持 Vue 2 和 Vue 3 框架。这款组件以其简洁的 API 设计和出色的用户体验，为你的应用添加了一流的地址选择功能。 ...
vue 城市级联选择 distPicker
LEVsunshine的博客
10-09 941
vue地区选择器（v-distPicker） 官方文档☞https://distpicker.pigjian.com/ 安装 npm install v-distpicker --save 配置 main.js中 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker) 引入 import...
v-distpicker——省市区插件使用——基础积累
yehaocheng520的博客
04-09 493
v-distpicker——省市区插件使用——基础积累
v-distpicker 直辖市的修改
m0_38105640的博客
09-30 1105
一.v-distpicker 的用法 1.安装：npm install v-distpicker 二。改造直辖市 这个组件在选择四个直辖市的时候有点问题，比如选择北京，就是北京市，北京市，···区，这样显示感觉想出错了一样：如果 1.第一种，将直辖市，改成北京，北京市，XX区，淘宝手机地址更换就是这样的，看起来也比北京市，北京市好。 其他 三个直辖市同理，改过后，组件成这样，完成。 这种方案改动小，而且简单，也好于“北京市北京市”这种的 ...
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' , ...
详解VUE-地区选择器(V-Distpicker)组件使用心得
08-27
.divwrap >>> .distpicker-address-wrapper { color: #999; } .divwrap >>> .address-header { position: fixed; bottom: 400px; width: 100%; background: #000; color: #fff; } .divwrap >>> .address-...
v-distpicker.js
06-13
dist，v-distpicker.js 不用npm。只需一个js。搞定。
v-distpicker的简单安装和使用 — 一款地区选择插件
麦叔
05-26 1967
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 (2)在想要用的.vue文件中引用 import VD.
vue+elementui+v-distpicker实现城市三级联动/地址选择
anydo_wang
06-07 1634
由于项目中有城市选择的业务需求，百度之下发现了v-distpicker，这个插件不错，基本能满足业务需求，但是它使用了原生的select标签，样式很难看，不同的浏览器上显示的效果也不尽相同，而且貌似没有办法去重置它的样式，于是就把它改成了ElementUI的Select，很简单！ 1、安装v-distpicker,怎么安装就不说了，官方文档https://distpicker.unie.fun/ 2、安装完成后,扎到node_modules/v-distpicker/src，如图 3、将sr.
distpicker.js
10-15
distpicker省市区三级联动插件所需要的JS,大家自取即可
VUE-地区选择器(V-Distpicker)
热门推荐
TA的博客
01-09 2万+
V - Distpicker 地区选择器 环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上. 文档: https://distpicker.iline.co/ github: https://github.com/jcc/v-distpicker 项目运用: 1.表单 ... "地区"> "user.xtrysf" :c
v-distpicker地区选择器组件使用
qq_45249945的博客
08-19 202
v-distpicker地区选择器组件使用以及如何取数据
城市选择插件 V-Distpicker的简单使用
ssxx_zzyy_baba的博客
01-27 316
给插件绑定参数，因为在data里已经定义了参数，所以调用的时候注意自己定义的参数是什么。这个插件好像只能在 vue项目中使用，看大佬们是这样说的。完事了，因为使用的场景比较简单，所以也只能提供这点内容。说一下我在项目中的使用，因为比较简单可能和大家的不一样。data就是选中的数据，不清楚的可以打印出来查看一下。在 components 里注册插件。设置选择的方法，然后获取数据存入本地。changeAddress方法。先在vue项目中下载。
Vue+element ui表单中省市区级联选择—v-distpicker/Cascader
咏絮
11-12 3711
Vue+element ui表单中省市区级联选择—v-distpicker/Cascader
vue中实现省市区三级联动(V-Distpicker插件)
星晴Dong
07-05 1万+
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址 使用方法 npm install v-distpicker --save import VDistpicker from 'v-distpicker' export default { components: { VDistp...
v-distpicker的校验举例
06-07
好的，下面我来举一个v-distpicker校验的例子。假设我们有一个表单需要用户填写收货地址，其中收货地址是必填项，我们可以使用v-distpicker来实现地址的省市区三级联动选择，同时开启校验功能。 首先，在模板中使用v-distpicker组件，并设置`validate`属性为`true`： ``` <template> <div> <v-distpicker v-model="address" :validate="true"></v-distpicker> <span v-if="!isValid">请填写收货地址</span> </div> </template> ``` 然后，在组件的`data`中定义`address`和`isValid`变量，并在`validate`函数中进行校验： ``` <script> export default { data() { return { address: { province: '', city: '', district: '' }, isValid: true } }, methods: { validate() { if (!this.address.province || !this.address.city || !this.address.district) { this.isValid = false; } else { this.isValid = true; } } }, watch: { address: { handler: 'validate', deep: true } } } </script> ``` 在上面的代码中，我们在组件的`data`中定义了`address`和`isValid`变量，其中`address`用于存储用户选择的省市区信息，`isValid`用于记录地址信息是否有效。在`validate`方法中，我们对`address`的省、市、区进行非空校验，如果任意一项为空，则将`isValid`设置为`false`，否则将`isValid`设置为`true`。最后，我们在`watch`选项中监听`address`的变化，当`address`发生变化时，自动调用`validate`方法进行校验。在模板中，我们通过`v-if`指令来根据`isValid`的值显示提示信息。 这样，我们就可以通过v-distpicker实现地址信息的校验了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值