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

记录一下,开箱即用~

相关推荐
Cobyte14 分钟前
AI全栈实战:使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
NEXT0627 分钟前
前端算法:从 O(n²) 到 O(n),列表转树的极致优化
前端·数据结构·算法
剪刀石头布啊33 分钟前
生成随机数,Math.random的使用
前端
剪刀石头布啊33 分钟前
css外边距重叠问题
前端
剪刀石头布啊34 分钟前
chrome单页签内存分配上限问题,怎么解决
前端
剪刀石头布啊36 分钟前
css实现一个宽高固定百分比的布局的一个方式
前端
Fcy64837 分钟前
Linux下 进程(一)(冯诺依曼体系、操作系统、进程基本概念与基本操作)
linux·运维·服务器·进程
袁袁袁袁满39 分钟前
Linux怎么查看最新下载的文件
linux·运维·服务器
剪刀石头布啊40 分钟前
js数组之快速组、慢数组、密集数组、稀松数组
前端
代码游侠1 小时前
学习笔记——设备树基础
linux·运维·开发语言·单片机·算法