使用vuetify中的VMenu和render函数(作用域插槽)
使用vuetify中的VMenu和render函数(作用域插槽)
提问于 2021-05-06 00:52:29
我正在尝试使用Vuetify的VMenu组件，我希望当用户点击按钮时，VMenu就会出现。至于docs，它说我们应该添加一个作用域插槽。使用普通模板时，它可以工作，但当我切换到渲染函数方法时，它永远不会渲染按钮。
我一直在关注Vue的docs，结果是：
h(VMenu, { props: { value: isMenuOpen.value } }, [
h(
"template",
{
scopedSlots: {
activator: ({ on, attrs }) => {
debugger; // it never reaches this debugger
return h(VButton, { on, attrs }, 'click me');
}
},
},
[]
),
h(VList, [h(VListItem, [h(VListItemTitle, ["Logout"])])]),
]),我也尝试过使用非箭头函数：
scopedSlots: { activator: function({ on, attrs }) { return h('div', 'click me'); } }并且在非箭头函数和箭头函数中都返回一个简单的h('div', 'click me')，但似乎什么都不起作用。
如何将作用域插槽activator传递给VMenu组件？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-07 05:06:51
作用域插槽以{ name: props => VNode | Array<VNode> }的形式通过createElement的第二个参数的scopedSlots property传递。
import { VMenu, VList, VListItem, VBtn } from 'vuetify/lib'
export default {
render(h) {
return h(VMenu, {
scopedSlots: {
activator: props => h(VBtn, props, 'Open'),
default: () => h(VList, [
h(VListItem, 'item 1'),
h(VListItem, 'item 2'),
h(VListItem, 'item 3'),
]),
},
})
}
}相当于这个模板：
<template>
<v-menu>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">Open</v-btn>
</template>
<v-list>
<v-list-item>item 1</v-list-item>
<v-list-item>item 2</v-list-item>
<v-list-item>item 3</v-list-item>
</v-list>
</v-menu>
</template>Stack Overflow用户
发布于 2021-05-06 20:24:28
我不能完全理解我的问题中描述的问题。这是一个答案，不是为了回答完全原始的问题，而是为了指导可能会遇到这个问题的未来用户。
我没有使用作用域插槽，而是结合使用了value prop和attach prop。这个解决方案最终工作起来没有任何问题。
button(
{
attrs: { "data-account-setting": true },
props: { plain: true, rounded: true, icon: true },
on: { click: onOpenMenuClick },
},
[h(VIcon, ["mdi-account-outline"])]
),
h(
VMenu,
{
props: {
value: isMenuOpen.value,
// waiting on answer on SO
// @see https://stackoverflow.com/questions/67405594/using-vmenu-from-vuetify-with-render-function-scoped-slot
attach: "[data-account-setting]",
minWidth: "300px",
left: true,
offsetY: true,
closeOnContentClick: false,
rounded: true,
},
on: {
input: (value: boolean) => {
isMenuOpen.value = value;
},
},
},
[
h(VList, { props: { dense: true } }, [
h(VListItem, { props: { to: { name: "logout" } } }, [
h(VListItemTitle, { attrs: { 'data-cy-logout': true } }, ["Logout"]),
]),
]),
]
),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67405594
复制相关文章
相似问题
腾讯云开发者
