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

前端之家收集整理的这篇文章主要介绍了详解VUE-地区选择器(V-Distpicker)组件使用心得前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

1、安装

使用 npm 安装:

使用 yarn 安装

2、使用

注册组件

注册全局组件

注册组件

简单使用

基础

默认值

移动端

3、下面是重点

获取选择的值

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

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,下面来改改样式

.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; }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章