Vue自定义指令最佳实践教程分享

// src/utils/copyToClipboard.js
export function copyToClipboard(text) {
  const input = document.createElement('textarea');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  try {
    document.execCommand('copy');
    document.body.removeChild(input);
    return true;
  } catch (err) {
    document.body.removeChild(input);
    throw new Error('复制失败');
  }
}

// src/directives/copy.js
import { copyToClipboard } from '../utils/copyToClipboard';
import { isFunction } from '../utils/isType';
export default {
  mounted(el, binding) {
    const handleClick = () => {
      try {
        copyToClipboard(binding.value);
        console.log('复制成功！');
      } catch (err) {
        console.error('复制失败：', err);
      }
    };
    el.__handleClick__= handleClick;
    el.removeEventListener('click', el.__handleClick__);
    el.addEventListener('click', handleClick);
  },
  unmounted(el) {
    el.removeEventListener('click', el.__handleClick__);
    delete el.__handleClick__;
  },
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import copyDirective from './directives/copy';
const app = createApp(App);
app.directive('copy', copyDirective);
app.mount('#app');

<template>
  <button v-copy="'这是复制的文本'">点击复制</button>
</template>

// src/directives/copy.js
import { copyToClipboard } from '../utils/copyToClipboard';
import { isFunction } from '../utils/isType';
export default {
  mounted(el, binding) {
    const handleClick = () => {
      const { success, error } = binding.arg || {};
      try {
        copyToClipboard(binding.value);
        if (isFunction(success)) {
          success();
        }
      } catch (err) {
        if (isFunction(error)) {
          error(err);
        }
      }
    };
    el.__handleClick__ = handleClick;
    el.removeEventListener('click', el.__handleClick__);
    el.addEventListener('click', handleClick);
  },
  unmounted(el) {
    el.removeEventListener('click', el.__handleClick__);
    delete el.__handleClick__;
  },
};

<template>
  <button
    v-copy:success="onCopySuccess"
    v-copy:error="onCopyError"
    v-copy="'高级复制文本'"
  >
    高级复制按钮
  </button>
</template>
<script>
export default {
  methods: {
    onCopySuccess() {
      alert('复制成功！');
    },
    onCopyError(err) {
      alert('复制失败：' + err.message);
    },
  },
};
</script>

src/
├── directives/
│   ├── index.js         # 统一导出所有指令
│   ├── copy.js          # 复制指令
│   ├── focus.js         # 聚焦指令
│   └── lazy-load.js     # 图片懒加载指令
├── utils/
│   ├── copyToClipboard.js # 工具函数
│   └── isType.js         # 类型判断工具

// src/directives/index.js
import copy from './copy';
import focus from './focus';
import lazyLoad from './lazy-load';
export default {
  copy,
  focus,
  lazyLoad,
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives';
const app = createApp(App);
Object.keys(directives).forEach((key) => {
  app.directive(key, directives[key]);
});
app.mount('#app');