vue中实现复制、粘贴功能(基于vue-clipboard2插件)

1. 安装插件

npm install --save vue-clipboard2

2. 文件中引入，在main下面全局引入

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

3. 使用

<template>
                    <div class="box">
                        <div class="text">
                            {{ text}}
                        </div>
                        <button 
                            v-clipboard:copy="text"
                            v-clipboard:success="onCopy"
                            v-clipboard:error="onError"
                        >
                            复制
                        </button>
                    </div>
</template>

<script>
export default {
  data(){
    return {
      text: '禾下乘凉梦，仓满无饥恐。'
    }
  },
  methods: {
    // 复制成功
    onCopy({text}){
       console.log('success', text);
       alert("复制成功");
    },
    // 复制失败
    onError(e){
      alert("失败");
    },
  }
}
</script>