带有指令的Vue渲染元素

Question

我正在尝试使用渲染函数渲染这个指令

<h2 v-tooltip.top="{ content: 'You have new messages.', classes: 'tooltip-info', offset: 15 }">
            some text
</h2>

在函数内部使用此代码

return createElement('h2', {
                    directives: [
                        {
                            name: 'v-tooltip',
                            value: {
                                content: field.tooltip.content ? field.tooltip.content : field.tooltip,
                                classes: field.tooltip.class ? field.tooltip.class : 'tooltip-info',
                                offset: 15,
                            },
                            arg: 'top',
                        },
                    ],
                }, [field.title]);

但我收到此错误：[Vue warn]: Failed to resolve directive: v-tooltip

我错过了什么，字段是可能有内容或类道具的对象。所以我设置它们，如果它有或在其他中默认。

v-tooltip 是这个指令https://github.com/Akryum/v-tooltip

Answer 1

正如我在评论中提到的，v-tooltip应该改为tooltip.

在 vuejs 中定义指令时，名称不需要v-前缀：示例：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

然后可以将上述指令称为：

<input v-focus>

_来源