LimeCascader 级联选择

级联选择用于多层级数据选择，主要为树形结构，可展示更多的数据。兼容uniapp/uniappx
插件依赖lime-popup,lime-style,lime-shared,lime-tabs,lime-icon,lime-svg，不喜勿下。

安装

导入即可，首次导入可能需要重新编译

注意

🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
🔔 如果不需要lime-svg在lime-icon代码中注释掉即可

html

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

文档

cascader

代码演示

示例使用了uts及vue3 setup，uniapp可以把数据类型去掉即可。

基础使用

级联选择组件通过设置visible弹出选择器。

html

<view class="cell" @click="visible = true">
	<text>地址</text>
	<text v-show="fieldValue == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue != null">{{fieldValue}}</text>
</view>
<l-cascader 
	v-model:visible="visible" 
	v-model="cascaderValue" 
	:options="options" 
	title="请选择所在地区" 
	@change="onChange"/>

const visible = ref(false)
// 设置默认值，如 110000
const cascaderValue = ref('');
const fieldValue = ref<string|null>(null);
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
	{
		label: '北京市',
		value: '110000',
		children: [
			{
				value: '110100',
				label: '北京市',
				children: [
					{ value: '110101', label: '东城区' },
					{ value: '110102', label: '西城区' },
					{ value: '110105', label: '朝阳区' },
					{ value: '110106', label: '丰台区' },
					{ value: '110107', label: '石景山区' },
					{ value: '110108', label: '海淀区' },
					{ value: '110109', label: '门头沟区' },
					{ value: '110111', label: '房山区' },
					{ value: '110112', label: '通州区' },
					{ value: '110113', label: '顺义区' },
					{ value: '110114', label: '昌平区' },
					{ value: '110115', label: '大兴区' },
					{ value: '110116', label: '怀柔区' },
					{ value: '110117', label: '平谷区' },
					{ value: '110118', label: '密云区' },
					{ value: '110119', label: '延庆区' },
				],
			},
		],
	},
	{
		label: '天津市',
		value: '120000',
		children: [
			{
				value: '120100',
				label: '天津市',
				children: [
					{ value: '120101', label: '和平区' },
					{ value: '120102', label: '河东区' },
					{ value: '120103', label: '河西区' },
					{ value: '120104', label: '南开区' },
					{ value: '120105', label: '河北区' },
					{ value: '120106', label: '红桥区' },
					{ value: '120110', label: '东丽区' },
					{ value: '120111', label: '西青区' },
					{ value: '120112', label: '津南区' },
					{ value: '120113', label: '北辰区' },
					{ value: '120114', label: '武清区' },
					{ value: '120115', label: '宝坻区' },
					{ value: '120116', label: '滨海新区' },
					{ value: '120117', label: '宁河区' },
					{ value: '120118', label: '静海区' },
					{ value: '120119', label: '蓟州区' },
				],
			},
		],
	},
];
 // 全部选项选择后，会触发 change 事件
const onChange = (value: string, options: UTSJSONObject[]) => {
	fieldValue.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};

带初始值

通过设置value或v-model设置默认值，选择项的值

html

<view class="cell" @click="visible2 = true">
	<text>地址</text>
	<text v-show="fieldValue2 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue2 != null">{{fieldValue2}}</text>
</view>
<l-cascader 
	v-model:visible="visible2" 
	v-model="cascaderValue2" 
	:options="options2" 
	title="请选择所在地区" 
	@change="onChange2"/>

const visible2 = ref(false)
// 设置默认值
const cascaderValue2 = ref('120119');
const fieldValue2 = ref<string|null>(null);
const options2 = areaList;
const onChange2 = (value: string, options: UTSJSONObject[]) => {
	fieldValue2.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};

自定义字段名

通过设置keys属性可以自定义 options 里的字段名称

html

<view class="cell" @click="visible3 = true">
	<text>地址</text>
	<text v-show="fieldValue3 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue3 != null">{{fieldValue3}}</text>
