Как правильно создать директиву на VUE?

Question

[Aleksandr_KH]

Всем привет.
Ребят, подскажите как правильно сделать из этого директиву?
Чтобы это выглядело примерно так
<div v-clipboard="someData">Copy button</div>

Answer 1

[0xD34F]

как правильно сделать из этого директиву?

Правильно - никак. Использовать execCommand не надо:

Note: This method is obsolete and should not be used. In particular, to interact with the clipboard, consider using the Clipboard API instead.

Так что последуем совету из документации, и воспользуемся современным инструментарием:

const clipboardDirective = (() => {
  const values = new Map();
  const onClick = e => navigator.clipboard.writeText(values.get(e.currentTarget));

  return {
    bind(el, binding) {
      el.addEventListener('click', onClick);
      values.set(el, binding.value);
    },
    update(el, binding) {
      values.set(el, binding.value);
    },
    unbind(el) {
      el.removeEventListener('click', onClick);
      values.delete(el);
    },
  };
})();

Vue.directive('clipboard', clipboardDirective);

Ну как, окей?

Comments

[Aleksandr_KH]

Да, похоже на это, не совсем понимаю как мне объединить это все в одном отдельном файле copyclipboard.directive.js, например.