element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出this.$alert，弹出的提示框关闭后马上又弹出

忘是亡心i 2024-03-25 10:37 27阅读 0赞

## 问题：element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出提示框，弹出的提示框关闭后马上又弹出 ##

##### 原因：el-time-select添加聚焦事件弹出提示框，关闭提示框，但el-time-select下input输入框一值处于聚焦状态，因此提示框在关闭后会继续弹出，陷入死循环，因此在关闭提示框后需要让el-time-select的input失去焦点 #####

#### 解决办法： ####

<el-time-select
            ref="selectRef"
            v-model="timeValue"
            @focus="timeChange"
            :picker-options="{
            start: start,
            step: '00:30',
            end: '19:30'
            }"
            placeholder="选择时间">
    </el-time-select>

##### 给el-time-select添加`ref="selectRef"`，然后在`timeChange()`事件里让`el-time-select`的`input`失去焦点 #####

timeChange() {
          if (this.dateValue == '') {
            this.$alert('请先选择日期', '提示')
            this.$refs.selectRef.blur()
          }
        }

##### 注意: `this.$refs.selectRef.blur()`这样写是无效的 #####

timeChange() {
          this.$alert('这是一段内容', '标题名称', {
              confirmButtonText: '确定',
              callback: action => {
                this.$refs.selectRef.blur()
              }
            });
          }

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出this.$alert，弹出的提示框关闭后马上又弹出

问题：element el-time-select 搭配 MessageBox使用，给 el-time-select 添加 @focus事件弹出提示框，弹出的提示框关闭后马上

忘是亡心i/ 2024年03月25日 10:37/ 0 赞/ 28 阅读

相关恢复java提示弹出框

运行java程序，点了这个，导致java程序启动无反应 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

Love The Way You Lie/ 2022年10月19日 04:12/ 0 赞/ 188 阅读

相关 js弹出框、对话框、提示框、弹窗总结

1、JS的三种最常见的对话框 \[javascript\] [view plain][] [copy][view plain] 1. //===========

淡淡的烟草味﹌/ 2022年09月29日 00:25/ 0 赞/ 249 阅读

相关 js弹出框、对话框、提示框、弹窗总结

[js弹出框、对话框、提示框、弹窗总结][js] 一、JS的三种最常见的对话框 \[javascript\] [view plain][] [copy

落日映苍穹つ/ 2022年09月18日 13:55/ 0 赞/ 253 阅读

相关 js弹出框、对话框、提示框、弹窗总结

一、JS的三种最常见的对话框 \[javascript\] [view plain][] [copy][view plain] 1. //===============

分手后的思念是犯贱/ 2022年06月14日 02:25/ 0 赞/ 391 阅读

相关多个弹出框，弹出不同内容

1、被点击的地方用同样的class='test' 2、 $(".test").each(function(i,v){ var nodei = i;

比眉伴天荒/ 2022年05月14日 14:04/ 0 赞/ 277 阅读

相关 layui 关闭弹出框

作者：TROY\_Musou 原文：[https://blog.csdn.net/troy\_musou/article/details/73499459][https_b

快来打我*/ 2022年04月03日 13:40/ 0 赞/ 396 阅读

相关 css + js 弹出提示框

css ： /弹出框/ .alert { display: none; position: fixed; to

末蓝、/ 2022年03月06日 15:48/ 0 赞/ 452 阅读

相关 uni-app 弹出提示框

[uni.showModal(OBJECT)][uni.showModal_OBJECT] 显示模态弹窗，类似于标准 html 的消息框：alert、confirm。

青旅半醒/ 2021年11月17日 08:44/ 0 赞/ 556 阅读

相关 JavaScript弹出框、对话框、提示框、弹窗总结

JavaScript弹出框、对话框、提示框、弹窗总结。 1、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框

快来打我*/ 2021年09月20日 10:24/ 0 赞/ 543 阅读