阻止element组件中的<el-input/>的粘贴功能
需求: 阻止element组件中的<el-input/>的粘贴功能
实现思路: <el-input/>组件是由外层<div>和内层的<input>组成的, 根据浏览器的事件传递机制(先捕获,后冒泡): 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可
代码实现:
<template>
<section class="p-10">
<div class="app">
<el-input v-model="val" placeholder="请输入内容" @paste.native.capture.prevent="handlePaste"/>
</div>
</section>
</template>
<script>
export default {
data() {
return {
val: ''
};
}
};
</script>
事件修饰符说明:
- native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了
- capture: 表明这个方法在捕获阶段执行,默认为冒泡执行,参考addEventListener方法中的useCapture参数
- prevent: 相当于event.preventDefault阻止默认行为, 同时也会阻止事件的向下传递和向上冒泡
链接:https://www.jianshu.com/p/4d9d83fed298
阻止element组件中的<el-input/>的粘贴功能的更多相关文章
- 关于element组件中分页的一些个人思路
最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个 ...
- vue+vuex项目中怎么实现input模糊查询
1,首先给input框添加方法,但是用的是element-ui的组件,对input进行了封装,不能直接用原生的方法!,在element组件中,input框中方法有实例参数$event,代表事件对象 ...
- Element Tabs 组件中使用 ve-histogram组件渲染不出来(已解决)
Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...
- Vue 组件中 移动 this.$el 的注意事项
比如, mounted () { document.body.appendChild(this.$el); // insertAdjacentElement // insertBefore}, 这几行 ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期
原来的代码如下: <view class="right"> <picker mode="date" value="{{mat ...
- 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
随机推荐
- Docker 使用docker-compose部署项目
原文地址:https://github.com/eacdy/spring-cloud-book/blob/master/3%20%E4%BD%BF%E7%94%A8Docker%E6%9E%84%E5 ...
- Codeforces 476C Dreamoon and Sums (水
题目链接:点击打开链接 题意: 给定a,b 对于一个数x.若x是nice number,则满足(x/b)/(x%b) == [1,a](即结果在1-a之间) 问: 输出一个数表示 全部nice num ...
- MongoDB安装、CURD增改查删操作、应用场景
NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".非关系型的数据存储 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 ...
- Atitit..状态机与词法分析 通用分词器 分词引擎的设计与实现 attilax总结
Atitit..状态机与词法分析 通用分词器 分词引擎的设计与实现 attilax总结 1. 状态机 理论参考1 2. 词法分析理论1 3. 词法分析实例2 4. ---code fsm 状态机通用 ...
- AJAX动态加载评论
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分分钟学会一门语言之Python篇
转自:http://www.code123.cc/1049.html Python 是 90 年代初由 Guido Van Rossum 创立的.它是当前最流行的程序语言之一.它那纯净的语法令我一见倾 ...
- vue 声明响应式属性
声明响应式属性 由于vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值: var vm = new Vue({ data: { // 声明 message ...
- SVN各种错误提示产生原因及处理方法大全(转)
SVN各种错误提示产生原因及处理方法大全 1. svn: Server sent unexpected return value (500 Internal Server Error) in resp ...
- hdu5673 Robot 卡特兰数+组合数学+线性筛逆元
Robot Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- vSphere共享存储全配置流程
1.Openfiler的安装 Openfiler 由rPath Linux驱动,它是一个基于浏览器的免费网络存储管理实用程序,可以在单一框架中提供基于文件的网络连接存储 (NAS) 和基于块的存储区域 ...