一、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. windows U盘启动装机工具(Ventoy)

    Windows优盘启动装机工具 一.WePE 纯净 WePE 启动盘/ U盘重装系统工具 1.U盘重装系统工具下载地址:https://www.wepe.com.cn/download.html?td ...

  2. Centos7.5下安装nginx

    #cd /usr/local #wget http://nginx.org/download/nginx-1.8.0.tar.gz #tar -xzvf nginx-1.8.0.tar.gz #cd ...

  3. 通过Jsoup,爬取车辆品牌,车系,LOGO等

    @Test public void test4() throws IOException { for (int i = 65; i <= 90; i++) { String value = St ...

  4. 天龙八部<三联版>四 终

    叶二娘与虚竹相认,但黑衣僧却一语道破天机,原来虚竹乃是叶二娘与少林一位高僧的私生子,而黑衣僧,便是三十年前雁门关外的男主演萧远山,虚竹是萧远山所盗,而原因是因为虚竹的父亲乃是当年的带头大哥.迫于压力玄 ...

  5. 20211306 实验四 Python综合实践

    学号 20211306 <Python程序设计>实验四报告 课程:<Python程序设计> 班级: 2113 姓名: 丁文博 学号:20211306 实验教师:王志强 实验日期 ...

  6. echo 操作

    echo打印制表符到文件: MAP_PATH=/path/for i in `cat sp.list`; do echo -e "${MAP_PATH}/${i}.${i}/${i}.fin ...

  7. Ubuntu ROOT默认密码设置

    Ubuntu默认密码设置 Ubuntu默认是不设置ROOT密码的,如果需要安装一些包则需要从普通用户调转至ROOT用户,这个时候就需要设置一下密码了. 下面这种情况 chen@chen:~/Deskt ...

  8. Django基础篇 01- 初识Django

    一.Django介绍 flask,FastApi是轻量级服务端开发框架 Django是重量级服务端开发框架 ORM:封装了数据库操作 form:校验请求数据 安装Django: pip install ...

  9. FastReport报表金额数字转大写问题

    在使用FastReport报表打印的时候涉及到财务结算金额时,会用到大写,系统保存的都为数字,将数字转换为大写没有默认的系统内置函数,经过查阅资料,可通过对FastReport的页面设计代码修改实现: ...

  10. Pytest+allure+requests接口自动化

    实现功能 测试数据隔离: 测试前后进行数据库备份/还原 接口直接的数据依赖: 需要B接口使用A接口响应中的某个字段作为参数 对接数据库: 讲数据库的查询结果可直接用于断言操作 动态多断言: 可(多个) ...