前端 vue2 设置一个复制功能的 自定义命令可供全局使用 代码

在Vue2中，如果你想要创建一个自定义指令来实现全局的复制功能，你可以按照以下步骤进行：

1. 在你的Vue应用的`main.js`或者任何一个`main.*.js`文件中，你可以添加一个全局自定义指令。

// main.js 或者 main.ts
import Vue from 'vue';

// 注册一个全局自定义指令 `v-copy`
Vue.directive('copy', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    // 创建一个 copy 的按钮
    var copyButton = document.createElement('button');
    copyButton.style.position = 'absolute';
    copyButton.style.left = '-9999px';
    copyButton.textContent = '复制';

    // 将按钮绑定到该元素上
    el.appendChild(copyButton);

    // 复制按钮点击事件
    copyButton.addEventListener('click', function() {
      // 获取节点的文本内容
      var range = document.createRange();
      range.selectNodeContents(el);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
      document.execCommand('copy');
      window.getSelection().removeAllRanges();
      alert('复制成功');

      // 删除按钮
      el.removeChild(copyButton);
    });
  }
});

new Vue({
  // ... 其他选项 ...
}).$mount('#app');

2. 使用这个自定义指令：

<!-- 在模板中使用 v-copy -->
<div v-copy="textToCopy">点击复制这段文本</div>

3. 在组件或者 Vue 实例中定义数据属性`textToCopy`，该属性将存储要复制的文本内容：

export default {
  data() {
    return {
      textToCopy: '这里是要复制的文本'
    };
  }
};

现在，你就可以在任何使用了`v-copy`指令的元素上点击按钮来复制文本了。