禁止复制粘贴(electron、vue)
前端复制粘贴
·
项目中遇到非会员禁止复制粘贴,会员可以一键复制的需求
一、electron中提供了clipboard模块,用于在系统剪切板上执行复制粘贴操作
参照官方文档
clipboard.readText([type])----type(String[optional])--optional可以是'selection'或者'clipboard', 默认为'clipboard'.'selection'仅在Linux中可用。 返回String--剪贴板中的纯文本内容。
如:
const {clipboard} = require('electron')
clipboard.writeText('hello,I'm Lily')
const text = clipboard.readText()
console.log(text) //hello,I'm Lily
clipboard.writeText(text[,type])---text:String---type:String(optional)可以是'selection'或者'clipboard',默认为'clipboard'.'selection'仅在Linux中可用。
将text作为纯文本写入剪贴板。
例子同上:👆(clipboard.readText())
clipboard模块按照文档大概是这样(虽然我没在项目中用过)
二、vue中提供了VueClipboard用于复制粘贴
1.main.js中引入
import VueClipboard from 'vue-clipboard2'
2.添加到全局
Vue.use(VueClipboard)
3.使用
<span
v-clipboard:success="onCopy"
v-clipboard:error="onError"
v-clipboard:copy="复制内容"
>全部复制</span>
<!--onCopy,onError:方法(复制成功、失败提示或者后续操作)-->
三、键盘鼠标默认事件阻止
mounted(){
this.listenKeydown() //监听键盘事件
}
methods:{
listenKeydown(){
document.onkeydown = this.setKeycode //键盘按下时
document.onkeyup = this.clearKeycode //键盘抬起时
},
setKeycode(e){
//可将e打印出来看看,e.ctrlKey和e.keyCode
if (e.ctrlKey && e.keyCode === 67) {
e.returnValue = false; //设置为false就相当于阻止了默认事件
//window.getSelection() 选中的内容
// window.getSelection().toString().length 选中内容的长度
},
clearKeycode(e){
//好像没用,看自己要不要清除一下吧
}
}
时间有点久,有些模糊了,可能会有不对的地方,大佬看见了麻烦提醒一下欸
更多推荐
已为社区贡献1条内容
所有评论(0)