Message Box确认消息弹框组件，简单封装+样式修改

最新推荐文章于 2024-12-09 17:33:05 发布

能请你喝罐芬达吗

最新推荐文章于 2024-12-09 17:33:05 发布

阅读量1.6k

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_56568186/article/details/122507629

版权

本文介绍如何在Element UI中定制确认框样式，并通过一个具体示例展示如何结合图片和自定义样式来增强用户体验。此外，还提供了一个封装好的方法用于简化调用流程。

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

element样式
在这里插入图片描述
修改后的样式

如果多个页面调用，可以把方法写进mixin里

// 确认框操作
      sureAgree(callback) {
        const Url = require('../../assets/img/问题.png')  // 这里用require才能找到图片
        this.$confirm('<img src=' + Url + '><p>您确定同意该操作？</p>', '确认提示', {
          dangerouslyUseHTMLString: true,  // 字符串需要加这一行
          cancelButtonClass: 'btn-custom-cancel', // 取消的按钮样式，如果只加这个，确定就会放到最前面了，如果想要确定在后面，需要把确定的按钮样式也加上或者删掉取消的样式
          customClass: 'messageBox_class', // 类名，修改样式，可以把想要修改的样式都放这里面，不会造成污染
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        }).then(valid => {
          if (callback) {
            callback() 
          }
        }).catch(() => {
          console.log('取消')
        })
      },

// 封装后的代码调用
open(row) {
      this.sureAgree(async() => {
        const res = await getPurchaseAgreementAgree({ id: row.id, status: 5 })
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.handleQuery()
          return
        }
        this.$message.error('操作失败！')
      })
    },

样式的话，其实没什么了，放一个标题的样式吧

.el-message-box__title{
    ::before{
      content: '';
      margin-right: 8px;
      width: 4px;
      height: 16px;
      background: rgb(66, 123, 252);
      display: inline-block;
    }
  }