【vue使用城市选择器】_vue地区选择器-CSDN博客

本文链接：https://blog.csdn.net/maoge1430/article/details/124266591

本文介绍了如何在Vue项目中使用v-distpicker组件实现省市县三级联动选择的功能。步骤包括安装依赖、在main.js中全局注册、在组件中引用及定义使用，并展示了如何监听事件获取选中数据，以及自定义显示和样式修改。

摘要由CSDN通过智能技术生成

vue引入城市选择器省市县菜单联动

第一步引入依赖
第二步在main.js文件中进行挂载
第三步在页面注册引用
第四步定义标签使用
页面展现效果
添加监听事件获取数据
查看获取到的数据
自定义数据显示
修改选择框样式

第一步引入依赖

在这里插入图片描述

npm install v-distpicker --save

第二步在main.js文件中进行挂载

在这里插入图片描述

import VDistpicker from 'v-distpicker'
export default{
  component:{ VDistpicker }
}

第三步在页面注册引用

在这里插入图片描述

import VDistpicker from 'v-distpicker'

components: { VDistpicker },

第四步定义标签使用

在这里插入图片描述

<v-distpicker></v-distpicker>

页面展现效果

在这里插入图片描述

添加监听事件获取数据

在这里插入图片描述

   <v-distpicker  @province="onChangeProv"
                  @city="onChangeCity"
                  @area="onChangeArea"></v-distpicker>

在这里插入图片描述

 onChangeProv (e) {
      console.log("省", e);
    },
    onChangeCity (e) {
      console.log("市", e);
    },
    onChangeArea (e) {
      console.log("县", e);
    },

查看获取到的数据

在这里插入图片描述
在监听事件里获取数据并赋值给字段,这样就可以拿到对应的数据存到数据库了!
注: 可添加selected方法返回省市区的值(选择最后一项时触发)

自定义数据显示

在这里插入图片描述

:placeholders="placeholders"

在这里插入图片描述

 placeholders: {
        province: '请选择省份',
        city: '请选择市区',
        area: '请选择县城或区',
      },

在这里插入图片描述

修改选择框样式

在这里插入图片描述

<style lang="scss">
//修改地区选择框样式
.distpicker-address-wrapper {
  select {
    width: 250px !important;
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}