文本复制功能

方法一： navigator.clipboard.writeText

在https/localhost两种安全环境下才能使用

<template>
  <div>
    <button @click="copy">复制</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
       content:"你好 \n\n,你是谁\n",
    };
  },
  methods: {
      /**
       * 点击复制文本内容
       * 
       * @param {String} content 
       * 
       * @author huguangzhe
       * @date 2023-12-06
       */
      copy(){
          navigator.clipboard.writeText(this.content).then(() => {
              this.$Message.success('复制成功！');
          });
      },
  }
}

方法二：document.execCommand('copy')

        copy(val){
            const textarea = document.createElement('textarea');
            textarea.value = val;
            document.body.appendChild(textarea);
            textarea.select();
            try {
                const successful = document.execCommand('copy');
                const msg = successful ? '复制成功！' : '复制失败！';
                this.$Message.success(msg);
            } catch (err) {
                console.error('复制失败：', err);
                this.$Message.error('复制失败！');
            } finally {
                document.body.removeChild(textarea);
            }
        },

方法三：使用 vue-clipboard2 插件

1.全局引入  main.js

import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

        //文本复制功能
        copy(val){
              this.$copyText(val).then(
                res => {
                    
                    this.$Message.success('复制成功！');
                },
                err => {
                    this.$Message.error('复制失败');
                }
            );
          },