4 级行政区划组件 v-region 的按需使用

TerryZ
125 阅读2分钟

v-region v3.2.x - v3.3.0 的更新内容

  • 优化性能，减少不必要的渲染与数据加载
  • 原有组件将作为 3 级行政级别组件使用，新增 Full 系列 4 级行政级别组件，以按需使用，避免不需要使用 4 级行政级别时，组件体积过大
  • 移除 reset api, 需要清空选择内容时，请将 v-model 绑定的值设置为各级别均为 undefined 的对象
  • RegionCityPicker 新增清除选择项目图标按钮
  • 部分组件添加选中项目滚动定位

简介

v-region 是一款简洁易用的的中国行政区划选择器，可选择 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4 级行政区域，它提供了

  • 下拉列表级联模式 RegionSelects
  • 分组模式 RegionGroup
  • 多列竖排模式 RegionColumns
  • 城市选择器模式 RegionCityPicker
  • 纯文本模式 RegionText

等几种使用模式

组件按需使用

组件在项目内需要大量使用时，全局注册的收益是可以减少声明引用的代码段而直接使用

import { RegionSelects } from 'v-region'
const app = createApp(App)
// 项目内全局注册组件
app.component('v-region-selects', RegionSelects)

而使用频率并不高时，只推荐在使用时才引用至页面

<template>
  <regionselects />
</template>

<script setup>
import { RegionSelects } from 'v-region'
</script>

以达到最好的项目打包的 tree-shanking 效果，即仅打包项目使用内容相关的组件及资源

级别按需使用

v-region 最多可选择 4 级行政区划数据，从 v3.2.0 版本开始，组件提供了基础的 3 级与 Full 系列完整的 4 级的两套系列组件

import {
  // 3 级行政区划下拉列表组件
  RegionSelects,
  // 完整 4 级行政区划下拉列表组件
  RegionFullSelects
} from 'v-region'

省、市、区县 三级行政区划的数据源大致是 81 kb 左右，而单单第四级 乡镇 级别的的数据就达到惊人的 1.11mb 左右

所以，明确项目需求的行政级别数量，根据情况决定是使用 3 级组件还是使用完整的 4 级组件，避免不需要 乡镇 级别，却将大量不相关的数据打包进项目包中，影响网页的加载速度

文档与实例

avatar
文章
阅读
粉丝