组件封装:

如何封装一个toast提示窗口呢?
且如何优雅的调用后端接口数据?


import Vue from 'vue'
//toast提示框
export const confirm = async (msg, type = 'warning') => {
	return await Vue.prototype.$confirm(msg, '提示', {
	 confirmButtonText: '确定',
	 cancelButtonText: ,'取消',
	 type
   })
}

引入使用:

import confirm from '@util/common'

handleDel(index,row){
	confirm('删除后启用中的Banner将不再展示,是否要删除此条Banner? ')
		.then(() => {
			bannerAPI.fetcRremove(row.id).then(res => {
				if (res.code == 200) {
					this.fetchData() //数据刷新请求
					this.$message.success ('删除成功')
				} else {
					this.$message.error(res.msg)
				}
			})
		})
		.catch(() => {
			console.log('取消')
			this.fetchData()
		}}

效果如下:

在这里插入图片描述

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