vue.js - 在 vuetify 模板中合并多个 v-slot:activator 和 v-on
问题描述
我正在尝试创建可重用的模式窗口,应该通过按下每个 v-data-table 行上的图标来调用它。此外,每个图标都应该有鼠标悬停的工具提示。
根据 vuetify 文档,这两个操作都使用相同的结构:v-slot:activator="{ on }"
和v-on="on"
. 问题是——在 Vue/Vuetify 中有没有办法合并这些结构并获得所需的行为?
目前,我找到了一种通过添加附加<a>
标签来获得我想要的东西的方法:
<template>
<v-data-table :headers="headers" :items="tableItems">
<template v-slot:item="props">
<tr>
<td>{{ props.item.text }}</td>
<td>
<some-modal>
<template v-slot:activator="{ on }">
<a v-on="on">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on" small class="mr-2">delete</v-icon>
</template>
<span>Tooltip message</span>
</v-tooltip>
</a>
</template>
</some-modal>
</td>
</tr>
</template>
</v-data-table>
</template>
但也许有任何方法可以合并v-slot:activator
并且v-on
没有附加<a>
标签?
解决方案
在这里偶然发现了解决方案,归功于@Yom T。
<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-menu>
推荐阅读
- javascript - 将订阅表格合并为 1
- amazon-web-services - AWS 队列限制
- sql - Athena/Presto:使用左连接取消嵌套 2 个数组
- flutter - Future.delayed 和 Timer 正在执行所有延迟的回调
- django - 当 DEBUG 为 False 时如何在 Django 中获取最后执行的查询?
- mysql - 对面的mysql数据透视表
- node.js - MissingRequiredParameter:参数中缺少必需的键“thingName”
- python - Codeforces 上的“输出格式错误,文件意外结束 - 预期令牌”错误
- c# - 如何使用 EF Core 使 C# 中的字段唯一?
- symfony - Symfony 中的延迟学说事件侦听器以发送 webhook