项目中遇到非会员禁止复制粘贴,会员可以一键复制的需求

一、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){
        //好像没用,看自己要不要清除一下吧
    }
}

时间有点久,有些模糊了,可能会有不对的地方,大佬看见了麻烦提醒一下欸 

 

Logo

前往低代码交流专区

更多推荐