JLH/JLHAPP/src/components/lj-button-menu-pro.vue

<template>
    <div class="LjButtonMenu">
        <van-row gutter="4" type="flex" justify="space-between">
            <!-- 功能按钮 -->
            <van-col class="LjButtonMainCol">
                <van-row gutter="4" type="flex">
                    <van-col  v-for="(button, index) in mergeButtons()" :span="button.span || 6" :offset="button.offset || 0" :key="index">
                        <van-popover 
                            v-model:show="popoverOpen" 
                            :actions="popoverList"
                            placement="bottom"
                            v-if="button.type === 'select'"
                        >
                            <template>
                                <div class="van-popover__content">
                                    <div 
                                        v-for="item in popoverList" 
                                        class="van-popover__action" 
                                        :class="item.icon ? 'van-popover__action--with-icon' : ''" 
                                        @click="handleClickPopoverItem(item)"
                                    >
                                        <i :class="['iconfont',item.icon,item.icon ? 'van-icon van-popover__action-icon' : '']" v-if="item.icon" />
                                        <div class="van-popover__action-text van-hairline--bottom">{{ item.text }}</div>
                                    </div>
                                </div>
                            </template>
                            <template #reference>
                                <van-button 
                                    block 
                                    plain
                                    :text="getTextValue(button)"
                                    :type="getTypeValue(button)" 
                                    :size="button.size || 'small'"
                                    @click="handleButtonClick(button)"
                                    class="CommonVanButtonStyle"
                                >
                                    <template v-if="button.icon" slot="icon">
                                        <i :class="['iconfont', button.icon]" />
                                    </template>
                                </van-button>
                            </template>
                        </van-popover>
                        <van-button 
                            block 
                            plain
                            :text="getTextValue(button)"
                            :key="button.property"
                            :type="getTypeValue(button)"
                            :size="button.size || 'small'"
                            @click="handleButtonClick(button)"
                            class="CommonVanButtonStyle"
                            v-else
                        >
                            <template v-if="button.icon" slot="icon">
                                <i :class="['iconfont', button.icon]" />
                            </template>
                        </van-button>
                    </van-col>
                </van-row>
            </van-col>

            <!-- 更多按钮 -->
            <van-col>
                <van-popover v-model:show="popoverVisible" placement="bottom-end">
                    <template>
                        <div class="van-popover__content">
                            <div 
                                v-for="button in [...defaultMoreButton,...moreButtons]" 
                                class="van-popover__action" 
                                :class="button.icon ? 'van-popover__action--with-icon' : ''" 
                                @click="handleButtonClick(button)"
                            >
                                <i :class="['iconfont',button.icon,button.icon ? 'van-icon van-popover__action-icon' : '']" v-if="button.icon" />
                                <div class="van-popover__action-text van-hairline--bottom">{{ button.text }}</div>
                            </div>
                        </div>
                    </template>
                    <template #reference>
                        <van-button 
                            block 
                            plain
                            size="small"
                            @click="togglePopover"
                            class="CommonVanButtonStyle"
                        >
                            <template slot="icon">
                                <i class="iconfont icon-more" />
                            </template>
                        </van-button>
                    </template>
                </van-popover>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    export default {
        props: {
            mainButtons: {
                type: Array,
                default: () => [
                    { color: 'primary', type: 'button', property: 'add', text: '增加', icon: 'icon-ic_add' },
                    { color: 'danger', type: 'button', property: 'delete', text: '删除', icon: 'icon-close' }
                ]
            },
            moreButtons: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                popoverVisible: false,
                defaultMoreButton: [
                    { property: 'setting', text: '布局', icon: 'icon-settings' }
                ],
                popoverOpen: false,
                popoverList: []
            };
        },
        methods: {
            getTypeValue(button) {
                return button.color || "default";
            },
            getTextValue(button) {
                return button.text || "";
            },
            togglePopover() {
                this.popoverVisible = !this.popoverVisible;
            },
            handleButtonClick(button) {
                this.$emit('button-click', button);
            },
            handleLayoutButtonClick() {
                if (this.MergeCustomSetting) {
                    this.MergeCustomSetting();
                } else {
                    this.defaultMergeCustomSetting();
                }
            },
            getDefaultButtons() {
                return [
                    { color: 'primary', type: 'button', property: 'add', text: '增加', icon: 'icon-ic_add' },
                    { color: 'danger', type: 'button', property: 'delete', text: '删除', icon: 'icon-close' }
                ];
            },
            mergeButtons() {
                const defaultButtons = this.getDefaultButtons();
                const mainButtons = this.mainButtons;

                if(mainButtons && mainButtons.length > 0) {
                    this.menuButtons = [...mainButtons];
                } else {
                    this.menuButtons = [...defaultButtons];
                }
        
                return mainButtons;
            },
            handleOpenPopover(list) {
                this.popoverList = list
                this.popoverOpen = true;
            },
            handleClosePopover() {
                this.popoverOpen = false;
            },
            handleClickPopoverItem(item) {
                this.$emit("callPopoverFunction",item)
            },
        }
    };
</script>

<style lang="less" scoped>
.van-popover__wrapper {
    width: 100%;
}
.CommonVanButtonStyle {
    background: transparent;
}
.iconfont {
    font-size: 14px;
}
.LjButtonMainCol {
    flex-grow: 1;
}
</style>