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