vue 复制功能插件使用

npm i --save clipboard
npm i --save vue-clipboard2
npm i --save vue-clipboard3
//三种复制集合
在main.js中引入vue-clipboard2

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

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

clipboard 使用方法

//html
  <el-button type="text" 
      data-clipboard-action="copy" 
       :data-clipboard-text="复制的内容" 
        class="cobyOrderSn" @click="copylink" >复制</el-button>

copylink（）{
         let _this = this;
                let clipboard = new this.clipboard(".cobyOrderSn");
                clipboard.on('success', function () {
                    console.log(123)
                    _this.$message({showClose: true,duration:3000,message: '复制成功',type: 'success'});
                });
                clipboard.on('error', function () {
                   _this.$message({showClose: true,duration:3000,message:'复制失败',type: 'error'});
                });
}

vue-clipboard2 使用方法

let copy = '需要复制的内容'
this.$copyText(copy).then(
       res => {
              _this.$toast({message: `链接复制成功，请关闭弹窗！`,duration: 2000});
        },
        err => {
                _this.$toast({message: `链接复制失败，请关闭弹窗！`,duration: 2000});
            }
         );

vue3中使用复制
vue-clipboard3

<script>
import useClipboard from "vue-clipboard3"; 
export default {
        setup () {
              const { toClipboard } = useClipboard();//复制
              //复制
              const copy = (e) =>{
                    try{
                         toClipboard('需要复制的内容')
                         ElMessage.success('复制成功，请在浏览器打开！')
                    }
                    catch{
                         ElMessage.success('该浏览器不支持自动复制')
                    }
               }
        }
}