vue禁止粘贴/控制粘贴

最近项目遇到了一个关于控制用户粘贴的功能，简单研究了下，提出以下方案：

使用Jquery获取的DOM对象绑定paste方法

具体如下：

1.安装jquery

npm i jquery -S

修改项目中build/webpack.base.config.js

// 顶部引入webpack
const webpack = require('webpack');

...


module.exports = {
    ...
    // 添加plugin配置
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        ...
    }
}

在使用jquery的页面引入jquery

import $ from 'jquery'

2.在页面添加事件绑定

mounted(){
    $(document.body).bind({paste: this.onPaste})
}
methods: {
    onPaste(e){
        // 定义变量获取剪切板文字
        let data = null;
        // 定义变量获取剪切板信息
        let clipboardData = window.clipboardData; // IE
        if (!clipboardData) { //chrome
            clipboardData = e.originalEvent.clipboardData
        }
        // 获取剪切板内容
        data = clipboardData.getData('Text');
        // 打印剪切板文字
        console.log(data)
    }
}

补充说明：当绑定事件返回false时，无法粘贴

3.移除绑定

在组件的钩子函数中移除绑定

beforeDestroy() {
    $(document.body).unbind('paste')
},

 

 

以上就是我的基本设置了，之所以使用jquery，是因为在chrome中无法从window对象获取clipboardData，所以使用Jquery获取的Dom对象的originalEvent属性值获取clipboardData，以实现IE和chrome的兼容