结合 clipboard.js 实现复制、粘贴功能
剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现)
想要知道怎么使用,优先参考官方文档(如何指定要复制的数据,如何复制指定的数据...)
- 这篇博客主要是介绍如何实现复制功能并搭配上友好的交互提示(见下方的 demo 图)
一般也就两种操作情况
- 1.复制指定元素的内容
- data-clipboard-action="copy"(复制)
- data-clipboard-target="#bar"(复制 id 为 bar 的元素的内容)
- 2.点击按钮直接复制设定的内容
- data-clipboard-text="diyContent"(复制到剪切板的内容为 diyContent)
demo 效果
申明
clipboard.js 官方文档:clipboard.js
- 中文官网(好像更新没那么及时了):木瓜影视|云播影视|麻花影院|集优影视
本博客 demo 采用的是 vue + element-ui + clipboard.js 实现
- 官网上的提示效果用的是 GitHub's Primer (具体什么个操作还不太懂,没去了解过)
- 页面上的复制成功提示效果调用的是 element-ui 的
Notification 通知
组件
环境配置
安装 clipboard.js:npm install clipboard --save
安装 element-ui...
步骤分析
// 0.复制选项 html 准备(参考官方文档了解配置项)
<p>原样复制指定文本框内容</p>
<div class="row">
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<el-button
class="copyBtn"
data-clipboard-action="copy"
data-clipboard-target="#bar"
icon="el-icon-copy-document"
>Copy</el-button>
</div>
<p>点击复制自定义内容到剪切板</p>
<div class="row">
<el-button
class="copyBtn"
data-test="test..."
:data-clipboard-text="diyContent"
icon="el-icon-copy-document"
>Copy</el-button>
</div>
// 1.需要用到的地方引入 Clipboard
import Clipboard from 'clipboard'
// 2.用触发操作对象实例化一个 clipboard 对象
var clipboard = new Clipboard(".copyBtn");
// 3.为其指定操作成功回调函数
var that = this
clipboard.on("success", function (e) {
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
// 清除选中状态
e.clearSelection();
that.$notify({
title: '成功',
message: '恭喜您复制成功,赶快去粘贴吧~',
type: 'success',
showClose: false
});
});
// 4.为其指定操作失败回调函数
clipboard.on("error", function (e) {
console.error("Action:", e.action);
console.error("Trigger:", e.trigger);
that.$notify.error({
title: '失败',
message: '操作失败,请重试!',
showClose: false
});
});
demo 代码实现
结构不是很好,但重在实现
src\App.vue
<template>
<div id="app">
<HelloWorld />
<tableDataCopyDemo />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import tableDataCopyDemo from './components/tableDataCopyDemo.vue'
export default {
name: 'App',
components: {
HelloWorld,
tableDataCopyDemo
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src\components\HelloWorld.vue
<template>
<div class="hello">
<p>原样复制指定文本框内容</p>
<div class="row">
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<el-button
class="copyBtn"
data-clipboard-action="copy"
data-clipboard-target="#bar"
icon="el-icon-copy-document"
>Copy</el-button>
</div>
<p>点击复制自定义内容到剪切板</p>
<div class="row">
<el-button
class="copyBtn"
data-test="test..."
:data-clipboard-text="diyContent"
icon="el-icon-copy-document"
>Copy</el-button>
</div>
</div>
</template>
<script>
import Clipboard from "clipboard";
export default {
name: "HelloWorld",
data() {
return {
clipboard: null,
diyContent: '这是我自定义的拷贝内容!'
};
},
mounted() {
/*
// 写法 1
var that = this
var clipboard = new Clipboard(".btn");
clipboard.on("success", function (e) {
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
// 清除选中状态
e.clearSelection();
that.$notify({
title: '成功',
message: '恭喜您复制成功,赶快去粘贴吧~',
type: 'success',
showClose: false
});
});
clipboard.on("error", function (e) {
console.error("Action:", e.action);
console.error("Trigger:", e.trigger);
that.$notify.error({
title: '失败',
message: '不支持复制哦!',
showClose: false
});
});
*/
this.clipboard = new Clipboard(".copyBtn");
this.clipboard.on("success", this.successFunc)
this.clipboard.on("error", this.errorFunc)
},
methods: {
successFunc (e) {
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
// 可以取到目标元素上的自定义属性(可以据此再做一些处理)
e.trigger.dataset.test && console.log(e.trigger.dataset.test)
// 清除选中状态
e.clearSelection();
this.$notify({
title: '成功',
message: '恭喜您复制成功,赶快去粘贴吧~',
type: 'success',
showClose: false
});
},
errorFunc (e) {
console.error("Action:", e.action);
console.error("Trigger:", e.trigger);
this.$notify.error({
title: '失败',
message: '操作失败,请重试!',
showClose: false
});
}
},
beforeDestroy() {
// 释放内存
this.clipboardclipboard.off("error");
this.clipboardclipboard.off("success");
this.clipboardclipboard.destroy();
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
}
#bar{
margin-right: 15px;
}
.row{
display: flex;
justify-content: center;
}
</style>
src\components\tableDataCopyDemo.vue
<template>
<div style="margin-right: auto;margin-left: auto;width: 800px">
<p>复制表格数据,自定义组合</p>
<el-table :data="list">
<el-table-column label="云盘链接" prop="url"></el-table-column>
<el-table-column label="提取码" prop="code"></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: [
{'url': 'https://www.baidu.com/1', 'code': '1234'},
{'url': 'https://www.baidu.com/2', 'code': '7777'},
{'url': 'https://www.baidu.com/3', 'code': '9999'}
]
}
},
methods: {
copyLink (data) {
console.log(1)
let clipboard = new Clipboard('.tag', {
text: function () {
return `云盘链接:${data.url} 提取码:${data.code}`
}
})
clipboard.on('success', e => {
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
// this.$message({message: '复制成功', showClose: true, type: 'success'})
this.$notify({
title: '成功',
message: '恭喜您复制成功,赶快去粘贴吧~',
type: 'success',
showClose: false
});
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
console.error("Action:", e.action);
console.error("Trigger:", e.trigger);
// this.$message({message: '复制失败,', showClose: true, type: 'error'})
this.$notify.error({
title: '失败',
message: '操作失败,请重试!',
showClose: false
});
clipboard.destroy()
})
}
}
}
</script>
<style scoped>
</style>
demo 地址
(如果帮到你了,记得帮我点个 star,非常感谢~)
原生 JS API 了解
放个链接在这里,实在有需要再去了解
(监听下列事件,再结合 paste 中的案例,即可在复制时、剪切时、粘贴时给选中内容做处理)
亦可结合点击复制功能做个案例
(contenteditable="true"
html 标签属性,可以让元素变得像输入框一样可编辑,具体骚操作再看吧)
本文参考文档: