(element-ui) messageBox 弹窗提示消息换行

以下是
不换行的效果图:
在这里插入图片描述

然后直接上代码。

var Main = {
    methods: {
      open4() {
      //1.我们要将后台返回的数据转存成数组,格式为: data=['错误提示一!!!','错误提示二!!!','错误提示三!!!'];
      let data = ['错误提示一!!!','错误提示二!!!','错误提示三!!!'];
     //2.新建newDatas数组
      let newDatas = [];
      const h = this.$createElement;
     //3.通过循环data数组,调用h方法,将每项值传给h,h('标签名',样式,具体内容)
      for(let i in data){
     //4.将data数据push进newDatas数组中
      	newDatas.push(h('p',null,data[i]));
      };
        this.$msgbox({
          title: '消息',
      //5.将newDatas传进h方法生成的代码格式为:
      // <div>
      //      <p>错误提示一!!!</p>
      //      <p>错误提示二!!!</p>
      //      <p>错误提示三!!!</p>
      // </div>
          message: h('div',null, newDatas),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      },
      
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

总共分为5步:
1.将后台返回的数据转存成数组,格式为: data=[‘错误提示一!!!’,‘错误提示二!!!’,‘错误提示三!!!’];
2.新建newDatas数组;
3.通过循环data数组,调用h方法,将每项值传给h,h(‘标签名’,样式,具体内容);
4.将data数据push进newDatas数组中;
5.message:h(‘div’,null,newDatas)将newDatas传进h方法中。

最后实现换行后的效果图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值