Question

这是我关于stackoverflow的第一个问题。请随时告诉我是否需要对其进行编辑。

我已经创建了名为Popup.vue的全局组件

<div class="popup-background" id="vue-popup" @click.self="$emit('close')">
    <div class="popup-info-box" :class="customClasses" :style="infoBoxPosition()">            
        <slot></slot>
    </div>
</div>

<script>
export default {
    props : {
        customClasses : {
            default : () => '',
        },
    },
    data() {
        return {
            hasMounted : false,
        }
    },
    methods : {
        infoBoxPosition() {
            if( !this.hasMounted ) {
                return { 'right' : '0px', 'top' : '0px' };
            }

            let parent = document.querySelector('#vue-popup').parentElement;
            let bounds = parent.getBoundingClientRect();

            return { 'right' : ( document.body.clientWidth - bounds.right ) + 'px', 'top' : bounds.bottom + 'px' };
        }
    },
    mounted() {
        this.hasMounted = true;
    },
}

当前行为

我正在直接从我的过滤器组件将html传递给我的Popup.vue组件。

示例：Filter.vue

<div class="menu" v-for="( filter, key ) in filters">
        <div class="filter-button" @click="openMenu( key )">
            <span>
                {{ $t(`filters.${key}`) }}
            </span>
        </div>
        <transition name="fade">
            <Popup :customClasses="{ 'filter-menu' : filter.hide }" v-show="getActiveMenu == key" @close="toggleMenu( '' )">
                <div class="filter-menu-top">
                    <div>
                        {{ filter.values.min }}
                    </div>
                    <div>
                        {{ filter.values.max }}
                    </div>
                </div>
                <div class="filter-menu-bottom">
                    <div class="filter-action-button apply" @click="applyFilter( filter, key )">
                        {{ $t(`filters.actions.apply`) }}
                    </div>
                </div>
            </Popup>
        </transition>
    </div>

问题

我已经将Popup.vue注册为全局组件，现在无需导入即可将其用于其他所有组件。很好，但是我还有另一个问题。

我想动态更改Popup.vue的内容。例如，当用户单击过滤器按钮时，他应该在弹出窗口中看到过滤器菜单。用户单击唱歌时，他会在弹出窗口中看到登录表单，依此类推。

Popup.vue应该是通用的，我想在需要这种下拉行为的任何地方使用它。如何在不使用每个组件模板的情况下管理弹出窗口的内容？

所需的解决方案

以某种方式将Popup.vue组件放入App.vue组件并管理任何组件的弹出内容，而无需将弹出窗口放入我需要的每个组件中。

想法

我考虑过使用Vuex并绑定每个组件中的一些操作以将模板作为字符串发送到Vuex状态，并在我的Popup.vue组件中读取它。但这似乎是不可靠且不可扩展的解决方案。

谢谢。

将数据传递到vuejs中的全局组件

0 个答案: