vue 复制粘贴功能（进入页面获取剪切板中的内容）

1、v-clipboard插件
2、不用插件，进入页面获取剪切板中的内容
1、v-clipboard插件

1.安装依赖
npm install --save v-clipboard
 
2.在main.js中引入
import Vue from 'vue'
import Clipboard from 'v-clipboard'
 
Vue.use(Clipboard)
 
3.使用
<template>
    <button v-clipboard="value"
        v-clipboard:success="onCopy" 
        v-clipboard:error="onError">    
        Copy to clipboard
   </button> 
</template>
 
 
export default {
   data() {
      return {
         value:'2659100297@qq.com'
      }
   },
   methods: {
      // Success event handler 
      onCopy({ value, event }){
         console.log('success', value);
         this.$message.success("已复制");
      },
      // Error event handler
      onError({ value, event }) {
         console.log('error', value)
      }
    }
}

2、不用插件，进入页面获取剪切板中的内容

<template>
  <div>
     <h2 class="t-center mt-10">复制组件</h2>
     <div class="mt-15 p-10">
       <el-input v-model="msg" placeholder="请输入内容"></el-input>
       <br />
       <span>{{str}}}</span>
       <el-button type="primary" @click="copy">复制</el-button>
       <div>下面是粘贴内容</div>
       <el-input v-model="strCopy" placeholder="右键复制"></el-input>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      str: "点击按钮复制此内容",
      strCopy: ""
    };
  },
  mounted() {
    this.getPaste();
  },
  watch: {},
  methods: {
    // 获取 粘贴板 内容
    async getPaste() {
      var val = await navigator.clipboard.readText();
      this.msg = val;
    },
    //写入 粘贴板 内容
    async copy() {
      await navigator.clipboard.writeText(this.str);
    }
  }
};
</script>
<style lang="less" scoped>
</style>

感谢大佬分享，更多内容点击这里
感谢