详解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 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
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
239军机修复记
2021/03/02 无线电
用cookies来跟踪识别用户
2006/10/09 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python实现最大优先队列
2019/08/29 Python
Python 变量的创建过程详解
2019/09/02 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
工作中个人的自我评价
2013/12/31 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
医院工作检讨书范文
2014/02/10 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书