首页 > 其他分享 >el-button 鼠标移开后不自动失去焦点问题

el-button 鼠标移开后不自动失去焦点问题

时间:2023-05-26 09:22:20浏览次数:46  
标签:el 鼠标 default button disabled String Boolean evt target

在按钮点击后强制按钮失去焦点

1.在按钮点击的方法后加上失去焦点的方法

<el-button  @click="showDetail(scope.row, $event)">详情</el-button>
showDetail (rowData, event) {
      if (event.target.nodeName === 'SPAN') {
        event.target.parentNode.blur()
      } else {
        event.target.blur()
      }
      this.openDialog(rowData)
    }

2.重写el-button 在内部调用失去焦点的方法

<template>
  <button class="el-button" @click="handleClick" :disabled="buttonDisabled || loading" :autofocus="autofocus"
    :type="nativeType" :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]">
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
export default {
  name: 'ElButtonCustom',

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },

  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: String,
    icon: {
      type: String,
      default: ''
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean
  },

  computed: {
    _elFormItemSize () {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize () {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled () {
      return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
    }
  },

  methods: {
    handleClick (evt) {
      this.clickHandler(evt);
      this.$emit('click', evt);
    },
    clickHandler (evt) { // 按钮点击事件的回调函数
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
    }
  }
};
</script>

 

标签:el,鼠标,default,button,disabled,String,Boolean,evt,target
From: https://www.cnblogs.com/wjian0916/p/17433798.html

相关文章

  • 1万多条健康饮食厨房宝典ACCESS\EXCEL数据库
    关于菜谱类的数据这个博客里已经发现过几次,但是关于数据量多一点的饮食方面的数据似乎没有见过,即使有也是千把条数据,而今天采集的就是一个关于饮食方面网站的大量数据。分类是根据模块来区分的所以类别不是很多,详细情况是:厨房宝典(969)、美食笑话(175)、新鲜食报(5770)、饮食文化(980)、......
  • iOS MachineLearning 系列(18)—— PoseNet,DeeplabV3与FCRN-DepthPrediction模型
    iOSMachineLearning系列(18)——PoseNet,DeeplabV3与FCRN-DepthPrediction模型本篇文章将再介绍三个官方的CoreML模型:PoseNet,DeeplabV3和FCRN-DepthPrediction。PoseNet是人体姿势分析模型,可以识别图片中的人体部分,然后以17个基准点来描述人体的姿势。关于人体姿势的识别,其实Vision......
  • Excel表格和Unity
    Excel表格和Unity1.配置下载EPPlus.dll链接:https://pan.baidu.com/s/1l0FYTf8nATrPdEt6fXJ6Kg?pwd=1111提取码:1111将dll文件拖拽到Assets/PluginsAssets下新建文件夹Editor,右键Editor点击ShowinExplorer,新建Excel表格文件(后缀.xlsx),表格文件放在Assete/Editor中。2.读取表......
  • EL表达式
    概念它提供了在JSP中简化表达式的方法,让Jsp的代码更加简单作用替换<%=...%>语法${表达式}获取域中的数据${pageScope|requestScope|sessionScope|applicationScope.属性名}获取复杂的数据1.获取域中的数组中的值${数组属性名[index]}2.获取域中list中的值${list属性......
  • RHEL8使用iSCSI部署网络存储-Linux就这么学17
        本章首先介绍计算机硬件存储设备的不同接口的优缺点,并由此切入iSCSI技术主题的讲解。iSCSI技术实现了物理硬盘设备与TCP/IP网络协议的相互结合,使得用户能够通过互联网方便地访问远程机房提供的共享存储资源。我们将学习在Linux系统上部署iSCSI服务端程序,并分别......
  • elementUI使用之table表格如何给行元素添加点击事件
    官方文档提供的event事件在代码中绑定事件在methods中写方法好了,这样就可以实现了。......
  • shell中设置文字输出的颜色及字体格式
    转载:(15条消息)shell中设置文字输出的颜色及字体格式_linux文字顏色_庚庚911的博客-CSDN博客ANSI控制码简介ANSI控制码用于在字符显示系统中控制光标移动和字符色彩等,常用于BBS系统中。ANSIESCAPESEQUENCES又称为VT100系列控制码,国内译为ANSI控制码。顾名思义,需要VT100系......
  • 通过nc获取靶机的反弹Shell [靶机实战]
    1、环境Kali:172.30.1.3/24靶机(Funbox9):172.30.1.129/242、信息收集通过nmap扫描此主机,我们需要获取到开放的端口以及服务的Banner1nmap-sV-T5-A172.30.1.129 通过扫描我们发现,目标主机开放着21端口,服务Banner是vsftpd2.3.4,并且允许匿名登录我们尝试ftp匿名连......
  • 批量服务器更新DNS的powershell脚本
    在之前的博文https://blog.51cto.com/magic3/2514240中写过一个类似的脚本,但脚本并不完美。近期又有类似的需求,懒得改了,直接写个新的。针对hyper-v的多网卡,虚拟网卡,同样有效。$nic_array=@{}$nic_info=Get-NetAdapter$nic_name=$nic_info.nameforeach($nicin$nic......
  • 一个ELF文件中的段
    使用readelf-Selfname.o可以读取一个ELF文件的段信息。 Elf32_Shdr段描述符结构 含义: ......