正文
阻止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
链接：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 呀,因为毕设时间很赶 ...
随机推荐- 关于【error C3646: 未知重写说明符】的若干种可能性
如果在程序中出现了error C3646,那么这个错误可能是由多种问题所导致的,这篇文章将对多种错误及对应解决方法进行分析. 在MSDN的官方网站中,Complier Error C3646的定义为u ...
- 招行ODC项目表彰
- 【UVA】11137-Ingenuous Cubrency
DP问题,须要打表. dp[i][j]代表利用大小不超过i的数字组成j的方法. 状态方程是 dp[i][j] = d[i - 1][j] + sum{dp[i - 1][j - k * i * i * ...
- cocos2d-x入门学习笔记——Hello world分析
Hello world分析 1. “resource”文件夹 用于存放图片.音频和配置等资源文件.为了方便管理,可以创建在其中创建子文件夹.Cocos2d-x为我们屏蔽了不同平台对于文件路径的定义. ...
- 2018牛客网暑期ACM多校训练营（第一场）E Removal（DP）
题意 给你一个大小为n的数组,你可以删掉数组中的任意m个数,问你在删除m个数之后剩下的数组有多少种.(其中数组的每个数的大小<=k) 分析 显然需要动态规划,而k又很小,所以二维dp没问题. 设 ...
- xshell 6评估已过期解决办法 / xftp 6 评估已过期解决办法
1.工具用途介绍 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.Xshell 通过互联网到远程主机的安全 ...
- CentOS6.8安装360 pika
1.安装依赖包 yum install snappy-devel bz2 libzip-dev libsnappy-dev libprotobuf-dev libevent-dev protobuf- ...
- 利用Google开源Java容器化工具Jib构建镜像
转载:https://blog.csdn.net/u012562943/article/details/80995373 一.前言 容器的出现让Java开发人员比以往任何时候都更接近“编写一次,到处运 ...
- C++ stringstream格式化输出输入探索
- 最近在笔试时经常遇见各种输入问题,于是细心总结一波: - 首先string str; cin>>str;遇到空格结束: - 于是乎产生了getline(),可与得到一行字符串:空格自动 ...
- Entity Framework 异常： 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。\r\n关键字 'AS' 附近有语法错误。
在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以下信息: 'OFFSET' 附近有语法错误.\r\n在 FETCH 语句中选项 NEXT 的用法无效.\r\n关键字 'AS' ...
最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个 ...
1,首先给input框添加方法,但是用的是element-ui的组件,对input进行了封装,不能直接用原生的方法!,在element组件中,input框中方法有实例参数$event,代表事件对象 ...
Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端“西瓜”同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的 ...
比如, mounted () { document.body.appendChild(this.$el); // insertAdjacentElement // insertBefore}, 这几行 ...
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
原来的代码如下: <view class="right"> <picker mode="date" value="{{mat ...
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于【error C3646: 未知重写说明符】的若干种可能性
如果在程序中出现了error C3646,那么这个错误可能是由多种问题所导致的,这篇文章将对多种错误及对应解决方法进行分析. 在MSDN的官方网站中,Complier Error C3646的定义为u ...
- 招行ODC项目表彰
- 【UVA】11137-Ingenuous Cubrency
DP问题,须要打表. dp[i][j]代表利用大小不超过i的数字组成j的方法. 状态方程是 dp[i][j] = d[i - 1][j] + sum{dp[i - 1][j - k * i * i * ...
- cocos2d-x入门学习笔记——Hello world分析
Hello world分析 1. “resource”文件夹 用于存放图片.音频和配置等资源文件.为了方便管理,可以创建在其中创建子文件夹.Cocos2d-x为我们屏蔽了不同平台对于文件路径的定义. ...
- 2018牛客网暑期ACM多校训练营（第一场）E Removal（DP）
题意 给你一个大小为n的数组,你可以删掉数组中的任意m个数,问你在删除m个数之后剩下的数组有多少种.(其中数组的每个数的大小<=k) 分析 显然需要动态规划,而k又很小,所以二维dp没问题. 设 ...
- xshell 6评估已过期解决办法 / xftp 6 评估已过期解决办法
1.工具用途介绍 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.Xshell 通过互联网到远程主机的安全 ...
- CentOS6.8安装360 pika
1.安装依赖包 yum install snappy-devel bz2 libzip-dev libsnappy-dev libprotobuf-dev libevent-dev protobuf- ...
- 利用Google开源Java容器化工具Jib构建镜像
转载:https://blog.csdn.net/u012562943/article/details/80995373 一.前言 容器的出现让Java开发人员比以往任何时候都更接近“编写一次,到处运 ...
- C++ stringstream格式化输出输入探索
- 最近在笔试时经常遇见各种输入问题,于是细心总结一波: - 首先string str; cin>>str;遇到空格结束: - 于是乎产生了getline(),可与得到一行字符串:空格自动 ...
- Entity Framework 异常： 'OFFSET' 附近有语法错误。\r\n在 FETCH 语句中选项 NEXT 的用法无效。\r\n关键字 'AS' 附近有语法错误。
在使用 EF 的时候,突然发现更新后在服务器中运行出错,异常信息主要包含以下信息: 'OFFSET' 附近有语法错误.\r\n在 FETCH 语句中选项 NEXT 的用法无效.\r\n关键字 'AS' ...
