vue 实现复制功能使用插件 vue-clipboard2

安装插件

npm install --save vue-clipboard2

在组件中引入

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

使用 Demo

<template>
  <div class="main">
    <div class="copy-div">
      copyText：<span>{{cptext}}</span>
      <el-button type="text" size="medium"
        v-clipboard:copy="cptext"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">点击复制</el-button>
    </div>
</template>

<script>
export default {
  data(){
    return {
      cptext: '这是复制的内容！'
    }
  },
  methods: {
    // 复制成功
    onCopy(e){
      alert("复制成功");
    },
    // 复制失败
    onError(e){
      alert("复制失败");
    },
  }
}
</script>