Element-UI Message Box弹窗 使用$confirm方法自定义模版内容,修改默认样式

效果实现:
代码实现:
复制代码
      const h = this.$createElement
      const confirmText = ['确定永久删除该文件吗?', '此操作将永久删除该文件,且不可回退/恢复。']
      const newDatas = confirmText.map(item => h('p', null, item))
      this.$confirm('提示', {
        title: '提示',
        message: h('div', null, newDatas),
        showCancelButton: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
      .then(() => {
        // todo.....

      })
      .catch(() => {})

或者:

复制代码
      const h = this.$createElement
      const confirmText = ['确定永久删除该文件吗?', '此操作将永久删除该文件,且']
      const newDatas = []
      newDatas.push(h('p', { style: { fontSize: '16px', fontWeight: 500, color: '#000' } }, confirmText[0]))
      newDatas.push(h('p', null, [
        confirmText[1],
        h('span', { style: { fontWeight: 500, color: '#ff0000' } }, '不可回退/恢复'),
        h('span', null, '。')
      ]))
      this.$confirm('提示', {
        title: '提示',
        message: h('div', null, newDatas),
        showCancelButton: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
      .then(() => {
        // todo.....
        
      })
      .catch(() => {})

记录一下,开箱即用~

相关推荐
风骏时光牛马4 小时前
大模型底层架构与推理流程AI源码深度剖析
前端
等我调个Bug4 小时前
Linux基本指令
linux·服务器
在角落发呆12 小时前
工具配置备份步骤:从手动备份到自动化方案
运维·windows·自动化
_upupup13 小时前
Linux的调试工具——gdb/cgdb
linux·服务器
百度一下吧13 小时前
Nginx 使用手册:从安装配置到实战部署
运维·nginx
Setsuna_F_Seiei13 小时前
前端转型 Agent 开发 06 之 Agent Memory 记忆系统(让 Agent 更智能,更懂你)
前端·agent·ai编程
JeJe同学13 小时前
Docker镜像导入、容器启动
linux·运维·docker
Jason_zhao_MR13 小时前
Linux与实时控制如何兼得
linux·嵌入式硬件·机器人·工业控制
zhangzeyuaaa13 小时前
Ruby 多线程、GVL(GIL)与 Mutex 完全指南
开发语言·前端·ruby
回眸&啤酒鸭14 小时前
【回眸】自动化白盒测试落地实战指南
运维·自动化·log4j