vue+ elementUI confirm message 换行显示提示信息

  我们平时遇到的提示信息都是一行展示的,但是最近的项目要求将不符合要求的数据全部换行展示。样式如下:

  顶部提示信息message

 

 

 代码实现如下:

let returnMsgList = [
    ”用户’孙小小'的登录手机号:138已占用,请修改“,
    ”用户’孙xx'的登录手机号:138已占用,请修改“
];
 // 最终展示数据 , 创建元素;
let newDatas = [],h = this.$createElement;
     // 循环数据 依次放入最终数据中
          for (const i in returnMsgList) {
            newDatas.push(h('p', null, returnMsgList[i]))
          }
    // 弹出优雅展示
          this.$message.error({
            message: h('div', null, newDatas)
          });    

  同理:confirm 提示信息 

代码实现如下:

let returnMsgList = [
    ”用户’孙小小'的登录手机号:138已占用,请修改“,
    ”用户’孙xx'的登录手机号:138已占用,请修改“
];
let newDatas = [],h = this.$createElement;
        for (const i in returnMsgList) {
          newDatas.push(h('p', null, returnMsgList[i]))
        }
        _this.$confirm( h('div', null, newDatas), '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '已导入'
            }); 
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消导入'
            });          
        });

  代码实现环境:vue+elementUI。

  

posted @ 2020-05-07 17:21  小瓶盖儿21  阅读(3598)  评论(0编辑  收藏  举报