【vue】引入省市区三级联动组件vue-area-linkage

插件地址

vue-area-linkage

安装

npm i --save vue-area-linkage

全局注册

import Vue from 'vue';
import 'vue-area-linkage/dist/index.css';// v2 or higher
import VueAreaLinkage from 'vue-area-linkage";
Vue.use(VueAreaLinkage);

组件使用

三级联动

<template>
    <area-cascader v-model="consultList.address" :data="$pcaa" :level="1" type="text" placeholder="请选择地区" />
</template>

area-cascader参数

参数	类型	可选值	默认值	说明
type	string	all/code/text	code	设置返回的数据格式

样式更改

// scss的深度选择器为 ::v-deep
// less的深度选择器为  /deep/
::v-deep .area-cascader-wrap{
      display: inline-block;
      width: 370px;
      .area-select {
        width: 100%;
        margin-left: 8px;
        .area-selected-trigger {
          // 选择框的文字
          top:-3px;
          padding: 0px 20px 8px 12px;
          font-size: inherit;
        }
        // 旋转的箭头
        .area-select-icon {
          margin-top: -4px;
          transform: rotate(90deg);
        }
        .area-select-icon.active {
          margin-top: -4px;
          transform: rotate(0deg);
        }
        .cascader-menu-list-wrap{
          // 展开框框
          top: 33px !important;
          border-radius: 10px;
          box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.1);
          margin: 6px 0;
        }
      }
    }