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

2019-12-30 23:30:28

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.实现效果


  • 2017-11-10 00:06:15

    CORS: credentials mode is 'include'

    XMLHttpRequest cannot load http://localhost/Foo.API/token. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:5000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

  • 2017-11-19 00:17:51

    Java如何获取Date的“昨天”与“明天”示例代码

    最近在做项目的时候用到Date和Calendar比较多,而且用到的方式也比较全,突然想到一个问题,Java如何获取Date的"昨天"与"明天",也就是前一天和后一天呢?思考后写出了方法,想着万一以后用到,就总结出来,也方便有需要的朋友们参考借鉴,下面来一起看看吧。