</view>
<l-cascader 
	v-model:visible="visible3" 
	v-model="cascaderValue3" 
	:options="options3" 
	:keys="keys"
	title="请选择所在地区" 
	@change="onChange3"/>

const visible3 = ref(false)
const cascaderValue3 = ref('');
const fieldValue3 = ref<string|null>(null);
const options3 = [
	{
		name: '北京市',
		code: '110000',
		items: [
			{
				code: '110100',
				name: '北京市',
				items: [
					{ code: '110101', name: '东城区' },
					{ code: '110102', name: '西城区' },
					{ code: '110105', name: '朝阳区' },
					{ code: '110106', name: '丰台区' },
					{ code: '110107', name: '石景山区' },
					{ code: '110108', name: '海淀区' },
					{ code: '110109', name: '门头沟区' },
					{ code: '110111', name: '房山区' },
					{ code: '110112', name: '通州区' },
					{ code: '110113', name: '顺义区' },
					{ code: '110114', name: '昌平区' },
					{ code: '110115', name: '大兴区' },
					{ code: '110116', name: '怀柔区' },
					{ code: '110117', name: '平谷区' },
					{ code: '110118', name: '密云区' },
					{ code: '110119', name: '延庆区' },
				],
			},
		],
	},
	{
		name: '天津市',
		code: '120000',
		items: [
			{
				code: '120100',
				name: '天津市',
				items: [
					{ code: '120101', name: '和平区' },
					{ code: '120102', name: '河东区' },
					{ code: '120103', name: '河西区' },
					{ code: '120104', name: '南开区' },
					{ code: '120105', name: '河北区' },
					{ code: '120106', name: '红桥区' },
					{ code: '120110', name: '东丽区' },
					{ code: '120111', name: '西青区' },
					{ code: '120112', name: '津南区' },
					{ code: '120113', name: '北辰区' },
					{ code: '120114', name: '武清区' },
					{ code: '120115', name: '宝坻区' },
					{ code: '120116', name: '滨海新区' },
					{ code: '120117', name: '宁河区' },
					{ code: '120118', name: '静海区' },
					{ code: '120119', name: '蓟州区' },
				],
			},
		],
	},
];

const keys = {label: 'name', value: 'code', children: 'items'}
const onChange3 = (value: string, options: UTSJSONObject[]) => {
	fieldValue3.value = options.map((item: UTSJSONObject):any|null => (item['name'])).join('/');
};

自定义选项上方内容

通过设置subTitles属性每级展示的次标题

html

<view class="cell" @click="visible4 = true">
	<text>地址</text>
	<text v-show="fieldValue4 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue4 != null">{{fieldValue4}}</text>
</view>
<l-cascader 
	v-model:visible="visible4" 
	v-model="cascaderValue4" 
	:options="options4" 
	:subTitles="subTitles"
	title="请选择所在地区" 
	@change="onChange4"/>

const visible4 = ref(false)
const cascaderValue4 = ref('');
const fieldValue4 = ref<string|null>(null);
const options4 = areaList;
const subTitles = ['请选择省份', '请选择城市', '请选择区/县'];
const onChange4 = (value: string, options: UTSJSONObject[]) => {
	fieldValue4.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};

自定义颜色

通过设置active-color属性来设置选中状态的高亮颜色。

html

<view class="cell" @click="visible5 = true">
	<text>地址</text>
	<text v-show="fieldValue5 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue5 != null">{{fieldValue5}}</text>
</view>
<l-cascader 
	v-model:visible="visible5" 
	v-model="cascaderValue5" 
	:options="options5" 
	active-color="#34c471"
	title="请选择所在地区" 
	@change="onChange5"/>

中国省市区数据

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

import { useCascaderAreaData } from '@/uni_modules/lime-shared/areaData'
const options7 = useCascaderAreaData();
const subTitles = ['请选择省份', '请选择城市', '请选择区/县'];
const visible7 = ref(false)
const cascaderValue7 = ref('');
const fieldValue7 = ref<string|null>(null);
const onChange7 = (value: string, options: UTSJSONObject[]) => {
	fieldValue7.value = options.map((item: UTSJSONObject):any|null => (item['label'])).join('/');
};

