当前位置：首页 > news >正文

做网站要用框架吗苏州市网站

news 2026/4/10 5:03:29

做网站要用框架吗,苏州市网站,网站建设教程简笔画,南京做网站xjrkj现有一个按钮，如下图点击时再次点击刷新窗口再次点击刷新窗口依然可以实现点击频率控制。代码实现： <template><el…

现有一个按钮，如下图

在这里插入图片描述
点击时

在这里插入图片描述
再次点击

在这里插入图片描述
刷新窗口再次点击

在这里插入图片描述
刷新窗口依然可以实现点击频率控制。

代码实现：

<template><!--<el-config-provider :locale="locale"><router-view/></el-config-provider>--><el-button type="primary" @click="handleClick">click</el-button>
</template><script setup lang="ts">// @ts-ignoreimport zhCn from 'element-plus/dist/locale/zh-cn.mjs'import { reactive } from 'vue'import { ElMessage } from 'element-plus'// 国际化配置const locale = reactive(zhCn)const handleClick = () => {// 间隔为30sconst delay = 30000const key = 'ls_handle_click'let cache = getExpiredItem(key)if (cache <= 0) {setExpiredItem(key, Date.now(), delay)} else {const now = Date.now()const diff = delay / 1000 - (now - cache) / 1000ElMessage({showClose: true,message: `点击过于频繁,请${Math.floor(diff)}秒后尝试!`,type: 'warning',})return}// 执行按钮功能(处理业务逻辑)handleAlert()}// 封装可以设置过期时间的localStorageconst setExpiredItem = (key, value, expires) => {const data = {value: value,expires: Date.now() + expires}window.localStorage.setItem(key, JSON.stringify(data))}// 封装获取有过期时间的localStorage(我们规定如果key到期则返回-1，如果没有这个key就返回0)const getExpiredItem = (key) => {const value = window.localStorage.getItem(key)if (!value) {return 0}const data = JSON.parse(value)if (Date.now() > data.expires) {window.localStorage.removeItem(key)return -1}return data.value}// 按钮功能const handleAlert = () => {ElMessage({showClose: true,message: 'this is a success message.',type: 'success',})}
</script><style scoped lang="scss"></style>