vue 实现点击复制内容

心黑红卜萝

于 2019-05-14 14:47:41 发布

阅读量862

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/quKbin/article/details/90206084

vue 专栏收录该内容

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
    },
}