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

记录一下,开箱即用~

相关推荐
计算机程序设计小李同学2 小时前
基于SSM框架的动画制作及分享网站设计
java·前端·后端·学习·ssm
Elastic 中国社区官方博客2 小时前
使用 Elastic 中的 OpenTelemetry 为 Nginx 实现端到端分布式追踪的实用指南
大数据·运维·分布式·elasticsearch·搜索引擎·信息可视化·全文检索
一只小阿乐2 小时前
vue-web端实现图片懒加载的方
前端·javascript·vue.js
独自破碎E2 小时前
配置ssh解决https不稳定的问题
运维·ssh
牛马1112 小时前
Flutter 多语言
前端·flutter
by————组态3 小时前
集成详细说明
前端·物联网·信息可视化·组态·组态软件
那些年的笔记3 小时前
Linux屏幕旋转方法
linux·运维·服务器
XiaoHu02073 小时前
Linux网络编程套接字
linux·服务器·网络·git
我是小疯子663 小时前
jQuery快速入门指南
前端