Vue中eventBus的实现，以及开发基础常用方法记录

~~~~~~~~~~~~~~~~~~~~~~~BUS实现步骤~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. 首先在项目目录中创建bus.js，

2.并且引入vue

import Vue from 'vue';
const bus = new Vue();
export default bus;

3.在发起通讯组件跟接收通讯组件中引入bus.js

import bus from '@/utils/bus.js'

4.首先在发起通讯的组件中去注册事件并且发射出去 根据需要去判断是否传参。

//  需要传参的情况下
bus.$emit('name',obj)
//  无需传参的情况
bus.$emit('name')

5.在接收的组件中去接受事件

bus.$on('name',data=>{
    //执行对应接收组件传参的方法
})

以上为兄弟组件之间的通信bus

不过在注册bus事件的时候尽量名称保持不一致不然他会执行多个相同名字的方法，根据你注册发射事件的事件去先后执行，一般正常情况下用的不会特别多，大部分都是父子组件通信

~~~~~~~~~~~~~~~~~~~~~~~常用事件~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// eltable表頭加星號
export function renderHeader(h, { column }) {
  return [
    h('span', {
      style: 'color:#ff4949;margin-right:4px',
    },'*'),
    h('span', column.label),
  ];
}

// 文件地址拼接前綴
export function spliceFileUrl(filePath) {
if( filePath.indexOf("http"||"https")!=-1){
  return filePath;
}
  return this.global.fileUrl + filePath;
}

// 根據value獲取label
export function  getArrayLabelByValue(enumArr,selValue,label,value) {
    let config = {
        label: label || 'label',
        value: value || 'value',
    };
  var str = "";
  if(enumArr!=undefined&&enumArr!=null&&enumArr.length>0){
  enumArr.map((item) => {
    if (item[config.value] == selValue) {
      str = item[config.label];
    }
    });
  }
  return str;
}

// 根據value獲取item
export function  getArrayItemByValue(enumArr,selValue,value) {
    let config = {
        value: value || 'value',
    };
  var itemSel = {};
  if(enumArr!=undefined&&enumArr!=null&&enumArr.length>0){
  enumArr.map((item) => {
    if (item[config.value] == selValue) {
      itemSel = item;
    }
    });
  }
  return itemSel;
}

// 獲取對象數組某個字段的數組
export function getKeyArr(objArr,key) {
    let config = {
        key: key || 'id',
    };
  var arr = [];
  if(objArr!=undefined&&objArr!=null&&objArr.length>0){
    objArr.map((item) => {
      arr.push(item[config.key])
    });
  }
  return arr;
}

// Y,N轉為是否
export function formatYN(str) {
  var newStr = "";
  if(str=="Y"){
    newStr="是"
  }else if(str=="N"){
    newStr="否"
  }
  return newStr;
}

//通用下载方法
export  function download(url,params,filename) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  let response;
  if(params){
    response  =  service.post(url, params, {
      transformRequest: [(params) => { return tansParams(params) }],
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob'
    })
  }else{
    response  =  service.get(url, {
      // transformRequest: [(params) => { return tansParams(params) }],
      // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob'
    })
  }
  return response.then(async (data) => {
    const isLogin = await blobValidate(data);
    if (isLogin) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

注意通用方法的调用

get不需要传参 post需要传参

//post
this.download(
  `/account/amount/export/${this.queryParam.yearMonthStr}`,
   {},
   `下载附件名称.xls`
);
//get
this.download(
  `/account/amount/export/${this.queryParam.yearMonthStr}`,`下载附件名称.xls`
);