官网使用
简介
通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
使用
引入js
-
script引入
<script src="dist/clipboard.min.js"></script>
-
npm安装
npm install clipboard --save
复制方式
- 从target复制目标内容
- 通过function复制内容
- 通过属性返回复制内容
从target复制目标内容
-
input-
data-clipboard-target指向复印节点，这里指input的目标id -
data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用
-
<input id="foo" type="text" value="hello">
<button
class="btn"
data-clipboard-action="copy"
data-clipboard-target="#foo"
>Copy</button>
textare
与input用法差不多
<textarea id="bar">hello</textarea>
<button
class="btn"
data-clipboard-action="cut"
data-clipboard-target="#bar">Cut</button>
div
与input用法差不多
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
初始化js
const clipboard = new ClipboardJS('.btn')
clipboard.on('success', (e) => {
console.log(e)
/*
{
action: 'copy',
text: 'hello_div',
trigger: 'button',
clearSelection: f()
}
*/
})
clipboard.on('error', (e) => {
console.log(e)
})
通过function复制内容
- 通过
target的function复制内容
通过target来指定要复制的dom元素
- html
<button class="btn">Copy_target</button>
<div>copy content</div>
- js
const clipboard = new ClipboardJS('.btn', {
// 这里是指定要复制的dom元素
target: () => document.querySelector('div')
})
clipboard.on('success', (e) => {
console.log(e)
})
clipboard.on('error', (e) => {
console.log(e)
})
- 通过
text的function复制内容
通过text来指定要复制的内容
- html
<button class="btn">Copy</button>
- js
const clipboard = new ClipboardJS('.btn', {
// 直接通过text返回了要复制的内容
text: () => 'copy content'
})
clipboard.on('success', (e) => {
console.log(e)
})
clipboard.on('error', (e) => {
console.log(e)
})
通过属性返回复制内容
通过data-clipboard-text属性返回复制的内容
- 单节点
通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容
- html
<div id="btn" data-clipboard-text="123">copy</div>
- js
const btn = document.getElementById('btn')
const clipboard = new ClipboardJS(btn)
clipboard.on('success', (e) => {
// 返回的是 123
console.log(e)
})
clipboard.on('error', (e) => {
console.log(e)
})
- 多节点
通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是111，222，333
- html
<button class="btn" data-clipboard-text="111">Copy</button>
<button class="btn" data-clipboard-text="222">Copy</button>
<button class="btn" data-clipboard-text="333">Copy</button>
- js
// 通过标签获取所有
const btns = document.querySelectorAll('button')
const clipboard = new ClipboardJS(btns)
// 或者通过传入类名
const clipboard = new ClipboardJS('.btn')
clipboard.on('success', (e) => {
// 返回的是 111, 222, 333
console.log(e)
})
clipboard.on('error', (e) => {
console.log(e)
})
Vue中的使用
非组件化使用
为什么要区分看，看后面的组件化使用就知道了
<template>
<div>
<div id="copyContent">要复制的内容</div>
<a
href="javascript:void(0);"
ref="copyBtn"
title="点击复制内容"
data-clipboard-action="copy"
data-clipboard-target="#copyContent"
@click="clickHandle">
复制
</a>
<div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
data() {
return {
copyBtn: null
}
},
mounted() {
const copyBtn = this.$refs.copyBtn
this.copyBtn = new Clipboard(copyBtn)
},
methods: {
clickHandle() {
this.copyBtn.on('success', (e) => {
console.log(e)
})
this.copyBtn.on('error', (err) => {
console.error('copy error', err)
})
}
}
}
</script>
组件化使用
如果做成了copy组件，会出现一个问题，如果一个页面里面有多个copy组件，那么id会不是唯一，当不管点击那个复制，复制的内容都会是最后一个加载好的组件里面的内容
通过Vue里面的唯一标识_uid来动态设置id使其不会相同
<template>
<div>
<div :id="`copyContent${_uid}`">
<!-- 外面要复制的内容的插槽 -->
<slot></slot>
</div>
<a
href="javascript:void(0);"
ref="copyBtn"
title="点击复制内容"
data-clipboard-action="copy"
:data-clipboard-target="`#copyContent${_uid}`"
@click="clickHandle">
复制
</a>
<div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
data() {
return {
copyBtn: null
}
},
mounted() {
const copyBtn = this.$refs.copyBtn
this.copyBtn = new Clipboard(copyBtn)
},
methods: {
clickHandle() {
this.copyBtn.on('success', (e) => {
console.log(e)
})
this.copyBtn.on('error', (err) => {
console.error('copy error', err)
})
}
}
}
</script>
因为内容是slot插入进来的，所以不知道是什么内容，无法使用text的function方式去实现
