LimeArea 省市区选择

• 省市区三级联动选择，通常与弹出层组件配合使用。
• 插件依赖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

参数	说明	类型	默认值
v-model	当前选中项对应的值	string|number[]	-
value	当前选中项对应的值	string|number[]	-
columns	对象数组，配置每一列显示的数据	PickerColumn[]	false
cancelBtn	取消按钮文字	string	``
cancelStyle	取消按钮样式	string	``
confirmBtn	确定按钮文字	string	``
confirmStyle	确定按钮样式	string	``
title	标题	string	``
titleStyle	标题样式	string	``
loading	是否显示加载状态	boolean	false
loadingColor	加载图标颜色	string	``
loadingMaskColor	加载遮罩背景颜色	string	``
loadingSize	加载图标大小	string	``
itemHeight	每项高度	string	50px
itemColor	每项文本颜色	string	``
itemFontSize	每项文本字体大小	string	``
itemActiveColor	每项文本选中颜色	string	``
indicatorStyle	选择器中间选中框的样式	string	``
bgColor	选择器背景色	string	``
groupHeight	选项组高度	string	400rpx
radius	圆角	string

Events

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

主题定制

样式变量

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

名称	默认值	描述
--l-picker-border-radius	24rpx	-
--l-picker-bg-color	$bg-color-container	-
--l-picker-toolbar-height	116rpx	-
--l-picker-cancel-color	text-color-2	-
--l-picker-confirm-color	$primary-color	-
--l-picker-button-font-size	32rpx	-
--l-picker-title-font-size	36rpx	-
--l-picker-title-font-weight	700	-
--l-picker-title-line-height	52rpx	-
--l-picker-title-color	$text-color-1	-
--l-picker-group-height	400rpx	-
--l-picker-indicator-bg-color	$fill-4	-
--l-picker-indicator-border-radius	12rpx	-
--l-picker-item-height	50px	-
--l-picker-item-color	$text-color-1	-
--l-picker-item-active-color	$text-color-1	-
--l-picker-item-active-color	$text-color-1	-
--l-picker-loading-mask-color	rgba(255,255,255,.9)	-
--l-picker-item-font-size	$font-size-md	-

打赏

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

源代码

组件源码