Question

我正在尝试编写一个Vue指令，该指令在评估组件之前更新组件的属性。

例如，请考虑以下内容。

<b-modal v-i18n:title="'i18n.key'">
  Hello
</b-modal>

b-modal是一个Vue组件，它采用名为＆＃39; title＆＃39;的属性。我希望有一个自定义指令，可以在翻译提供的密钥后设置属性标题。

也就是说，我希望上面的代码能够被指令重写为：

<b-modal title="Translated Text">
  Hello
</b-modal>

到目前为止，我已阅读以下资源，但未找到有关如何执行此操作的参考资料。

https://css-tricks.com/power-custom-directives-vue/ http://optimizely.github.io/vuejs.org/guide/directives.html

我目前的尝试是这样的：

Vue.directive('i18n', {
  inserted: function (el,binding) {
    const i18nKey  = binding.value;
    const attrName = binding.arg;

    el.setAttribute(attrName, i18nKey);
  }
})

这种尝试遗憾地落空了。它导致最终DOM元素的更改，并且不会影响过去Vue组件的属性。

如何修改上述指令以将过去的属性更改为b-modal组件？

Vue2 Custom Directive修改组件调用

0 个答案: