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

记录一下,开箱即用~

相关推荐
Le_ee1 分钟前
科来流量分析/结合MCP自动化
运维·自动化
小小尚@7 分钟前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts
发光的沙子19 分钟前
嵌入式系统架构师----Ubuntu如何安装不在列表内的软件?
linux·运维·ubuntu
C+ 安口木31 分钟前
Alibaba Cloud Linux 3 服务器环境搭建实战记录
linux·运维·服务器
默_笙1 小时前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
迪康Defender1 小时前
公用电脑责任追溯难?迪康端点安全一体化管理系统用户模式详解
java·运维·开发语言·网络·其他·安全
计算机魔术师1 小时前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
迪康Defender1 小时前
迪康端点安全一体化管理系统文档安全:构建企业文档资产全链路防护体系
运维·网络·安全·web安全·终端安全管理
平头哥技术团队1 小时前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
zhangguojia71 小时前
权限弹窗点击允许的授权流程
运维·服务器·数据库