带有指令的 Vue 渲染元素答案

【问题标题】：Vue render element with directive带有指令的 Vue 渲染元素
【发布时间】：2018-04-19 22:51:57
【问题描述】：

我正在尝试使用渲染函数来渲染此指令

<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

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

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

【问题讨论】：

如果我没记错的话，名字应该只是tooltip
耶稣谢谢你！回答它，以便我可以接受答案

标签： vue.js vuejs2

【解决方案1】：

正如我在 cmets 中提到的，v-tooltip 应更改为 tooltip。

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

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

上面的指令可以被称为：

<input v-focus>

_source

【讨论】：

我们如何传递选项？如v-tooltip.bottom将工具提示放在底部
@null Args 应该用作v-my-directive:foo，并通过inserted 的第二个参数访问，如下：inserted: function (el, binding) { console.log(binding.arg) }