vuejs使用clipboard复制到剪切板

1、下载并安装cilpboard 插件

 npm install clipboard --save

2、注册插件编辑 main.js,增加以下两行

import clipboard from 'clipboard'
Vue.prototype.clipboard = clipboard

3、使用插件在data()中定义拷贝的变量

data() {
  return {
    file_url: "",
  }

修改 el-button 属性,将 file_url变量的值传给data-clipboard-text,同时需定义data-clipboard-action的值为”copy”,其次,还得将当前 button 的 class进行定义,后面的步骤中需要根据 class 名称进行复制。

<el-button
  size="mini" class="js-copy" data-clipboard-action="copy"
  :data-clipboard-text="file_url"
  @click="handleCopyURL(scope.$index, scope.row)">复制路径
</el-button>

在methods中添加handleCopyURL方法

handleCopyURL: function (index, row) {
  let _this = this
  _this.file_url = row.file_url
  let clipboard = new this.clipboard(".js-copy")
  clipboard.on('success', function () {
    _this.$message({
      message: '复制成功!',
      type: 'success'
    });
    clipboard.destroy();
  });
  clipboard.on('error', function () {
    _this.$message({
      message: '复制失败,请手动选择复制!',
      type: 'error'
    });
  });
}

在复制成功处理方法中,一定要将clipboard对象进行销毁,否则点击多次的时候会出现多次复制成功的提示。

Comments are closed.