Vue使用distpicker插件实现省市级下拉框三级联动
前言
这几天做项目,想着用一个全国省市区插件,之前就知道有几种,比如通过JSON文件生成对应的区域下拉框,element-china-are插件,包括distpicker插件
今天主要介绍的是如何使用distpicker插件实现省市级三联跳动
官网:distpicker官网
ps:不知为何,我一直进不去
安装distpicker
如果是使用npm,直接以下执行命令即可
npm install v-distpicker --save
如果是yarn,可以使用下面的命令执行:
yarn add v-distpicker --save
我这里选择的是npm
这个包很小,网络顺畅的情况下10s内就完事了。
引用并注册distpicker
安装完成之后,就可以使用了
为了方便,我们可以直接在入口文件(main.js)中进行全局注册,这样不管哪个组件想要使用,就可以引入并直接使用了
// 引用地区选择器distpicker插件
import vdistpicker from 'v-distpicker'
// 注册全局地区选择器distpicker组件
Vue.component('v-distpicker', vdistpicker);
使用distpicker
比如我现在这个组件想要使用我们注册的公共distpicker 组件,我们就可以直接引用过来进行使用了。
<v-distpicker></v-distpicker>
和其他组件一样,直接使用组件即可:
然后就可以看到效果了:
简单选择下区域:
默认选择
我们可以给组件设置默认选择:
移动端适配
可以通过设置type="mobile"来适配移动端
<v-distpicker type="mobile"></v-distpicker>
美化样式
据说官网有代码可以美化下拉框样式,但是由于我进不去官方,就看不到相关的代码和效果,反正默认有点难看。
取值
我们可以通过以下方式进行取值,先绑定对应的函数
<v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
然后在data中声明省市区这三个变量,用于接收下拉框省市区的值
然后是回调函数,主要就是对选择的值赋给data中定义的属性:
province:'', // 省city:'', // 市area:'', // 区onChangeProvince(province){this.province = province.value }, onChangeCity(city){this.city = city.value },onChangeArea(area){this.area = area.value},
查看效果,可以在前端或者后端进行拼成成一个整体,这里就不做演示了
总结
使用起来确实很方便,但是官网进不去加上页面不太适配,就不打算再使用它了,等到哪天优化之后,再回来更新
Vue使用distpicker插件实现省市级下拉框三级联动相关推荐
- layui 下拉框三级联动
项目需要用layui的三级联动,自己瞎整了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT ...
- 下拉框三级联动,数据库动态获取数据(springboot+ajax+html+mybatis)
效果展示 数据库设计 第一级数据库设计 第二级数据库设计 第三级数据库设计 都使用code来链接上一级!!! 前端 <select id="petType" name=&qu ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- VUE下拉框双向联动
一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue ang ...
- select下拉框二级联动
采用Layui框架 两种方法实现,差别不大 一.编写jsp代码 二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
- [LayUI]下拉框二级联动
下拉框二级联动 在某些应用场景我们需要用到下拉选择框联动情形. HTML: <label class="layui-form-label">公司</label&g ...
- vue下拉框二级联动
<html><head><meta charset="utf-8"><title>Vue 测试实例</title>< ...
- vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器 数据渲染 通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
- Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑 源码:https://gitee.com/charlinchenlin/ ...
最新文章
- 文献阅读|Dynamic-SLAM
- day_06、面向对象
- ASP.NET 如何动态修改 title Meta link标签
- 怎么遍历服务器文件夹,遍历远程服务器某个文件夹下的文件
- 一根29cm长的尺子,只允许在它上面刻7个刻度。
- ec200s 封装_什么是无闪退免签封装?免签封装如何实现?
- python算法与数据结构-希尔排序算法(35)
- 河海大学2019计算机考研分数线,河海大学2019年硕士研究生复试分数线
- 32款iOS开发插件和工具介绍[效率]
- Hadoop-Flume-类比吸尘器图解
- CDH集群安装配置(五)- Cloudera Manager Server
- pcf8523_PCF上的Spring Cloud合同和Spring Cloud Services
- ios企业应用发布流程
- 微软P2V工具之Disk2VHD
- 【Azure Services Platform Step by Step-第5篇】.NET Services 概述
- python里split以制表符分隔_在python中拆分以制表符分隔的大文件
- 45本Hadoop、大数据方向书籍,包邮送到家!
- EXCEL数组公式(3)---数组公式的基础应用,理解数组公式
- 酒店管理系统需求分析
- 测试中 Fakes、Mocks 以及 Stubs 概念明晰