1

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

例如，考虑以下内容。

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

b-modal 是一个 Vue 组件，它有一个名为“title”的属性。我想要一个自定义指令，可以在翻译提供的键后设置属性标题。

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

<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 组件？

4

0 回答 0