vue复制到剪切板功能（vue-clipboard2）

最新推荐文章于 2025-03-20 18:24:17 发布

weixin_34138377

最新推荐文章于 2025-03-20 18:24:17 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：https://juejin.im/post/5bbeacfe5188255c451ecb96

本文详细介绍如何在Vue+Webpack项目中使用vue-clipboard2插件实现文本复制功能。从安装配置到具体代码示例，包括复制成功和失败的回调处理，以及在表格中双击复制文本的具体实现。

写在前面：为什么会是vue-clipboard2???因为刚写的项目就用的这个啊，哈哈哈哈，我只好记下这个怎么用了，至于clipboard，用法几乎一样，只是写法不同罢了

项目基础 vue+webpack

安装

npm i vue-clipboard2 --save-dev
复制代码

在main.js中引入

import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard)
复制代码

使用

methods:{
    copyText(){   //this.clidata是要复制的动态数据
        this.$copyText(this.clidata).then(()=> {
            console.log("复制成功"+this.clidata)
        },()=> {
            console.log("复制失败了")
            }
        )}
    }
复制代码

调用

直接调用copyText()就行了

附项目代码，功能是表格文本双击即可复制到剪切板

  columns:[
    {
        titel:"编号",
        key:"sys_order_no",
        render: (h, params) => {
            return h(
              "span",
              {
                on: {
                  dblclick: () => {
                    this.clidata = params.row.sys_order_no;
                    this.clifun();
                  }
                }
              },
              params.row.sys_order_no
            );
          }
    }
  ]
 
 
复制代码