一、element plus按钮点击后不会自动失去焦点,该如何解决?

  在按钮点击点击回调中增加以下代码:

  event.target.blur()

  if (event.target.nodeName === 'SPAN') {
    event.target.parentNode.blur()
  }
  模版中:

  JS中:

二、考虑到页面中存在多个按钮,为了解决代码复用用问题,需要定义全局函数并挂载到Vue实例中

  1、新建func.js文件,将上面的代码封装到函数中并导出

  2、main.js中挂载全局函数

  3、组件中使用全局函数

    a、setup方法中导入getCurrentInstance获取Vue实例的上下文

  b、通过vue实例上下文获取全局函数并调用

element plus按钮点击后不会自动失去焦点的解决方案及Vue3中如何挂载全局函数并在组件中使用的更多相关文章

  1. 【前台页面 BUG】回车按钮后,页面自动跳转

    点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...

  2. Dynamics 365 CE命令栏按钮点击后刷新表单页面方法

    微软动态CRM专家罗勇 ,回复326或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...

  3. BootStrap中按钮点击后被禁用按钮的最佳实现方法

    //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true) ...

  4. jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法

    本文实例讲述了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法.分享给大家供大家参考.具体实现方法如下: 这里主要通过val方法设置按钮的文字,并用attr方法修改disabled属性实 ...

  5. CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

    具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...

  6. vue swiper点击后返回不能自动播放

    解决方法: 在返回时重新开启轮播 组件中: <swiper :options="swiperOption" ref="mySwiper" :class=& ...

  7. javascript实现自动切换焦点功能学习

    当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入? 为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用 ...

  8. [WPF 自定义控件]让Form在加载后自动获得焦点

    1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录"对话框加载后"用户名"应该马上获得焦点,用 ...

  9. [WPF自定义控件库] 让Form在加载后自动获得焦点

    原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...

  10. 构建自己的PHP框架之自动加载类中详解spl_autoload_register()函数

    在了解这个函数之前先来看另一个函数:__autoload. 一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.c ...

随机推荐

  1. .NET在单台Windows2008下百万TCP连接测试

    测试客户端: 客户端程序建立TCP连接,发送一条几个字节的数据. 虚拟机8台,PC机8台,服务器1台. 设置MaxUserPort=60000,有一台机没有设置约在1.5万左右.最后因为差一点到100 ...

  2. iOS开发 网络学习(4)HTTPS

    一.HTTPS简介 HTTPS : Hyper Text Transfer Protocol over Secure Socket Layer,是以安全为目标的HTTP通道,简单讲是HTTP的安全版. ...

  3. web server 接口调用

    1. 生成客户端代码 2.调用接口 import javax.xml.ws.Service;public static NotificationServiceDevImplPortType mokaA ...

  4. 【2020NOI.AC省选模拟#2】A. 旋转

    题目链接 原题解: 把每个点的坐标视为复数,那么每次询问就是区间求平均数(先求和然后除以个数).一个点绕着原点旋转就是乘以$(\cos 60^\circ +i\sin 60^\circ)$. 一个点绕 ...

  5. iOS开发--APP性能检测方案汇总

    1 . CPU 占用率 CPU作为手机的中央处理器,可以说是手机最关键的组成部分,所有应用程序都需要它来调度运行,资源有限.所以当我们的APP因设计不当,使 CPU 持续以高负载运行,将会出现APP卡 ...

  6. ZSTUOJ刷题④:Problem B.--输出双层金字塔

    Problem B: 输出双层金字塔 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 7860  Solved: 5834 Description 输出双层 ...

  7. List的初始化方式

    在LinkedIn考试考到了,很遗憾没考过,特意记录一下,下次再战!文章不是我写的,看到别人的总结,发在我这里自己看看 在 Java 中几种初始化 List 的方法: 1. List<Strin ...

  8. 基于CMMI的软件工程第一章读书笔记

    基于CMMI的软件工程第一章读书笔记 软件作为产品,就如机械业以及一般的加工业一样,只有对产品的产生流程和角色分工及其相应的管理活动有一个成熟的模式,能"更快,更好,更便宜"地开发 ...

  9. Oracle学习-----基本SQL select语句

    一.基本select语句 SELECT 标识  选择那些列 FROM     标识从哪个表中选择 select * 标识 全部选择 select department_id, location_id ...

  10. vue-封装组件-结合vant实现点击按钮弹出泡泡(Popover)事件控制多个泡泡出现时,弹出对应的泡泡

    <template> <div class="sale-share-box"> <span class="sale-share-btn&qu ...