gpt4 book ai didi

vue.js - 在 vuetify 2.0 中的 v-menu 激活器中使用 v-tooltip

转载 作者:行者123 更新时间:2023-12-01 15:03:34 25 4
gpt4 key购买 nike

如何在 v-menu 激活器中使用 v-tooltip 和 vuetify 2.0?以前它使用 slot="activator" 工作.

这就是我想要结合的:

<v-menu>
<template v-slot:activator="{on}">
<v-btn v-on="on">Menu Trigger</v-btn>
</template>
...list with menu options...
</v-menu>


<v-tooltip v-slot:activator="{on}">
<v-btn v-on="on">Menu Trigger with Tooltip</v-btn>
<span>Tooltip Content</span>
</v-tooltip>

现在我尝试将 v-tooltip 粘贴到 v-menu 中,这里的 {on} 会发生什么?

最佳答案

我认为您很可能不确定“冲突”on 传递给模板的对象多个 activator槽以及如何在目标元素上应用所有事件处理程序。
如果是这种情况,您可以通过将其中一个(或两个)分配给带有 的变量来解决此问题。不同的名字 (参见: assigning to new variable names ),然后解构和“重组”,这基本上将它们粘合在一起(或 merge 它们,从技术上讲)。

<v-menu>
<template #activator="{ on: onMenu }">
<v-btn v-on="onMenu">Menu Trigger</v-btn>

<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
</template>

<span>Tooltip Content</span>
</v-tooltip>
</template>

<!-- ...list with menu options... -->
</v-menu>
或者,直接使用插槽 Prop 。只需确保正确命名它们,这样它们就不会与组件的数据和/或 Prop 引入另一个命名冲突。
<v-menu>
<template #activator="menu">
<v-btn v-on="menu.on">Menu Trigger</v-btn>

<v-tooltip bottom>
<template #activator="tooltip">
<v-btn v-on="{ ...menu.on, ...tooltip.on }">Menu Trigger with Tooltip</v-btn>
</template>

<span>Tooltip Content</span>
</v-tooltip>
</template>

<!-- ...list with menu options... -->
</v-menu>
完整演示:

new Vue({
el: '#app',

data: () => ({
items: [
{ title: 'Item #1' },
{ title: 'Item #2' },
{ title: 'Item #3' }
]
})
})
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>

<div id="app">
<v-menu>
<template #activator="{ on: onMenu }">
<v-btn v-on="onMenu">Menu Trigger</v-btn>

<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
</template>

<span>Tooltip Content</span>
</v-tooltip>
</template>

<v-list>
<v-list-tile
v-for="(item, index) in items" :key="index"
@click.prevent>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>

关于vue.js - 在 vuetify 2.0 中的 v-menu 激活器中使用 v-tooltip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58075400/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com