首页 > 其他分享 >Element Message相同文案重复提示处理

Element Message相同文案重复提示处理

时间:2023-12-14 11:46:56浏览次数:23  
标签:Element 计时器 lastMessageText messageTimer Message null options 文案

import { Message } from 'element-ui'
let lastMessageText = null let messageTimer = null
export default function showMessage(options) {   // 如果新的消息与上一条消息相同,并且计时器还在运行,那么不显示新的消息   if (options.message === lastMessageText && messageTimer) {     return   }
  // 清除旧的计时器   if (messageTimer) {     clearTimeout(messageTimer)     messageTimer = null   }
  // 显示新的消息   Message(options)
  // 更新最后一条消息并设置计时器   lastMessageText = options.message   messageTimer = setTimeout(() => {     lastMessageText = null   }, options.duration || 5000) }

标签:Element,计时器,lastMessageText,messageTimer,Message,null,options,文案
From: https://www.cnblogs.com/zerofan/p/17900870.html

相关文章

  • Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
    1、需求使用Vue+ElementUI实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。2、实现1)列表页index.vue<el-table><!--其他列--><el-table-columnlabel="操作"width="150"><templateslot-scope=......
  • 使用element 2.14 实现表格虚拟滚动组件
    下述代码为组件实现代码复制即可食用,默认只展示一屏数据加两条全选存在些许问题,使用row-key时,如果行过多滚动时会不会很流畅特别需要注意的是行高必须要保持一致<template><divclass="t-table":id="TTableId"><el-tableref="el-table":tooltip-......
  • springboot+VUE——mybatis分页和Element Plus的分页组件实践
    分页只有基础的分页功能,跳转和动态选择每页展示多少条数据的功能可以参考ElementPlus的分页组件自行配置并且传入相应的方法即可!<scriptlang="ts"setup>/***分页变量数据*/constpagination=ref({ current_page:1, // 当前页码,此处默认为第一页 total_data:0......
  • vue+elementUi中国省市区/省市,三级/两级联动选择
    安装城市数据npminstallelement-china-area-data-S导入数据import{regionData,codeToText}from'element-china-area-data' 1.显示全部城市HTML代码:<template#equipmentdistrict-form=""><el-cascaderplaceholder="请选择......
  • iframe父子页面通信相互调用传递参数多个postMessage
    效果如何运行父页面代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • flutter iOS 使用BasicMessageChannel 通信
    flutter代码//main.dartimport'package:flutter/material.dart';import'package:flutter/services.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({Key?key}):super(key:key);@o......
  • element-ui表单校验|标红提示
    elementUI表单校验1.表单上加rules{object}(常用)增加普通校验规则<el-form:model="form":rules="rules"ref="form"><el-form-itemlabel="姓名:":label-width="formLabelWidth"prop="uname"><el-in......
  • 程序处理中 Exceptions 和 Messages 的区别和各自的使用场合
    在计算机软件工程中,异常处理(exceptions)和消息传递(messages)是两种常见的处理错误情况的方式。它们各自有着不同的特点和适用场合,下面将对它们进行详细介绍,并通过实例来说明它们的应用。异常处理(exceptions):异常处理是一种在程序执行过程中,出现错误时跳出正常流程,进入专门的错误处理流......
  • elementplus的日期时间限制只能选择当前时间以后的(限制到时分秒)
    conststate=reactive({value:'',lastDate:'2023-10-2712:20:30'})//限制日期constdisabledDateFn=(date)=>{if(date.getTime()<newDate(state.lastDate).getTime()-8.64e7){returntrue;}returnfalse;};//限制小时constdis......
  • Vue + Element 实现按钮指定间隔时间点击
    1、业务需求需要加一个按钮,调用第三方API,按钮十分钟之内只能点击一次,刷新页面也只能点击一次2、思路加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮3、实现1)vue页面<template><el-row:gutter="15"><el-col:span="4"><el-buttontype="danger"......