vue 后台管理 之 常用工具库封装

devtools/2024/9/23 4:29:04/

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、消息提示
  • 二、 显示/隐藏 全屏loading
  • 三、弹出框
  • 四、 弹出输入框
  • 五、将query对象转成url参数
  • 六、 存储 token


前言

提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


需要先引入组件

import { ElNotification,ElMessageBox } from ‘element-plus’
import nprogress from ‘nprogress’

一、消息提示

javascript">export function toast(message,type = "success",dangerouslyUseHTMLString = true){ElNotification({message,type,dangerouslyUseHTMLString,duration:3000})
}

二、 显示/隐藏 全屏loading

  • 使用的是 nprogress 库
javascript">export function showFullLoading(){nprogress.start()
}
export function hideFullLoading(){nprogress.done()
}

三、弹出框

javascript">export function showModal(content = "提示内容",type = "warning",title = ""){return ElMessageBox.confirm(content,title,{confirmButtonText: '确认',cancelButtonText: '取消',type,})
}

四、 弹出输入框

javascript">export function showPrompt(tip,value = ""){return ElMessageBox.prompt(tip, '', {confirmButtonText: '确认',cancelButtonText: '取消',inputValue:value})
}

五、将query对象转成url参数

javascript">export function queryParams(query){let q = []for (const key in query) {if(query[key]){q.push(`${key}=${encodeURIComponent(query[key])}`)}}let r = q.join("&")r = r ? ("?"+r) : ""return r
}

六、 存储 token

  • 使用的是 vueuse 工具库, 需要提前引入
javascript">import { useCookies } from '@vueuse/integrations/useCookies'
const TokenKey = "admin-token"
const cookie = useCookies()// 获取token
export function getToken(){return cookie.get(TokenKey)
}// 设置token
export function setToken(token){return cookie.set(TokenKey,token)
}// 清除token
export function removeToken(){return cookie.remove(TokenKey)
}

http://www.ppmy.cn/devtools/95342.html

相关文章

【Markdown】Markdown 中的语言简称

目录 1. 编程语言2. 脚本语言3. 标记语言4. 样式语言5. 数据格式6. 查询语言7. 配置文件8. 其他9. 语言简称的汇总表格10. 结束语 以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例: 1. 编程语言 Bash / Shell 脚本 echo "He…

基于车联网大数据平台的用户驾驶习惯行为画像分析

近年来,新能源汽车行业的迅速发展推动了汽车智能化的趋势。新能源汽车上配备了成千上万的传感器,这些传感器采集了大量的行车数据被用于车辆运行状况的监控与分析。另一方面,采集到的大量行车数据,也能很好地体现用户的驾驶习惯。…

vulnstack-7(红日靶场七)

环境配置 vlunstack是红日安全团队出品的一个实战环境,具体介绍请访问:漏洞详情http://vulnstack.qiyuanxuetang.net/vuln/detail/9/ 添加两个网卡 DMZ区域: 给Ubuntu (Web 1) 配置了两个网卡,一个可以对外提供服务;…

深入理解linux 内存cache

linux中的内存是以page为单位进行管理的, Page Cache是Linux内核中的一种缓存机制,用于缓存文件系统中的数据和元数据。 当应用程序读取文件时,文件的内容会被缓存到Page Cache中,如果下次再次读取该文件,内核会直接从…

[图解]用例规约之扩展路径

1 00:00:01,710 --> 00:00:03,670 基本路径写完之后 2 00:00:04,690 --> 00:00:07,270 接下来就是扩展路径 3 00:00:08,620 --> 00:00:14,000 扩展路径就是系统要处理的意外和分支 4 00:00:14,010 --> 00:00:19,710 系统要处理的 5 00:00:20,970 --> 00:00:…

redis面试(十六)公平锁释放和排队加锁

锁释放 RedissonFairLock.unlockInnerAsync()方法 这和加锁的逻辑没有太大区别 也就是说在客户端A他释放锁的时候,也会走while true的脚本逻辑,看一下有序集合中的元素的timeout时间如果小于了当前时间,就认为他的那个排队就过期了&#xf…

Excel工具 -- vlookup函数使用

VLOOKUP 函数使用 要快速寻找、定位和指向 VLOOKUP 函数的引用源数据,以下是一些实用的步骤和技巧: 1. 使用 Excel 中的名称管理器 如果你给 VLOOKUP 函数中的数据表格区域(table_array)赋予了名称(如商品表&#x…

Scrapy框架进行数据采集详细实现

摘要 本项目是python课程的课程项目,在简要学习完python和爬虫相关的Scrapy框架后,基于这两者的运用最终完成了对于北京链家网站新房页面的信息进行爬取,并将爬取的数据存放于excel之中,可使用excel或者wps进行查看。 1 引言 1…