使用Vue的插件clipboard使用复制功能

Posted linchen1300

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Vue的插件clipboard使用复制功能相关的知识,希望对你有一定的参考价值。

1.安装clipboard插件 ------------ npm install clipboard

2.使用 clipboard

<template>
    <div style="margin-right: auto;margin-left: auto;width: 800px">
      <el-table :data="list">
        <el-table-column label="搜索引擎" prop="name"></el-table-column>
        <el-table-column label="链接" prop="url"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="copyLink(scope.row)" class="tag">复制链接</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import Clipboard from clipboard
export default {
  name: ClipboardTest,
  data () {
    return {
      list: [
        {name: 百度, url: https://www.baidu.com/},
        {name: 谷歌, url: https://www.google.com.hk/},
        {name: 360搜索, url: https://www.so.com/}
      ]
    }
  },
  methods: {
    copyLink (data) {
      console.log(1)
      let clipboard = new Clipboard(.tag, {
        text: function () {
          return data.url
        }
      })
      clipboard.on(success, e => {
        this.$message({message: 复制成功, showClose: true, type: success})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on(error, e => {
        this.$message({message: 复制失败,, showClose: true, type: error})
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>

</style>

 

3.实现效果

技术分享图片

 

以上是关于使用Vue的插件clipboard使用复制功能的主要内容,如果未能解决你的问题,请参考以下文章

vue获取剪切板内容_Vue通过clipboard插件实现复制到剪切板功能

vue获取剪切板内容_Vue通过clipboard插件实现复制到剪切板功能

Vue中封装复制粘贴插件Clipboard

Vue中封装复制粘贴插件Clipboard

vue实现复制功能

VUE 使用插件vue-clipboard2复制内容至剪切板(两种使用方法)