element - - - - - js调用confirm弹窗

最新推荐文章于 2025-03-26 11:04:59 发布

Dark_programmer

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量491

点赞数

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.csdn.net/Dark_programmer/article/details/130193635

版权

elementUI 专栏收录该内容

19 篇文章

订阅专栏

文章介绍了如何在JavaScript中使用$confirm进行简单的和自定义的确认弹窗操作，特别是在Vue.js环境下。示例代码展示了如何设置确认文案、标题、按钮文字以及添加自定义样式和功能，如删除操作的确认提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 简单实用

this.$confirm('这里是confirm提示的确认文案', '这里是title', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'custom-model', // 可自定义一个class 后续通过css样式调整，样式不可写在```scope```里
  type: 'warning'
}).then(() => {
    this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});

2. 自定义使用

const h = this.$createElement
this.$confirm('', {
  message:h('div',null, [
    h('i',{ class:'el-icon-question',style:'color:#f90;font-size:30px;' }),
    h('span',{ style:'margin-left:10px;font-size:16px;line-height:30px;font-weight:600;vertical-align:top;'}, '提示'),
    h('p',{ style:'margin:10px 0 0 40px;' },'此操作将永久删除该文件, 是否继续?')
  ]),
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'del-model',
  closeOnClickModal:false,
  closeOnPressEscape:false,
})
  .then(() => {
    this.$message({
      type: 'success',
      message: '删除成功!'
    });
  })
  .catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });          
  });