更新记录

0.0.3（2025-01-09） 下载此版本

feat: 更新文档

0.0.2（2025-01-09） 下载此版本

• feat: 更新依赖

0.0.1（2025-01-09） 下载此版本

• init

平台兼容性

lime-area 省市区选择

• 省市区三级联动选择，通常与弹出层组件配合使用。
• 插件依赖lime-style,lime-shared,lime-loading,lime-picker不喜勿下

安装

在插件市场导入即可。首次导入可能需要重新编译

代码演示

基础用法

初始化省市区组件时，需要通过 localData 属性传入省市区数据。在实际场景中，Picker 通常作为用于辅助表单填写，可以搭配 Popup

<l-area 
    cancel-btn="取消" 
    confirm-btn="确定"
    title="标题" 
    :local-data="localData" >
</l-area>

localData 格式

localData 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字字符，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {
  province_list: {
    '110000': '北京市',
    '120000': '天津市',
  },
  city_list: {
    '110100': '北京市',
    '120100': '天津市',
  },
  county_list: {
    '110101': '东城区',
    '110102': '西城区',
    // ....
  },
};

中国省市区数据

lime-shared/areaData提供了一份中国省市区数据, 该数据来源于 Vant

import { areaList } from '@/uni_modules/lime-shared/areaData';

<l-area 
    cancel-btn="取消" 
    confirm-btn="确定"
    title="标题" 
    :localData="areaList" >
</l-area>

uniCloud

除了传入本地数据，也可以通过 uniCloud 获取uniCloud的opendb-city-china中国省市区数据

• 1、开通uniCloud
• 2、创建opendb-city-china: 云函数/创建表/其他/opendb-city-china

<l-area uniCloud></l-area>

控制选中项

通过 v-model 绑定当前选中的地区码。

<l-area 
    v-model="value"
    cancel-btn="取消" 
    confirm-btn="确定"
    title="选择地区" 
    @confirm="onConfirm"
    :localData="areaList" >
</l-area>

import { PickerConfirmEvent, PickerValue } from '@/uni_modules/lime-area'
import { areaList } from '@/uni_modules/lime-shared/areaData';
const value = ref<PickerValue[]>(['440000','440100','440114']);

const onConfirm = (context : PickerConfirmEvent) => {
    console.log('context', context)
}

配置显示列

可以通过 columns-num 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 2，则只会显示省市选择。

<l-area :columns-num="2"></l-area>

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-area/compoents/lime-area -->
<lime-area />

插件标签

• 默认 l-area 为 component
• 默认 lime-area 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

API

Props

Events

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。