LimeUI+1.2.0

主题

LimeArea 省市区选择 ​

一个省市区三级联动选择组件，通常与弹出层组件配合使用。

插件依赖：lime-style、lime-shared、lime-loading、lime-picker

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-area
  2. 首次导入可能需要重新编译
  3. 在页面中使用l-area组件（组件）或lime-area（演示）

代码演示 ​

基础用法 ​

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

html
<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。

示例数据如下：

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

中国省市区数据 ​

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

js
import { areaList } from '@/uni_modules/lime-shared/areaData';
html
<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
html
<l-area uniCloud></l-area>

控制选中项 ​

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

html
<l-area 
	v-model="value"
	cancel-btn="取消" 
	confirm-btn="确定"
	title="选择地区" 
	@confirm="onConfirm"
	:localData="areaList" >
</l-area>
js
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，则只会显示省市选择。

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

Vue2使用说明 ​

本插件使用了composition-api，请按照官方教程配置。

关键配置代码（在main.js中添加）：

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

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

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

插件标签说明 ​

  • l-area：省市区选择组件
  • lime-area：演示标签

API文档 ​

Props ​

参数说明类型默认值
v-model当前选中项对应的值string|number[]-
value当前选中项对应的值string|number[]-
columns对象数组，配置每一列显示的数据PickerColumn[]false
local-data省市区数据Object-
columns-num显示列数，1-省，2-省市，3-省市区number3
uniCloud是否使用uniCloud数据booleanfalse
cancel-btn取消按钮文字string-
cancel-style取消按钮样式string-
confirm-btn确定按钮文字string-
confirm-style确定按钮样式string-
title标题string-
title-style标题样式string-
loading是否显示加载状态booleanfalse
loading-color加载图标颜色string-
loading-mask-color加载遮罩背景颜色string-
loading-size加载图标大小string-
item-height每项高度string50px
item-color每项文本颜色string-
item-font-size每项文本字体大小string-
item-active-color每项文本选中颜色string-
indicator-style选择器中间选中框的样式string-
bg-color选择器背景色string-
group-height选项组高度string400rpx
radius圆角string-

Events ​

事件名说明回调参数
cancel点击取消按钮时触发__
change选中变化时候触发value: string|number[]
confirm点击确认按钮时触发{values: PickerValue[], indexs:number[], items:PickerColumnItem[]}:PickerConfirmEvent

主题定制 ​

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

|--------|--------|------| | --l-picker-border-radius | $border-radius-xl | 选择器整体圆角 | | --l-picker-bg-color | $bg-color-container | 选择器背景色 | | --l-picker-toolbar-height | 58px | 工具栏高度 | | --l-picker-cancel-color | $text-color-2 | 取消按钮文字颜色 | | --l-picker-confirm-color | $primary-color | 确认按钮文字颜色 | | --l-picker-button-font-size | $font-size-md | 按钮文字大小 | | --l-picker-title-font-size | 18px | 标题文字大小 | | --l-picker-title-font-weight | 700 | 标题文字粗细 | | --l-picker-title-line-height | 26px | 标题行高 | | --l-picker-title-color | $text-color-1 | 标题文字颜色 | | --l-picker-group-height | 200px | 选择器内容区高度 | | --l-picker-indicator-bg-color | $fill-4 | 选中指示器背景色 | | --l-picker-indicator-border-radius | 6px | 选中指示器圆角 | | --l-picker-item-height | 50px | 每个选项高度 | | --l-picker-item-color | $text-color-1 | 选项文字颜色 | | --l-picker-item-active-color | $text-color-1 | 选中项文字颜色 | | --l-picker-item-active-font-weight | 700 | 选中项文字粗细 | | --l-picker-item-font-size | $font-size-md | 选项文字大小 | | --l-picker-loading-mask-color | rgba(255,255,255,.9) | 加载遮罩颜色 | | --l-picker-loading-color | $primary-color | 加载动画颜色 |

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码