当先锋百科网

首页 1 2 3 4 5 6 7

需求:点击删除按钮弹出对话框,点击确定发送请求,点击取消alert一个info弹框提示

  • 先按需引入 MessageBox并在Vue.prototype中添加一个属性使其能够全局使用
import {MessageBox} from 'element-ui'
Vue.prototype.$message = Message
  •  使用时的代码
 // 如果用户取消删除,则confirmResult为cancel
      // 如果用户确定删除,则confirmResult为confirm
      const confirmResult = await this.$confirm(
        '此操作将永久删除该分类, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(error => error)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        const { data: res } = await this.$http.delete(`categories/${id}`)
        if (res.meta.status !== 200) {
          return this.$message.error('删除分类失败')
        } else {
          this.$message.success('删除分类成功')
          this.getCateList()
        }
      }

注:    1.需要在所在函数名前加async,以简化后台返回的Promise数据
         2.用在不同的场景时只需修改请求路径以及获取列表函数
         3.需要改一下文本内容
         4.this.$http为封装的ajax请求