Vue 实战-9 Vue公共js功能函数的封装和使用

需求vue项目中会根据请求返回的状态码和信息弹出消息框，因为所有组件都需要，所以就需要封装好一个提示消息的功能函数，实现如下:

第一步：在根目录下创建commonFunction文件夹和 common.js文件

    如图：

　　

 第二步，在common.js文件中写公用的方法：

// 定义一些所有组件都需要用到的 公共方法
export default {
  // 动态设置 提示信息的颜色 icon 信息内容
  noticeInfoShow: function (noticeStatus, noticeMsg) {
    let noticeObj = {}
    switch (noticeStatus) {
      case 'info':
        noticeObj.noticeMsg = noticeMsg !== '' ? noticeMsg : '结果无效!'
        noticeObj.noticeColor = "#999999"
        noticeObj.noticeIcon = "el-icon-info"
        noticeObj.noticeStatus =  'info'
        break;
      case 'success':
        noticeObj.noticeMsg = noticeMsg !== '' ? noticeMsg : '操作成功!'
        noticeObj.noticeColor = "#409EFF"
        noticeObj.noticeIcon = "el-icon-success"
        noticeObj.noticeStatus =  'success'
        break;
      case 'warning':
        noticeObj.noticeMsg = noticeMsg !== '' ? noticeMsg : '操作警告提示!'
        noticeObj.noticeColor = "#FF6600"
        noticeObj.noticeIcon = "el-icon-question"
        noticeObj.noticeStatus =  'warning'
        break;
      case 'error':
        noticeObj.noticeMsg = noticeMsg !== '' ? noticeMsg : '操作失败'
        noticeObj.noticeColor = "#F56C6C"
        noticeObj.noticeIcon = "el-icon-error"
        noticeObj.noticeStatus =  'error'
        break;
      default:
        noticeObj.noticeMsg = noticeMsg !== '' ? noticeMsg : '结果无效!'
        noticeObj.noticeColor = "#999999"
        noticeObj.noticeIcon = "el-icon-info"
        noticeObj.noticeStatus =  'info'
        break;
    }
    return noticeObj
  }
}

第三步在src/main.js文件中引入

// 引入公共js
import common from "../commonFunction/common.js"
Vue.prototype.common = common

第四步在需要的vue组件中使用：

    html代码：

<el-dialog
  title="操作提示"
  :visible.sync="noticeDialogVisible"
  width="30%"
  :close-on-click-modal="false"
  @close="noticeDialogClose"
  center>
  <span :style="{'color': noticeColor}"><i :class="noticeIcon" style="margin-right: 5px; font-size: 16px"></i>{{noticeMsg}}</span>
</el-dialog>

　　data配置项：

data () {
    return {
        noticeMsg: '',
    　　 noticeStatus: 'info',
        noticeColor: '',
        noticeIcon: 'el-icon-info',
        noticeDialogVisible: false,
    }
}

　　请求结果中的具体使用：

async postGrayMigrateSubmit(post_obj){
  var that = this
  console.log("backend add migrate submit post obj===", post_obj)
  await that.axios.post('/addnewtrans', post_obj).then(function (response){
    console.log("post /addnewtrans get response ===", response)
    const res = response.data
    that.noticeDialogVisible = true
    if (res['code'] == 1){
      let {noticeMsg, noticeColor, noticeIcon, noticeStatus } = that.common.noticeInfoShow('success', res['message'])
      that.noticeMsg = noticeMsg
      that.noticeIcon = noticeIcon
      that.noticeColor = noticeColor
      that.noticeStatus = noticeStatus
    }else {
      let {noticeMsg, noticeColor, noticeIcon, noticeStatus } = that.common.noticeInfoShow('error', res['message'])
      that.noticeMsg = noticeMsg
      that.noticeIcon = noticeIcon
      that.noticeColor = noticeColor
      that.noticeStatus = noticeStatus
    }
  }).catch(function (error){
    that.noticeDialogVisible = true
    let {noticeMsg, noticeColor, noticeIcon, noticeStatus } = that.common.noticeInfoShow('error', "xxxx出错, 请检查!")
    that.noticeMsg = noticeMsg
    that.noticeIcon = noticeIcon
    that.noticeColor = noticeColor
    that.noticeStatus = noticeStatus
    console.log("BackendAdd onMigrate async post /addnewtransferupstream error ===", error)
  })
},