vue 实现点击复制内容

最新推荐文章于 2025-01-10 09:49:21 发布

原创最新推荐文章于 2025-01-10 09:49:21 发布 · 886 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用clipboard插件为el-table添加复制功能，通过具体代码示例展示了如何在表格操作列中集成复制按钮，并处理复制成功与失败的反馈。

1. 安装相关插件

npm install clipboard --save

2.使用

<el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button-group>
            <el-tooltip class="item" effect="dark" content="复制内容" placement="top">
              <el-button type="warning" size="mini" v-clipboard:copy="scope.row.content" v-clipboard:success="onCopy" v-clipboard:error="onError">
                <i class="fa fa-copy"></i>
              </el-button>
            </el-tooltip>
          </el-button-group>
        </template>
      </el-table-column>

methods: {
    onError: function (e) {
      this.$message.error('内容复制失败')
    },
    onCopy: function (e) {
      this.$message.success('已成功复制内容，请直接粘贴')
      // alert('You just copied: ' + e.text)
    },
}