this.$confirm确定框内容换行显示

最近碰到一个小问题，大家都知道使用Ele中的confirm弹框插件，但是将当前弹框里的内容进行换行，大家不一定熟悉，下面给大家上效果图

普通js实现换行

第二种，$confirm提示框代码如下

最终实现代码如下：

// 1.把写的提示内容需要换行的地方分成数组 confirmText

const confirmText = ['是否将产品001从我的自选中移出？',  '是否将产品002从我的自选中移出？'] 

// 2.创建一个新数组

   const newDatas = []

// 3.创建虚拟节点

const h = this.$createElement

// 4.循环输出数组的每条信息

 for (const i in confirmText) {

  //将数组中的每条信息进行用p标签填充

 newDatas.push(h('p', null, confirmText[i]))

    }

        this.$confirm(

          '提示',

          {

            title: '提示',

            //将所有信息放在div标签中

            message: h('div', null, newDatas),

            showCancelButton: true,

            confirmButtonText: '确定',

            cancelButtonText: '取消',

            type: 'warning'

          }

        ).then(() => {

        })

知识点补充：

组件实例的$createElement属性是一个具有特殊功能的函数，作用与渲染函数的第一个参数相同，用来定义虚拟节点。

在CR代码的过程中，看到别人使用antd vue弹出对话框的一个写法，我没有这样写过，因此比较好奇，便去查了一下这种写法。写法是这样的：

const h = this.$createElement;

this.$info({
     title: 'This is a notification message',
     content: h('div', {}, [
         h('p', 'some messages...some messages...'),
         h('p', 'some messages...some messages...'),
     ]),
     onOk() {},
});

这里用到了vue $createElement这个方法，此方法各个参数的含义和用法如下：

h('div', {}, [

         h('p', 'some messages...some messages...'),
         h('p', 'some messages...some messages...'),
])

1. 第一个参数，为标签，即创建的节点元素的标签是什么

2. 第二个参数是几点元素的属性配置，例如class，style等等，例如如下代码：

3. h('div', {class: 'test'}, [

         h('p', 'some messages...some messages...'),
         h('p', 'some messages...some messages...'),
])

生成的便是：

可以看出，dom元素上多了class属性。
如下代码：

h('div', {

        style: {
                color: 'green'
            }
         }, [
                h('p', 'some messages...some messages...'),
                h('p', 'some messages...some messages...'),
            ])

可以看出对话框内容的字体已经变成了绿色。

1. 第三个元素是节点元素的内容。