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(() => {})

记录一下,开箱即用~

相关推荐
wefly201730 分钟前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
learndiary30 分钟前
2026.03.12~2026.03.19制作的共7个视频及简介
linux·视频·学习日记小店
JiMoKuangXiangQu33 分钟前
Linux:ARM64 中断处理简析
linux·arm64 中断
_下雨天.34 分钟前
Nginx性能调优与深度监控
运维·nginx
小生不才yz1 小时前
【Makefile 专家之路 | 函数篇】11. 终极奥义:eval 函数——动态生成规则的“核武器”
linux
皮卡蛋炒饭.1 小时前
进程得控制
linux·运维·服务器
C澒1 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
YMWM_1 小时前
Install pyrealsense2 on the jetson thor
linux·realsense2
德育处主任Pro1 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳1 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式