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

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

---

前言

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

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

---

需要先引入组件

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

一、消息提示

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

二、 显示/隐藏 全屏loading

• 使用的是 nprogress 库

export function showFullLoading(){nprogress.start()
}
export function hideFullLoading(){nprogress.done()
}

三、弹出框

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

四、 弹出输入框

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

五、将query对象转成url参数

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 工具库， 需要提前引入

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)
}