废话不多说, 直接进入正题.
安装, 引用, 这些直接从官网拷贝来的, 就不多说了.
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, 我要说的完了.. 以上只是抛砖引玉, 谁有更多的使用心得, 请不吝评论
来源: http://www.jb51.net/article/139639.htm