详解VUE-地区选择器(V-Distpicker)组件使用心得


Posted in Javascript onMay 07, 2018

废话不多说,直接进入正题。

安装,引用,这些直接从官网拷贝来的,就不多说了。

1、安装

使用 npm 安装:

npm install v-distpicker --save

使用 yarn 安装

yarn add v-distpicker --save

2、使用

注册组件

注册全局组件

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

注册组件

import VDistpicker from 'v-distpicker'
export default {
 components: { VDistpicker }
}

简单使用

基础

<v-distpicker></v-distpicker>

默认值

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

移动端

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

3、下面是重点

获取选择的值

<template>
  <button @click="choose">点我选择区域</button>
  <div class="divwrap" v-if="show">
    <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
  </div>
</template>

在你引用 v-distpicker 的父组件里面定义几个方法来获取选择的值。

<script>
  import VDistpicker from 'v-distpicker'
  export default {
    name: 'getAddress',
    components: { VDistpicker },
    data() {
      return {
        show:false,
      }
    },
    methods: {
      choose(){
        this.show=!this.show
      },
      onChangeProvince(a){
        console.log(a)        
      },
      onChangeCity(a){
        console.log(a)        
      },
      onChangeArea(a){
        console.log(a)  
        this.show=false
      }      
    },
}

 4、样式

你是不是感觉弹出的样式很丑?

OK,下面来改改样式

<style scoped>
  .divwrap{
    height: 400px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .divwrap>>>.distpicker-address-wrapper{
    color: #999;
  }
  .divwrap>>>.address-header{
    position: fixed;
    bottom: 400px;
    width: 100%;
    background: #000;
    color:#fff;
  }
  .divwrap>>>.address-header ul li{
    flex-grow: 1;
    text-align: center;
  }
  .divwrap>>>.address-header .active{
    color: #fff;
    border-bottom:#666 solid 8px
  }
  .divwrap>>>.address-container .active{
    color: #000;
  }

</style>

OK,我要说的完了。。以上只是抛砖引玉,谁有更多的使用心得,请不吝评论

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 #Javascript
Vue 实现树形视图数据功能
May 07 #Javascript
JavaScript 跨域之POST实现方法
May 07 #Javascript
ES6关于Promise的用法详解
May 07 #Javascript
React Form组件的实现封装杂谈
May 07 #Javascript
vue如何将v-for中的表格导出来
May 07 #Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python中的set实现不重复的排序原理
2018/01/24 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
实习单位推荐信范文
2013/11/27 职场文书
局火灾防控工作方案
2014/05/25 职场文书
单位授权委托书范文
2014/08/02 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python