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

记录一下,开箱即用~

相关推荐
_院长大人_16 小时前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts
minji...17 小时前
Linux 线程同步与互斥(二) 线程同步,条件变量,pthread_cond_init/wait/signal/broadcast
linux·运维·开发语言·jvm·数据结构·c++
虚伪的空想家17 小时前
k8s集群configmap和secrets备份脚本
linux·容器·kubernetes
IT_陈寒17 小时前
Vite的alias配置把我整不会了,原来是这个坑
前端·人工智能·后端
the sun3417 小时前
从 QEMU 直接启动到 U-Boot 引导:嵌入式 Linux 启动流程的本质差异
linux·运维·服务器
万物得其道者成17 小时前
Cursor 提效实战:我的前端 Prompt、审查 SKILL、MCP 接入完整方法
前端·prompt
三思守心17 小时前
从 0 到 1 搭建自动化内容工厂:深度测评楼兰AI及其在全平台发帖中的表现
运维·服务器·自动化
草莓熊Lotso17 小时前
【Linux 线程进阶】进程 vs 线程资源划分 + 线程控制全详解
java·linux·运维·服务器·数据库·c++·mysql
ShineWinsu17 小时前
对于Linux:文件操作以及文件IO的解析
linux·c++·面试·笔试·io·shell·文件操作
ZKNOW甄知科技17 小时前
数智同行:甄知科技2026年Q1季度回顾
运维·服务器·人工智能·科技·程序人生·安全·自动化