vue复制粘贴功能

第一种【推荐】

npm install clipboard --save

<template>
  <div>
    <input type="text" v-model="copyText" />
    <button @click="copyToClipboard">复制到剪贴板</button>
  </div>
</template>
 
<script>
import Clipboard from 'clipboard';
 
export default {
  data() {
    return {
      copyText: '这是要复制的文本'
    };
  },
  methods: {
    copyToClipboard() {
      const clipboard = new Clipboard('.btn', {
        text: () => this.copyText
      });
 
      clipboard.on('success', () => {
        console.log('复制成功');
        // 清理，防止多次触发
        clipboard.destroy();
      });
 
      clipboard.on('error', () => {
        console.log('复制失败');
        // 清理，防止多次触发
        clipboard.destroy();
      });
    }
  }
};
</script>

第二种：测试环境可以，正式环境可以

在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined，经查找资料发现是浏览器禁用了非安全域的 navigator.clipboard 对象，哪些地址是安全的呢？

安全域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost 。

// 此方案在测试环境可以。正式环境不可以。
copyLink{     
       try {
        await navigator.clipboard.writeText(row.landingPageUrl)
        console.log('链接已复制')
        this.$message.success('复制成功')
      } catch (error) {
        this.$message.error('复制链接失败')
      }
}

下面为解决方案：

// 此方案可以
    copyLink (row) {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard
          .writeText(row.landingPageUrl)
          .then(() => {
            this.$message.success('复制成功')
          })
          .catch(() => {
            this.$message.error('复制失败')
          })
      } else {
        // 创建text area
        const textArea = document.createElement('textarea')
        textArea.value = row.landingPageUrl
        // 使text area不在viewport，同时设置不可见
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        return new Promise((resolve, reject) => {
          // 执行复制命令并移除文本框
          document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
          textArea.remove()
        }).then(
          () => {
            this.$message.success('复制成功')
          }).catch(() => {
          this.$message.error('复制失败')
        })
      }
    },

来源：https://blog.csdn.net/weixin_44690195/article/details/128251421?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-128251421-blog-134970966.235%5Ev43%5Epc_blog_bottom_relevance_base7&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-128251421-blog-134970966.235%5Ev43%5Epc_blog_bottom_relevance_base7&utm_relevant_index=1