vue用clipboard实现复制按钮

1、使用情景

vue用clipboard实现复制按钮_第1张图片
如图我要在table里面加一个能够实现复制列表项内容的按钮,这时候首先想到了clipboard插件。

2、下载

npm install clipboard --save

3、使用

1、引用
在当前页面引入下载的clicpboard插件

 import Clipboard from 'clipboard';

2、html代码

<el-table-column label="secretKey" >
            <template slot-scope="{row}">
              <span id="copyCode">{{row.secretKey}}</span>
              <el-button @click="copySecretKey(row)" class="tag">复制</el-button>
            </template>
          </el-table-column>

3、JS代码

copySecretKey(data) {
        let clipboard = new Clipboard('.tag', {
          text: function () {
            return data.secretKey
          }
        });
        clipboard.on('success', e => {
        console.log('复制成功');
          // 释放内存
          clipboard.destroy()
        });
        clipboard.on('error', e => {
          console.log('复制失败');
          clipboard.destroy()
        })
      },```

你可能感兴趣的:(Vue,前端知识)