使用clipboard实现复制文本到剪贴板

clipboard是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中.
clipboard支持主流的浏览器：chrome 42+、Firefox 41+、IE 9+、opera 29、Safari 10+

使用方式

直接引入cdn或下载到本地
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
在npm脚手架中使用
npm install clipboard --save
import Clipboard from 'clipboard'

检查浏览器是否支持clipboard

1 2	<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script> console.log(ClipboardJS.isSupported()) // true

clipboard复制内容的方式

从target复制目标内容

<button class="btn">Copy_target</button>
<script>
var clipboard = new ClipboardJS('.btn', {
  // 通过target指定要复制的节点
  target: function() {
    return document.querySelector('.btn')
  }
})
clipboard.on('success', function(e) {
  console.log(e)
})
clipboard.on('error', function(e) {
  console.log(e)
})
</script>

通过data-clipboard-target设置复制目标元素

<div id="txt">Copy_target</div>
<button class="btn" data-clipboard-target="#txt">复制</button>
<script>
// 从另一个元素上复制文本
var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  console.log(e.text) // Copy_target
})
clipboard.on('error', function(e) {
  console.log(e)
})
</script>

通过data-clipboard-text属性返回复制的内容

<!-- 单节点 -->
<button class="btn" data-clipboard-text="通过属性复制">Copy</button>
<script>
var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  console.log(e.text) // 通过属性复制
})
clipboard.on('error', function(e) {
  console.log(e)
})
</script>
<!-- 多节点 -->
<button class="btn" data-clipboard-text="通过属性复制1111">Copy</button>
<button class="btn" data-clipboard-text="通过属性复制2222">Copy</button>
<button class="btn" data-clipboard-text="通过属性复制3333">Copy</button>
<script>
// 通过 .btn 获取所有复制按钮 每个按钮被点击时, 返回对应的 data-clipboard-text的内容
var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  console.log(e.text)
})

data-clipboard-action用来设置复制或者剪切事件,默认为copy

<input type="text" value="Copy 文字" id="txt" />
<button class="btn" data-clipboard-target="#txt" data-clipboard-action="cut">Copy</button>
<script>
// cut 只能在 input或textarea 中使用
var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  console.log(e.text) // Copy 文字
})

通过text函数返回需要复制的内容

<button class="btn">Copy</button>
<script>
var clipboard = new ClipboardJS('.btn', {
  // 点击copy按钮，直接通过text直接返回复印的内容
  text: function() {
    return 'text 复制内容'
  }
})
clipboard.on('success', function(e) {
  console.log(e.text) // text 复制内容
})
</script>

使用中遇到过的问题

clipboard复制成功或失败多次回调的问题

// 只需要在成功或失败时 及时销毁即可
var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  console.log(e)
  clipboard.destroy()
})
clipboard.on('error', function(e) {
  console.log(e)
  clipboard.destroy()
})

复制文本时文本会被选中

var clipboard = new ClipboardJS('.btn')
clipboard.on('success', function(e) {
  e.clearSelection() // 禁止复制文字后文字被选中
  clipboard.destroy()
})
clipboard.on('error', function(e) {
  clipboard.destroy()
})

在element的el-popover的弹窗组件中无法复制的问题

<!-- 解决办法：使用$ref获取实例化需要传入的DOM -->
<template>
  <div class="hello">
    <el-popover
      placement="bottom"
      width="400"
      trigger="click">
      <el-table :data="gridData">
        <el-table-column min-width="150" property="date" label="日期"></el-table-column>
        <el-table-column min-width="100" prop="name" label="姓名">
          <template slot-scope="scope">
            <span @click="copy(scope)"
              :ref="'copy' + scope.$index"
              :data-clipboard-text="scope.row.name">{{ scope.row.name }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>
  </div>
</template>
<script>
import ClipboardJS from 'clipboard'
export default {
  name: 'HelloWorld',
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎'
      },{
        date: '2016-05-02',
        name: '王老鼠'
      }],
    }
  },
  methods: {
    copy (scope) {
      let el = this.$refs['copy'+scope.$index]
      let clipboard = new ClipboardJS(el)
      clipboard.on('success', ()=>{
        this.$message('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', ()=>{
        this.$message('复制失败')
        clipboard.destroy()
      })
      clipboard.onClick(event)
    }
  }
}
</script>

第一次点击复制不生效，第二次才生效的问题
点击复制时使用clipboard.onClick()

copy (scope) {
  let el = this.$refs['copy'+scope.$index]
  let clipboard = new ClipboardJS(el)
  clipboard.on('success', ()=>{
    this.$message('复制成功')
    clipboard.destroy()
  })
  clipboard.on('error', ()=>{
    this.$message('复制失败')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

最终版使用 event.target 代替传入的DOM 不需要获取DOM或ref

<template>
  <div class="hello">
    <el-popover placement="bottom" width="400" trigger="click">
      <el-table :data="gridData" ref="atb">
        <el-table-column min-width="150" property="date" label="日期"></el-table-column>
        <el-table-column min-width="100" prop="name" label="姓名">
          <template slot-scope="scope">
            <span @click="test" :data-clipboard-text="scope.row.name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>
  </div>
</template>
<script>
import ClipboardJS from 'clipboard'
export default {
  name: 'HelloWorld',
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎'
      },{
        date: '2016-05-02',
        name: '王老鼠'
      }],
    }
  },
  methods: {
    test (event) {
      // 需要注意的是要复制的内容是元素本身
      let clipboard = new ClipboardJS(event.target) // 使用event.target 代替 获取DOM
      clipboard.on('success', (e)=>{
        this.$message('复制成功')
        e.clearSelection() // 禁止复制文字后文字被选中
        clipboard.destroy()
      })
      clipboard.on('error', (e)=>{
        this.$message('复制失败')
        clipboard.destroy()
      })
      clipboard.onClick(event) // 解决第一次点击无法复制的问题 第二次可正常复制的问题
    }
  }
}
</script>