资讯专栏INFORMATION COLUMN

一个基于 Vue 的地区选择器v-distpicker

zebrayoung / 545人阅读

摘要:先扯一会儿上海天气真炎热,这让东北人咋活,据说园区一位非洲哥们都中暑了,因此我吃完午餐赶紧跑回办公室保命要紧,吹着空调,给大家写着技术文章,别是一番滋味在心头闲话少说,进入主题重点部分今天给大家推荐一款好用的插件,地区选择器,接下来我给大

先扯一会儿

上海天气真炎热,这让东北人咋活,据说园区一位非洲哥们都中暑了,因此我吃完午餐赶紧跑回办公室(保命要紧),吹着空调,给大家写着技术文章,别是一番滋味在心头~ 闲话少说,进入主题!!!


重点部分

今天给大家推荐一款好用的vue插件,地区选择器v-distpicker,接下来我给大家介绍一些常用的功能

1.引入插件(截图官网并解释)

2.使用插件(截图官网并解释)

就是这么简单,只需写个标签,就会出现地区选择器,并且全国匹配城市(有插件就是好,直接拿来用)

3.与后端进行接口联调-------------重点来啦!!!
前端之所以使用地区选择器,目的就是为了提交用户选择的地区信息,最终通过接口传递给后端人员处理(某些时刻,我们只是数据的搬运工~)
代码如下:

解释:
1.通过这三个事件,监听用户输入省 市 区的信息;
2.在省监听事件中console信息,输出了一个对象(插件已封装好的数据),并获取该对象的value属性值;

3.this.formValidate是我初始化的对象,之后把获取的信息放入formValidate对象,最终一起提交给后端(axios请求),大功告成!

收尾

以上就是我为大家带来的分享(完了,写的太投入,午休忘睡觉了),因为并不是很难的问题,而且上面也总结的很清晰了,所以我就不再做最后总结了(唠叨、墨迹),非常感谢大家耐心看完(感谢继续加粗)
天气炎热,记得给"电脑"泼水降温哈~
个人微信 在下方!

欢迎大家以后一起交流与学习~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54239.html

相关文章

  • 一个基于 Vue 地区选择v-distpicker

    摘要:先扯一会儿上海天气真炎热,这让东北人咋活,据说园区一位非洲哥们都中暑了,因此我吃完午餐赶紧跑回办公室保命要紧,吹着空调,给大家写着技术文章,别是一番滋味在心头闲话少说,进入主题重点部分今天给大家推荐一款好用的插件,地区选择器,接下来我给大 先扯一会儿 上海天气真炎热,这让东北人咋活,据说园区一位非洲哥们都中暑了,因此我吃完午餐赶紧跑回办公室(保命要紧),吹着空调,给大家写着技术文章,别...

    K_B_Z 评论0 收藏0
  • 基于 Weui.js 地区选择 weui-distpicker

    摘要:是一个的延伸版本,一个基于简单易用灵活的组件。是一个轻量的框架,当然这个只针对于移动端。为何有了,造这轮子有更好的支持,支持返回地区名字以及地区代码。 Weui - Distpicker 是一个 V - Distpicker 的延伸版本,一个基于 Weui.js 简单、易用、灵活的 Vue 组件。 weui.js 是一个轻量的 Javascript UI 框架,当然这个 UI 只针对...

    zhunjiee 评论0 收藏0
  • V - Distpicker 一个简单易用地区选择

    摘要:下载配置在中引用引入省市选择器注册组件使用这就已经配置完了可以使用了附上我的代码所在地城市选择器填写详细地址城市选择器请选择所在省份请选择所在城市传给父组件的值详情的内容先分割省自治区市特别行政区取出省 1下载 npm install v-distpicker --save or yarn add v-distpicker --save 2配置 1)在main.js中引用 imp...

    Fundebug 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<