详解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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Vue通过懒加载提升页面响应速度
May 10 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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
让您的菜单不离网站
2006/10/03 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js DOM的学习笔记
2011/12/22 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
用Python写冒泡排序代码
2016/04/12 Python
python读写LMDB文件的方法
2018/07/02 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python实现矩阵打印
2019/03/02 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Django choices下拉列表绑定实例
2020/03/13 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
大学生英语演讲稿
2014/04/24 职场文书
工作简报范文
2015/07/21 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS