как правильно сделать из этого директиву?
Правильно - никак.
Использовать 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);
Ну как, окей?
