这篇文章主要介绍了详解VUE-地区选择器(V-Distpicker)组件使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
废话不多说，直接进入正题。
安装，引用，这些直接从官网拷贝来的，就不多说了。
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 } }
简单使用
基础
默认值
移动端
3、下面是重点
获取选择的值
<button>点我选择区域</button><div class="divwrap"> </div>
在你引用 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，我要说的完了。。以上只是抛砖引玉，谁有更多的使用心得，请不吝评论
以上就是本文的本文来源gaodaimacom搞#^代%!码&网(全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
您可能感兴趣的文章:
- vue项目打包后上传至GitHub并实现github-pages的预览
- vue项目打包上传github并制作预览链接（pages）
- vue如何自动化打包测试环境和正式环境的dist/test文件
- vue-cli 3.x 修改dist路径的方法
- 解析Vue2 dist 目录下各个文件的区别
- vue项目打包后提交到git上为什么没有dist这个文件的解决方法
以上就是详解VUE-地区选择器(V-Distpicker)组件使用心得的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解VUE-地区选择器(V-Distpicker)组件使用心得
转载请注明原文链接：详解VUE-地区选择器(V-Distpicker)组件使用心得
