首页 > 其他分享 >ElementPlus el-select自动获取焦点问题

ElementPlus el-select自动获取焦点问题

时间:2023-10-11 17:45:21浏览次数:33  
标签:el ElementPlus 焦点 focus dialog event select

原因:
以下el-select主要代码是在document页面上,而el-dialog在点击关闭按钮时,从而关闭el-dialog后,会自动使el-select组件获取到焦点。


    <el-popover
        :visible="data.tipVisible"
        ref="popover"
        placement="left-start"
        :title="title"
        :width="200"
        :content="tipContent"
    >
      <template #reference>
        <el-select
            ref="selectRef"
            @visible-change="onVisibleChange"
            v-model="data.queryParams.xxxNumber"
            filterable
            remote
            reserve-keyword
            :remote-method="handleRemoteMethod"
            :loading="data.queryLoading"
            @change="onChange"
            value-key="xxxNumber"

        >
          <el-option
              v-for="item in data.candidateList"
              :key="item.xxxNumber"
              :label="item.xxxNumber"
              :value="item"
          />
        </el-select>
      </template>
    </el-popover>

以上主要代码会在el-dialog上点击el-button,触发click事件并关闭el-dialog后,处于首界面的上述el-select会自动获取焦点。解决方法是:

const onFocus = (event)=>{
  console.log("debugFocus", event);
  if(event.relatedTarget !== null){
    selectRef.value.blur();
  }
}

给el-select绑定@focus事件(@focus="onFocus"),在focus事件里判断是什么元素触发的焦点,从而控制失去焦点。

标签:el,ElementPlus,焦点,focus,dialog,event,select
From: https://www.cnblogs.com/XingXiaoMeng/p/17757784.html

相关文章

  • vue框架,input相同标签如何定位-label定位
    一、问题提出:后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:二、问题思考过程1.为什么以前的版本可以定位成功,而现在的就定位不了啦查阅之前版本的这部分定位代码,发现原来的框架是......
  • celery定时任务与周期任务
    celery定时任务与周期任务创建celery定时任务的方法与方式创建celery的定时任务有很多,我们这里只提到笔者使用过的首先你需要创建两个文件。第一个文件为celery配置一些东西。importos,djangoos.environ.setdefault("DJANGO_SETTINGS_MODULE","settings")django.setup(......
  • Python selenium chrome版本查询和对应驱动下载
    elenium爬虫需要安装Chrome驱动chrome版本查询和对应驱动下载,超详细方法/步骤1查看谷歌的版本,第一步在地址栏输入图中网址第二步查看版本号2复制版本号,只需复制版本号最后一位小数点之前的数字。(例:版本号:111.0.5563.65,复制111.0.5563即可)将复制的版本号......
  • Hello, Solitude.
    考虑任意时刻区间均为奇数的情况观察到一个区间被取到的概率与区间外的具体状态无关,只与区间外取了多少次有关,因此考虑计算一个区间被选中后的出现次数,设\(dp_{[l,r],t}\)表示区间\([l,r]\)在剩余\(t\)次入座时被选中的最终所有状态的出现次数之和,贡献加入中点\(ans_{mid}......
  • skywalking elasticsearch 版本匹配问题
     进入skywalking历史下载页面:https://archive.apache.org/dist/skywalking/8.6.0/  开始正常一整个流程应该有skywalking-oap-server、skywalking-oap-ui、es、skywalking-agent.jar;中间最大的问题是版本,然后是配置;个人建议直接用官方给的文档里面的docker镜像作为部署......
  • 在el-table的表格中嵌入el-switch
    <el-table:data="tableData"borderstyle="width:100%"class="table"> <el-table-columnlabel="是否可用"><template#default="scope"><el-switchv-model="scope.r......
  • K8s部署轻量级日志收集系统EFK(elasticsear + filebeat + kibana)
    目录K8s部署EFK(elasticsearch+filebeat+kibana)日志收集一.准备镜像二.搭建Elasticsearch+kibana1.在可执行kubectl命令的服务器准备安装的yml文件2.在elasticsearch-kibana目录下创建配置文件elasticsearch.yml3.创建kibana配置文件kibana.yml4.在k8s中创建elasticsearch和k......
  • 【读论文】CM-Gen: A Neural Framework for Chinese Metaphor Generation with Explic
    为了更好的阅读体验,请点击这里由于发不出论文,所以找点冷门方向做一做。从汉语比喻开始。读完这篇论文之后我觉得COLING这方向我上我也行(ε=ε=ε=┏(゜ロ゜;)┛题目:CM-Gen:ANeuralFrameworkforChineseMetaphorGenerationwithExplicitContextModelling论文链接代......
  • ERROR in node_modules/rxjs/dist/types/internal/operators/combineLatest.d.ts(3,61
    原文链接:https://www.longkui.site/error/error-in-node_modules-rxjs/4839/angular项目,启动的时候报错。详细的报错如下:这个报错的原因比较简单,rxjs的版本不对,我用的是angular7可能和rxjs版本不匹配。解法方法也很简单,主要是降版本,我们找到项目的package.json把rxjs版本改成......
  • el-dialog 关闭再展示不触发mounted
    el-dialog关闭再展示时不会触发mounted钩子函数,这是因为在Vue中,组件的mounted钩子函数只会在组件第一次被渲染时执行一次。而对于el-dialog组件来说,关闭后重新打开并不算是组件第一次被渲染。......