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