vue3+element plus搭建后台管理系统

项目地址:https://gitee.com/mangoxin1/mango-fd
演示地址: https://mangoxin1.gitee.io/mango-fd

采用vue3和vite2和element plus搭建后台管理系统

内部封装多个组件 支持页面关闭 支持iframe内嵌跳转 新窗口打开 全屏打开当前组件

封装组件 表格crud






封装分页器





封装弹出框

import { ElMessage } from 'element-plus'
import util from './util'
const action = {
    /**
  * 操作警告提示
  */
    warning: function (message, showClose=true) {
        ElMessage({
            message: message,
            showClose: showClose,
            type: 'warning',
        })
    },
    /**
 * 操作成功提示
 */
    success: function (message, showClose=true) {
        ElMessage({
            message: message,
            showClose: showClose,
            type: 'success',
        })
    },
    error: function (message, showClose=true) {
        ElMessage({
            message: message,
            showClose: showClose,
            type: 'error',
        })
    },
    grouping: function (message, type,showClose=true) {
        ElMessage({
            message: message,
            grouping: true,
            showClose: showClose,
            type: type,
        })
    },
    /**
 * 下载
 */
    download: function (data, fileName, responseType = 'application/octet-stream') {
        const blob = data instanceof Blob ? data : new Blob([data], { type: responseType })
        if ('download' in document.createElement('a')) { // 非IE下载
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
        } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
        }
    },

    /**
   * 导出文件
   */
    exportFile: function (data, fileName, responseType = 'application/octet-stream') {
        this.download(data, fileName, responseType)
    }
}
export default action

你可能感兴趣的:(vue,前端,element,vue.js)