vue自定义指令--一键复制

vue项目中想要实现点击按钮一键复制，可以通过vue的自定义指令directive来实现。

一、新建directive.js文件

新建directive.js文件，用于定义所有的自定义指令。

import {  Toast } from 'vant';

const directive = {
  // 一键复制
  copy:{
    bind (el, { value }) {
      el.$value = value;
      el.handler = async () => {
        if (!el.$value) {
          Toast.fail('没有要复制的内容');
          return;
        }
        try {
          // 直接使用 Clipboard API 复制
          await navigator.clipboard.writeText(el.$value);
          Toast.success('复制成功');
        } catch (err) {
          Toast.fail('复制失败', err);
        }
      };
      // 监听点击事件
      el.addEventListener('click', el.handler);
    },
    componentUpdated (el, { value }) {
      el.$value = value;
    },
    unbind (el) {
      el.removeEventListener('click', el.handler);
    }
  }
}

export default directive;

二、main.js文件引入

import directive from "./utils/directive";

Vue.directive('copy', directive.copy);

三、使用

在标签中通过使用v-copy=“需要复制的内容”指令，点击按钮后实现一键复制

<button 
    class="copy-button" 
    v-copy="shareInfo.URL" 
    @click="()=>{ screen2 = false }"
>复制链接</button>

 

参考链接：vue使用自定义指令实现一键复制_vue 复制-优快云博客