vue this.$confirm中提示的文字换行

原创已于 2022-06-01 16:56:39 修改 · 8.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-06-01 16:51:00 首次发布

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用$createElement创建动态确认框，并展示了如何添加换行和样式，包括自定义字体大小和间距。还演示了如何通过class属性添加CSS类到确认框元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写一个简单的按钮点击确认框信息的时候，发现换行不能用\n。用了< br>发现也是字符串的输出形式
去查了下发现需要使用$createElement来创建

  const h = this.$createElement
      this.$confirm('提示', {
        title: '提示',
        message: h('div', [h('p', '是否将该账号密码重置为初始密码？'), h('p', '成功后将密码设为默认密码，默认密码为用户账号')]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          resetPasswords(params).then((res) => {
            if (res.code == 200) {
              this.$message.success('重置密码成功')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置密码',
          })
        })

在这里插入图片描述
修改里面的样式

 message: h('div', [h('p', { style: 'font-size: 18px;margin-bottom:10px;' },'是否将该账号密码重置为初始密码？'), h('p', '成功后将密码设为默认密码，默认密码为用户账号')]),

添加class

如果写成h('div',{class:'...'})就可以定义class，如：

 h('i', { class: 'el-icon-question' })