从 VueJS 3 中的菜单打开组件

Posted 2023-03-07

【中文标题】从 VueJS 3 中的菜单打开组件

【英文标题】：Open Component from Menu in VueJS 3

【发布时间】：2021-08-21 18:52:54

【问题描述】：

好的，所以我不是前端人员。我正试图掌握一些事情，但这似乎让我感到难过。我有一个菜单（下面的代码），里面有“查看配置文件”-当有人单击它时，我希望它打开另一个我创建的带有滑出的 vue 文件，其中包含用户信息-滑出工作如果我只是用 <component name /> 加载它，但我不知道如何将它设置为点击。我通过两者来学习只是指导我需要使用哪些术语，或者请帮助我解决问题。谢谢！

澄清： 我在一个名为 index.vue 的文件中有下面的菜单 - 我还有另一个名为 profile.vue 的文件，它是一个滑出式菜单。当有人点击查看个人资料时，我希望滑块出来。

<Menu as="div" class="ml-2 flex-shrink-0 relative inline-block text-left">
    <MenuButton class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <span class="sr-only">Open options menu</span>
        <span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
            <DotsVerticalIcon class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
        </span>
    </MenuButton>
    <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
        <MenuItems class="origin-top-right absolute z-10 top-0 right-9 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
            <div class="py-1">
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">View profile</a>
                </MenuItem>
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Send whisper</a>
                </MenuItem>
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Send mention</a>
                </MenuItem>
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Request private chat</a>
                </MenuItem>
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Report abuse</a>
                </MenuItem>
                <MenuItem v-slot=" active ">
                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Block member</a>
                </MenuItem>
            </div>
        </MenuItems>
    </transition>
</Menu>

【问题讨论】：

您能否在您的问题中为此提供相关的 .js（或 .ts）？它会帮助你。

在这种情况下，没有

你的问题的意思有点难以理解。您提到您“不是前端人员”。那么使用像Vuetify 这样的“包含电池”的ui 框架可能是一个好主意。有一个有据可查的menu component。

在那个菜单中——当有人点击查看配置文件时——我希望它打开另一个 vue 文件……就是这样……

【参考方案1】：

你可以简单地为你的组件添加一个 v-if 条件

    <transition v-if="isOpen" enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">

你的 MenuButton 需要一个@click="isOpen = !isOpen"

如果您已经使用组合 API，则可以从 setup() 函数中提供 isOpen，否则如果您使用选项 API，只需将 isOpen 添加到您的 data()。

你也可以为这个小代码片段添加一个函数isOpen = !isOpen 所以你的 html 中没有任何“真正的逻辑”，这只是我个人更喜欢的东西。