详解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中数组的定义及使用实例
Jan 21 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
jQuery实现验证码功能
Mar 17 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python字符串查找函数的用法详解
2019/07/08 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python检测服务器端口代码实例
2019/08/31 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python实现ftp文件传输功能
2020/03/20 Python
如何理解Python中的变量
2020/06/01 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
12月红领巾广播稿
2014/02/13 职场文书
2014年科室工作总结
2014/11/20 职场文书
车间质检员岗位职责
2015/04/08 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android