@luohc92/vue3-area-selector

a area selector for vue3.x

一款 vue3.0 的地址选择器，默认支持三级地址选择，可动态添加四级地址选择，支持双向绑定

Install 安装

npm install @luohc92/vue3-area-selector

Usage 按需使用方法

import {
 AreaSelector,
} from "@luohc92/vue3-area-selector";
import "@luohc92/vue3-area-selector/dist/style.css";

Usage 全局使用方法

在main.js中引入

import AreaSelector from "@luohc92/vue3-area-selector";
import "@luohc92/vue3-area-selector/dist/style.css";
const app = createApp(App);
app.use(AreaSelector);

Example 示例

<template>
  <div class="app">
    <AreaSelector
      @change="change"
      @open="open"
      @close="close"
      :props="areaSelectProps"
      v-model="area"
    >
    </AreaSelector>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  AreaSelector,
  AreaDataDto,
  AreaSelectorPropsDto,
  AreaSelectorResultDto,
  Resolve,
} from "@luohc92/vue3-area-selector";
import "@luohc92/vue3-area-selector/dist/style.css";
const areaSelectProps = reactive<AreaSelectorPropsDto>({
  popperClass: "my-area-popup",
  townLazy: true,
  level: 0,
  showAllLevels: true,
  disabled: [],
  lazyLoad: (node: AreaDataDto, resolve: Resolve) => {
    return setTimeout(() => {
      if (node.code === "110101") {
        const data: AreaDataDto[] = [{ code: "110101001", name: "东华门街道" }];
        resolve(data);
      } else if (node.code === "110102") {
        const data: AreaDataDto[] = [{ code: "110101002", name: "西华门街道" }];
        resolve(data);
      } else {
        resolve();
      }
    }, 2000);
  },
});
const area = ref<AreaSelectorResultDto>({
  town: "东华门街道",
  district: "东城区",
  code: "110101001",
  city: "市辖区",
  province: "北京市",
});

const change = (data: AreaSelectorResultDto) => {
  console.log(data);
};
const open = () => {
  console.log("open");
};
const close = (data: AreaSelectorResultDto) => {
  console.log("close", data);
};
</script>

Attributes 属性

Name	Type	Required	Description	Default
v-model	AreaSelectorResultDto	true	binding value 选中项绑定值
clearable	Boolean	false	是否可以清空选项	false
disable	Boolean	false	是否禁用	false
placeholder	String	false	占位文字	'请选择'
props	具体见下表	false

Props 属性

Keyboard	Type	Required	Description	Default
level	Number	false	selection level 选择器级别： 1 省 / 2 市 / 3 区县 / 0 不限制	0
showAllLevels	Boolean	false	display only the last level 显示路径 true 完整路径 / false 显示最后一级	true
popperClass	String	false	popup class 自定义浮层类名
zIndex	number	false	popup zindex 浮层zIndex	1001
disabled	Number[]	false	disabled array 禁用对象数组
townLazy	Boolean	false	dynamic load towns nodes 加载动态四级乡镇数据	false
lazyLoad	Function(node, resolve)	false	method for loading towns nodes data, only works when townLazy is true 加载动态四级乡镇的方法，仅在 townLazy 为 true 时有效，node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用)
areaData	AreaDataDto[]	false	自定义区域数据，最多四 级

Events

Name	Description	Parameters
change	change function callback 当选中节点变化时触发	chang node value 选中节点的值
open	when popup open callback 当选择窗打开时触发
close	when popup close callback 当选择窗关闭时触发
clearable	when clear callback 当清空时触发

Slot

Name	Description
—	HTML element that triggers area selector 触发地址选择器显示的 HTML 元素

css var

  --area-selector-panel-bg: #ffffff;
  --area-selector-panel-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  --area-selector-input-border-color: #dcdfe6;
  --area-selector-input-bg: #ffffff;
  --area-selector-border-color: #dcdfe6;
  --area-selector-disable-bg: #f5f7fa;
  --area-selector-placeholder-color: #a8abb2;
  --area-selector-active-color: #409eff;
  --area-selector-text-color: #606266;
  --area-selector-list-item-hover-color: #f5f5f5;
  --area-selector-list-item-disabled-color: #aaaaaa;
  --area-selector-clearable-color: #aaaaaa;