更新记录

1.0.1（2025-09-15） 下载此版本

支持单项选择、级联选择。

1.0.0（2025-09-12） 下载此版本

发布v1.0.0。

平台兼容性

uni-app

bcr-picker

工欲善其事必先利其器

选择组件弹窗显示, 支持级联选择。

使用

<template>
    <view class="container">
        <view class="content">
            <text class="title">自定义弹窗组件</text>
            <text class="description">这是一个功能完整的自定义弹窗，包含搜索框、操作按钮和列表展示。点击下方按钮查看效果。</text>
            <view style="display: flex;flex-direction: row;justify-content: flex-start;">
                <button class="open-btn" @tap="showSinglePicker = true">单列</button>
                <button class="open-btn" @tap="showMultiPicker = true">多列</button>
            </view>

            <!-- 显示选中结果 -->
            <view class="selected-result" v-if="selectedItem">
                <text>已选择: {{ selectedItem.code }} - {{ selectedItem.name }}</text>
                <text v-show="showMultiText"></br></br>选择路径: {{ selectedPath }}</text>
            </view>
        </view>

        <bcr-picker :show="showSinglePicker" :items="singleItems" @close="showSinglePicker = false"
            @select="onItemSelect" />

        <bcr-picker :show="showMultiPicker" :items="multiItems" :multi="true" title="选择设备"
            @close="showMultiPicker = false" @select="handleMultiSelect" />
    </view>
</template>

<script>
    import bcrPicker from '../../uni_modules/bcr-picker/components/bcr-picker/index.vue'

    export default {
        components: {
            bcrPicker
        },
        data() {
            return {
                selectedItem: "",
                selectedPath: "",
                singleItems: [],
                multiItems: [],
                showSinglePicker: false,
                showMultiPicker: false,
                showMultiText: false
            }
        },
        onLoad() {
            // 监听全局事件
            // uni.$on('popupItemSelected', this.handleItemSelected);
            for (var i = 0; i < 10; i++) {
                this.singleItems.push({
                    id: i,
                    code: "00" + i,
                    name: '张' + i
                })
            }

            this.multiItems = [{
                    code: 'G001',
                    name: '生产设备组',
                    children: [{
                            code: 'D001',
                            name: '注塑机',
                            children: [{
                                    code: 'M001',
                                    name: '注塑机一号'
                                },
                                {
                                    code: 'M002',
                                    name: '注塑机二号'
                                }
                            ]
                        },
                        {
                            code: 'D002',
                            name: '冲压机',
                            children: [{
                                    code: 'M003',
                                    name: '冲压机一号'
                                },
                                {
                                    code: 'M004',
                                    name: '冲压机二号'
                                }
                            ]
                        }
                    ]
                },
                {
                    code: 'G002',
                    name: '检测设备组',
                    children: [{
                        code: 'D003',
                        name: '测量仪',
                        children: [{
                                code: 'M005',
                                name: '三坐标测量仪'
                            },
                            {
                                code: 'M006',
                                name: '光学测量仪'
                            }
                        ]
                    }]
                },
                {
                    code: 'G002',
                    name: '检测设备组',
                    children: [{
                        code: 'D003',
                        name: '测量仪',
                        children: [{
                                code: 'M005',
                                name: '三坐标测量仪'
                            },
                            {
                                code: 'M006',
                                name: '光学测量仪'
                            }
                        ]
                    }]
                },
                {
                    code: 'G002',
                    name: '检测设备组',
                    children: [{
                        code: 'D003',
                        name: '测量仪',
                        children: [{
                                code: 'M005',
                                name: '三坐标测量仪'
                            },
                            {
                                code: 'M006',
                                name: '光学测量仪'
                            }
                        ]
                    }]
                },
                {
                    code: 'G002',
                    name: '检测设备组',
                    children: [{
                        code: 'D003',
                        name: '测量仪',
                        children: [{
                                code: 'M005',
                                name: '三坐标测量仪'
                            },
                            {
                                code: 'M006',
                                name: '光学测量仪'
                            }
                        ]
                    }]
                },
                {
                    code: 'G002',
                    name: '检测设备组',
                    children: [{
                        code: 'D003',
                        name: '测量仪',
                        children: [{
                                code: 'M005',
                                name: '三坐标测量仪'
                            },
                            {
                                code: 'M006',
                                name: '光学测量仪'
                            }
                        ]
                    }]
                }
            ]
        },
        // onUnload() {
        //  // 移除事件监听
        //  uni.$off('popupItemSelected', this.handleItemSelected);
        // },
        methods: {
            handleMultiSelect(result) {
                console.log('最终选择:', result.selected);
                this.selectedItem = result.selected;
                this.selectedPath = result.pathCodes.map((code, index) => "(" + code + "-" + result.pathNames[index] + ")")
                    .join(" -> ");
                this.showMultiText = true;
                // console.log('完整路径:', result.path);
                // console.log('路径名称:', result.pathNames);
                // console.log('路径编码:', result.pathCodes);

                // 示例: 生产设备组 > 注塑机 > 注塑机一号
            },
            onItemSelect(item) {
                console.log('选中项:', item);
                this.selectedItem = item;
                this.showMultiText = false;
            },
            // // 处理全局事件
            // handleItemSelected(item) {
            //  console.log('通过全局事件选中:', item);
            //  this.onItemSelect(item);
            // }
        }
    }
</script>

<style>
    /* 其他样式保持不变... */

    .selected-result {
        margin-top: 20px;
        padding: 15px;
        background-color: #e8f5e9;
        border-radius: 8px;
        border-left: 4px solid #4caf50;
    }

    .selected-result text {
        color: #2e7d32;
        font-weight: 500;
    }

    .open-btn {
        width: 150rpx;
        height: 100rpx;
        background-color: #aaffff;
        color: #5555ff;
    }
</style>

Props