如何多行显示v-tooltip内容

Question

看起来很简单，但我无法让它显示多行。可以用内容来展示吗？

这是 vue.js 组件模板的一部分：

Vue.component('label-provider-item',
    {
        props: ['item'],
        template:
            '<div v-if="item && item.name" v-tooltip="{show: !item.pagerId, content:item.email item.phone item.specialtu,placement: \'top\'}"><dt>{{item.label}}</dt><dd style="margin-bottom:0.25rem;">' +
    }
);

我希望弹出窗口显示这一点（在 3 个单独的行上）：

Email: [email protected]
Phone: xxx-xxx-xxxxx
Specialty: my specialty

我可以在可以使用 html 代码块的地方以不同的方式定义 v-tooltip 吗？ 非常感谢。

Answer 1

最后，我通过向组件的方法部分添加一个函数来解决这个问题，如下所示：

methods: { createTooltipHtmlContent: createTooltipHtmlContent }

该方法用于生成tooltip内容的html内容，之后的v-tooltip是这样的：

v-tooltip.top="{show: !item.pagerId, content:createTooltipHtmlContent(item)}