关联选择器 Relation Select

关联选择器组件。

重要提示

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 options 属性设置组件数据。
• 数据需符合下方示例格式。
• 通过 show 控制显示状态。
• 组件不会自动关闭，需手动关闭组件。
• 组件默认是单选模式，通过 multiple 属性可以设置为多选。

<template>
    <pure-cell title="单选" arrow @onClick="handleClick('single')"></pure-cell>
    <pure-cell title="多选" arrow @onClick="handleClick('multiple')"></pure-cell>

    <pure-relation-select
        :show="show"
        :options="options"
        labelKey="label"
        subLabelKey="dateStr"
        childrenKey="times"
        textKey="text"
        @confirm="handleConfirm"
        :multiple="mode === 'multiple'"
        @close="show = false"
    ></pure-relation-select>
</template>

<script setup>
    import { ref } from "vue";
    import { onLoad } from "@dcloudio/uni-app";

    // 选项 options
    const options = ref([]);

    // 显示状态
    const show = ref(false);

    // 模式
    const mode = ref("single");

    // 初始化options
    function initOptions() {
        const today = new Date();
        const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
        const afterTommorrow = new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);

        const optionToday = {
            label: "今天",
            dateStr: `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`,
            times: [],
        };

        const optionTomorrow = {
            label: "明天",
            dateStr: `${tomorrow.getFullYear()}年${tomorrow.getMonth() + 1}月${tomorrow.getDate()}日`,
            times: [],
        };

        const optionAfterTommorrow = {
            label: "后天",
            dateStr: `${afterTommorrow.getFullYear()}年${afterTommorrow.getMonth() + 1}月${afterTommorrow.getDate()}日`,
            times: [],
        };

        // 时段，以1小时分割
        for (let i = 0; i < 24; i++) {
            let start = i;
            let end = i + 1;
            start = start < 10 ? `0${start}:00` : `${start}:00`;
            end = end < 10 ? `0${end}:00` : `${end}:00`;
            const timeStr = `${start}:-${end}`;
            optionToday.times.push({
                text: timeStr,
            });

            optionTomorrow.times.push({
                text: timeStr,
            });

            optionAfterTommorrow.times.push({
                text: timeStr,
            });
        }

        options.value.push(optionToday);
        options.value.push(optionTomorrow);
        options.value.push(optionAfterTommorrow);
    }

    onLoad(() => {
        // 初始化options
        initOptions();
    });

    // 显示
    function handleClick(type) {
        mode.value = type;
        show.value = true;
    }

    // 确认选择
    function handleConfirm(datas) {
        console.log("确认选择 ->", datas);
        // 手动关闭组件
        show.value = false;
    }
</script>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	关闭按钮和选项的 hover-class, 同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
show	显示状态	Boolean	false	true	+1.0.0
options	数据	Array[Object]	[]	-	+1.0.0
labelKey	左侧分类文本的字段名	String	label	-	+1.0.0
subLabelKey	左侧副分类文本的字段名	String	subLabel	-	+1.0.0
childrenKey	子数据的字段名	String	children	-	+1.0.0
textKey	选项文本的字段名	String	text	-	+1.0.0
title	标题	String	-	-	+1.0.0
close	是否显示关闭按钮	Boolean	true	false	+1.0.0
closeIcon	关闭按钮图标名称，同图标组件（Icon）的 name 属性，参考	String	__cuo	-	+1.0.0
selectedIcon	选项选中时的图标名称，同图标组件（Icon）的 name 属性，参考	String	__gouxuan	-	+1.0.0
overlay	是否显示遮罩	Boolean	true	false	+1.0.0
stopCloseOnClickOverlay	是否禁用点击遮罩关闭弹窗功能	Boolean	false	true	+1.0.0
safeBottom	开启安全底部	Boolean	true	false	+1.0.0
disabledClass	选项禁用时的类名	String	pure-disabled	-	+1.0.0
showBtn	是否显示底部确认按钮	Boolean	true	false	+1.0.0
btnClass	底部确认按钮的自定义class	String	pure-button-primary pure-button-round pure-button-block	-	+1.0.0
btnText	底部确认按钮的文字	String	确定	-	+1.0.0
btnOpts	底部确认按钮的其他配置，参考	Object	{}	-	+1.0.0

Event

事件名	说明	回调参数	版本
confirm	确认事件	options: 数组，其中 selectedChildren 为选中项数据；	+1.0.0
onClick	单个选项点击事件	{option: 一级分类数据, optionIndex: 一级分类下标, childIndex: 二级选项下标, child: 二级选项数据, isChecked: 是否选中（点击前的状态）}	+1.0.0
close	关闭事件	-	+1.0.0
<button> 组件的原生事件	参考	-	+1.0.0

Slots

名称	说明	参数	版本
title	标题	-	+1.0.0
close	关闭按钮	-	+1.0.0
footer	底部 Footer	-	+1.0.0