vue实现内容过长不需要粘贴

小蒜瓣

于 2022-03-24 14:42:31 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/messicr7/article/details/123710547

本文介绍如何通过监听el-input的paste事件并设置字符长度限制，防止超过1MB的数据导致页面卡死，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-input在粘贴数据长度很大时会使页面卡死，但百度csdn就做了控制，只能粘贴字数允许内的文字。

解决方案：

paste事件监听做操作，具体如下：

<el-input type="textarea" :rows="5" v-model="form.uploadText" @paste.native.capture.prevent="pasing" placeholder="数据不可超过1MB" maxlength="1000000" show-word-limit id="uploadText">
</el-input>

native：不加会认为paste是自定义事件，不会被识别
capture：表示在捕获阶段执行,默认为冒泡执行
prevent：阻止默认行为

 methods: {
        pasing(e) {
            let data = e.clipboardData.getData('Text')
            if (data.length > 1048570) {
                this.$message.warning("数据过长")
                return false;
            } else {
                this.form.uploadText = data // 自主赋值模拟粘贴
            }
        }
}