Vue实现省市区三级选择

一、安装v-distpicker:

npm i v-distpicker --s

二、使用v-distpicker:

1、首先在script中导入:

import vDistpicker from 'v-distpicker';

2、使用组件:

①在<template>中:

<div>
      <v-distpicker class="picker"  @selected='selected'></v-distpicker>
</div>

②在<script>中:

components:{
    vDistpicker
},

③获取选择到的省市区:

data () {
    return {
      area:'',//省市区三级
    }
},
methods: {
    selected(data){
      this.area= data.province.value + data.city.value + data.area.value;
    }
}

④在页面中输出:

<div v-if="area!=''">{{area}}</div>

上一篇:2021-09-22


下一篇:直播软件源码使用canvas实现一个小小的截图功能