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