element-ui 全局封装消息提示、Notification通知、确认提示框等等~

src中 新建mixBox文件夹

mixBox文件夹下建 index.js 和 message.js文件

1. index.js 内容

export { default as messageBox } from './message'

2.mixBox.js内容

export default{

     

    methods:{

       

      // 消息提示

      messageBox(message,type,userHTML,showClose,duration){

       

        const msgInfo = message

        const msgType = type || 'warning' //默认是warning(警告)    message(信息) success(成功) error(错误)

        const msgUserHTML = userHTML || false

        const msgShowClose = showClose || false

        const msgDuration = duration || 2000  //时间可以适当调整

        this.$message({

          message: msgInfo,

          type:msgType,

          dangerouslyUseHTMLString:msgUserHTML,

          showClose:msgShowClose,

          duration:msgDuration

        })

      },



      //Notification通知

      notifyBox(title,message,type,userHTML,showClose,duration){

       

        const msgInfo = message

        const titleInfo = title

        const msgType = type || 'warning' //默认是warning(警告)    message(信息) success(成功) error(错误)

        const msgUserHTML = userHTML || false

        const msgShowClose = showClose || false

        const msgDuration = duration || 2000  //时间可以适当调整

        this.$notify({

          message: msgInfo,

          title: titleInfo,

          type:msgType,

          dangerouslyUseHTMLString:msgUserHTML,

          showClose:msgShowClose,

          duration:msgDuration

        })

      },

     

      // 确认提示框

      confirmMessageBox(message,title, confirType, msgUserHTML){

       

        return new Promise((resolve,reject)=>{

       

          this.$confirm(message, title || '提示',{

       

            confirmButtonText:'确认',

            cancelButtonText:'取消',

            dangerouslyUseHTMLString:msgUserHTML || false,

            type:confirType || 'warning' //默认是warning 警告

          }).then(()=>{

       

            resolve()

          }).catch(()=>{

               

          })

        })

      },



      //当前时间

      getTiemdata(tieM){

          var boxDate = null

          if( tieM !== undefined){

              boxDate = tieM

          }else{

              boxDate = new Date();

          }

           let d = new Date(boxDate);

          let year = d.getFullYear()

          let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);

          let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();

          let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();

          let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();

          let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

          const datatiem =  year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + sec;

          // console.log('全局',datatiem)

          return datatiem

      },



      //导出

      exportExcelBox(id,fixed,fixed_right,name) {

        console.log(111)

        var wb = this.$XLSX.utils.table_to_book(document.querySelector(id),{raw:true});

        var fix = document.querySelector(fixed)

        var fixright = document.querySelector(fixed_right)

         if (fix) {

                wb = this.$XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix),{raw:true});

                document.querySelector(id).appendChild(fix);

        }

        if (fixright) {

                wb = this.$XLSX.utils.table_to_book(document.querySelector(id).removeChild(fixright),{raw:true});

                document.querySelector(id).appendChild(fixright);

        }

        var wbout = this.$XLSX.write(wb, {

            bookType: "xlsx",

            bookSST: true,

            type: "array"

        });

        try {

            this.$FileSaver.saveAs(

            new Blob([wbout], { type: "application/octet-stream" }),

            //设置导出文件名称

            name + ".xlsx"

            );

        } catch (e) {

            if (typeof console !== "undefined") console.log(e, wbout);

        }

     },



    }



  }

  //使用方法=>直接在使用的页面调用 例子如下

   // this.messageBox("警告",'warning')

  //  this.notifyBox("成功",'添加成功','success')

   // this.confirmMessageBox('您确认要删除吗','提示','error').then(()=>{

   //       console.log('删除成功')

   // }

   // this.getTiemdata() //不传值时默认获取当前时间

//  this.exportExcelBox( "#self-table", ".el-table__fixed", ".el-table__fixed-right", "导出的名字")

  //注意#self-table是 => table的id

3.在main.js中

//引入封装好的消息提示框、确认提示框和Notification通知等

import { messageBox } from "./mixBox/index"

Vue.mixin(messageBox)

//引入导出excel表格模板

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

4. 导出excel需要安装

npm install -S file-saver xlsx

npm install -D script-loader

//仅供参考,如有雷同,纯属虚构