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>

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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