vue2弹窗确认框vue-sweetalert2插件的使用

最新推荐文章于 2024-12-06 15:12:24 发布

边中之城

最新推荐文章于 2024-12-06 15:12:24 发布

阅读量797

点赞数

分类专栏：使用方法文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41886421/article/details/129757963

版权

使用方法专栏收录该内容

40 篇文章 0 订阅

订阅专栏

安装

yarn add vue-sweetalert2

// or 
npm install vue-sweetalert2

使用方法

在main.js中注册

import VueSweetalert2 from 'vue-sweetalert2'

// 引入提示框
Vue.use(VueSweetalert2)

在具体页面使用

this.$swal({
  title: '删除用户',
  text: `是否确认删除用户：${data.userName}(${data.userId})？`,
  icon: 'warning',
  reverseButtons: true,
  showCancelButton: true,
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  customClass: {
    confirmButton: 'sweet-btn-primary',
  },
}).then(async result => {
  if (result.isConfirmed) {
    const params = {
      id: data.userId,
    }
    const res = await delUser(params)
    if (res.code === 200) {
      this.$notify.info('success', res.msg)
      this.query.pageNum = 1
      this.$_getTableData()
    }
  } else {
    this.$notify.info('warning', `已取消删除用户：${data.userName} (${data.userId})`)
  }
})