vue2 pc端，后台管理项目实现复制到剪切板粘贴功能

yu_0119

已于 2022-09-29 15:19:15 修改

阅读量451

点赞数

分类专栏： VUE js 文章标签： vue.js javascript 前端

于 2022-09-29 15:18:56 首次发布

本文链接：https://blog.csdn.net/yu_0119/article/details/127107394

版权

VUE 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

1.安装插件

npm install vue-clipboard2
//或者  yarn add vue-clipboard2

2.全局引入

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

3.页面运用

<span @click="onCopy('要复制的内容')">点击复制</span>

    onCopy(txt) {
      //拷贝对象不能为数组、对象类型。使用JSON.stringify转化为字符串
      let str = JSON.stringify(txt);
      this.$copyText(str)
        .then(() => {
          this.$message.success({ message: "已成功复制到剪切板" });
        })
        .catch(() => {
          this.$message.error({ message: "复制失败" });
        });
    },