html

<view class="cell" @click="visible7 = true">
	<text>地址</text>
	<text v-show="fieldValue7 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue7 != null">{{fieldValue7}}</text>
</view>
<l-cascader 
	v-model:visible="visible7" 
	v-model="cascaderValue7" 
	:options="options7" 
	:subTitles="subTitles"
	title="请选择所在地区" 
	@change="onChange7"/>

uniCloud

除了加载本地数据，还可以设置uniCloud,会加载opendb-city-china(中国城市省市区数据，含港澳台)表, 在uniCloud控制台使用opendb创建

html

<view class="cell" @click="visible6 = true">
	<text>地址</text>
	<text v-show="fieldValue6 == null" style="color: #999;">请选择地址 ></text>
	<text v-show="fieldValue6 != null">{{fieldValue6}}</text>
</view>
<l-cascader 
	v-model:visible="visible6" 
	v-model="cascaderValue6" 
	:options="options6" 
	:subTitles="subTitles"
	:keys="{label: 'name', value: 'code'}"
	title="请选择所在地区" 
	@pick="onPick6"
	@change="onChange6"/>

const visible6 = ref(false)
const cascaderValue6 = ref('');
const fieldValue6 = ref<string|null>(null);

const onChange6 = (value: string, options: UTSJSONObject[]) => {
	fieldValue6.value = options.map((item: UTSJSONObject):any|null => (item['name'])).join('/');
};

查看示例

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

html

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

插件标签

默认 l-cascader 为 component
默认 lime-cascader 为 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:visible	是否显示级联选择器	boolean	`false`
v-model	值	string	`-`
subTitles	每级展示的次标题，`Array<string>`	string[]	`-`
placeholder	未选中时的提示文案	string	`选择选项`
keys	用来定义 `value / label` 在 `options` 中对应的字段别名。	{label,value,children}	`{}`
title	标题	string	`-`
options	可选项数据源	[]	`-`
closeable	关闭按钮	boolean	`-`
bgColor	背景色	string	`-`
activeColor	激活色	string	`-`
iconSize	图标尺寸	string	`-`
color	文本色	string	`-`
fontSize	字体大小	string	`-`

Events

事件名	说明	回调参数
pick	选择后触发	`(level: number, index:number, value: string, selectedIndexes:number[])`
change	值发生变更时触发	`(value: string, options: UTSJSONObject[])`
close	关闭时触发	``
finish	选择后触发	``

主题定制

样式变量

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

名称	默认值	描述
--l-cascader-title-color	$text-color-1	-
--l-cascader-icon-color	$primary-color	-
--l-cascader-icon-size	24px	-
--l-cascader-bg-color	$bg-color-container	-
--l-cascader-height	320px	-
--l-cascader-cell-height	50px	-
--l-cascader-cell-cell-padding	14px 16px	-
--l-cascader-cell-title-color	$text-color-1	-
--l-cascader-cell-title-font-size	$font-size-md	-
--l-cascader-disabled-color	$text-color-3	-
--l-cascader-title-height	48px	-
--l-cascader-title-font-size	18px	-
--l-cascader-options-title-color	$text-color-3	-

打赏

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

源代码

组件源码

LimeCascader 级联选择 ​

安装 ​

文档 ​

代码演示 ​

基础使用 ​

带初始值 ​

自定义字段名 ​

自定义选项上方内容 ​

自定义颜色 ​

中国省市区数据 ​

uniCloud ​

查看示例 ​

插件标签 ​

关于vue2的使用方式 ​

API ​

Props ​

Events ​

主题定制 ​

样式变量 ​

打赏 ​

源代码 ​

LimeCascader 级联选择

安装

文档

代码演示

基础使用

带初始值

自定义字段名

自定义选项上方内容

自定义颜色

中国省市区数据

uniCloud

查看示例

插件标签

关于vue2的使用方式

API

Props

Events

主题定制

样式变量

打赏

源代码