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

记录一下,开箱即用~

相关推荐
风骏时光牛马10 小时前
面向复杂场景的大模型应用落地与能力优化实践
前端
丰锋ff10 小时前
压缩命令笔记
linux
小小善后师10 小时前
我做了个病历归档小程序,被 AI 识别的"最后一公里"狠狠上了一课
前端
江华森10 小时前
数据中心基础设施运维实战:概述与实验环境搭建
运维
H_Lisa10 小时前
我用 Express 写了个 MCP,Claude 直接调用我的 API 了
前端
IT_陈寒10 小时前
React的useEffect依赖数组把我坑惨了
前端·人工智能·后端
迪菲赫尔曼10 小时前
【基础篇 11】把官方源码放到服务器:版本、解压层级和安装位置,一次弄清楚
运维·服务器·开发语言·人工智能·python·yolo·目标检测
兰亭妙微UI设计公司11 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
GeW11 小时前
产业新优势基础软件的人才底盘,从Linux与数据库开始
linux·数据库
by2099912 小时前
Linux GCC/G++ 编译与 Makefile 构建
linux·运维·服务器·经验分享