element ui 自动关闭弹框

1.弹框

this.$alert('企业解散成功,您即将退出系统!<br/>', '', {
    showClose:false,
    showCancelButton:false,
    showConfirmButton:false,
    closeOnPressEscape:false,
    closeOnHashChange:false,
    center:true,
    type:'warning',
    dangerouslyUseHTMLString: true
});

2.利用javascript删除弹框

this.autoTimer = setInterval(()=>{
    if(time === 1){
        clearInterval(this.autoTimer);
        removeSessionStore(SESSION_ID);
        let messageBox = document.getElementsByClassName("el-message-box__wrapper");
        let model = document.getElementsByClassName("v-modal");
        if(messageBox){
            messageBox[0].parentNode.removeChild(messageBox[0]);
            model[0].parentNode.removeChild(model[0]);
        }
        this.$router.push({ name: "login" });
    }
    time--;
},1000);
### 关闭 `el-date-picker` 的方法 对于 `element-ui` 中的 `el-date-picker` 组件,关闭可以通过多种方式实现。一种常见的方式是在特定事件触发后通过编程手段控制其显示状态。 当绑定 `v-model` 到一个变量时,该变量不仅决定了选中的日期值还影响着窗的状态。因此,在某些情况下改变这个模型绑定的数据可以间接达到关闭的效果[^1]。 另一种方法涉及直接操作组件实例属性来隐藏日历面板。这通常用于更复杂的场景,比如外部按钮点击或其他交互逻辑导致的日历收起需求。具体来说就是调用组件暴露出来的 API 或者修改内部 `_visible` 属性(注意这种方式可能依赖于架的具体版本,并不是官方推荐的做法)[^2]。 此外,如果希望在用户完成选择之后自动关闭,则无需额外处理,默认行为即为选定有效日期项后会自行消失;而对于未做任何更改就想要取消的情况,可以在模板中监听 blur 事件并设置相应的回调函数去清空当前激活的选择器[^3]。 ```html <template> <!-- 使用 @blur 来捕获失去焦点事件 --> <el-date-picker ref="datePicker" v-model="selectedDate" type="date" placeholder="选择日期" @blur="handleBlur"> </el-date-picker> <!-- 提供一个按钮用来模拟其他条件下的关闭动作 --> <button @click="closeDatePicker">关闭</button> </template> <script> export default { data() { return { selectedDate: '' }; }, methods: { handleBlur(event) { // 当输入失焦时尝试关闭 date picker this.$refs.datePicker.blur(); }, closeDatePicker(){ // 手动关闭 date picker 的例子 this.$refs.datePicker.handleClose(); } } }; </script> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值