使用

1、用一个元素当触发器来复制另一个元素的文本，需要传递 DOM 选择器，HTML 元素或 HTML 元素列表来实例化它。

2、在触发器元素上添加 data-clipboard-target 属性，该属性值是一个元素选择器，用来匹配另一个需要被复制的元素。

<div id="copyContent">需要被复制的内容</div>
<button id="copyBtn" data-clipboard-target="#copyContent">点击复制</button>
<script src="js/clipboard.min.js" charset="utf-8"></script>

//触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {
  console.log('复制成功！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的DOM元素:', e.trigger)
  e.clearSelection()
})

clipboard.on('error', function (e) {
  console.log('复制失败')
  console.log('触发操作的DOM元素:', e.trigger)
})

另外，触发器元素上也可以定义 data-clipboard-action 属性为 copy 或 cut ，来明确操作是复制还是剪切，如果忽略了这个属性，则默认是复制。值为 cut 时仅适用于 input 或 textarea 元素。

<input id="copyContent" value="需要被复制的内容"/>
<button id="copyBtn" data-clipboard-target="#copyContent" data-clipboard-action="cut">点击剪切</button>

//触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {
  console.log('复制成功！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的DOM元素:', e.trigger)
  e.clearSelection()
})

clipboard.on('error', function (e) {
  console.log('复制失败')
  console.error('触发操作的DOM元素:', e.trigger)
})

如果在触发器元素上定义 data-clipboard-text 属性，则不需要另一个元素来复制其内容。data-clipboard-text 属性值就是需要被复制的内容。

<button id="copyBtn" data-clipboard-text="需要被复制的内容">点击复制</button>

//触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {
  console.log('复制成功！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的DOM元素:', e.trigger)
  e.clearSelection()
})

clipboard.on('error', function (e) {
  console.log('复制失败')
  console.error('触发操作的DOM元素:', e.trigger)
})