zoukankan      html  css  js  c++  java
  • vue中的this.message提示框换行(二十四)

    1、搜索关键词

    vue提示this.$message换行

    vue提示this.$message设置样式

    vue字符串替换(因为在提示框中要显示的是录入生成的参数(json形式),需要粘贴出来给xxljob系统作为任务调度的入参,所以觉得设置换行会友好一点,而且监控项目原生的this,message提示只有一行并且显示不全,相当之不友好)。

    2、vue字符串替换

    vue 把字符串的所有=替换成&&&的方法
    //把字符串中所有=换成&&&
    let reg=new RegExp('=','g')//g代表全部
    let newMsg=JSON.stringify(msg).replace(reg,'&&&');
    console.log(newMsg)
    
    const reg = new RegExp('",', 'g');// g代表全部
    const xxlJobParams = JSON.stringify(this.childModuleObj).replace(reg, '",<br/>');
    
    改造前:
    {"accperiod":"","dayPayCodeEnd":"","dayPayCodeStart":"","magic":"","treatyIds":""}
    加上<br/>之后:
    {"accperiod":"",<br/>
    "dayPayCodeEnd":"",<br/>
    "dayPayCodeStart":"",<br/>
    "magic":"",<br/>
    "treatyIds":""}
    页面提示:
    {"accperiod":"abc",
    "dayPayCodeEnd":"abc",
    "dayPayCodeStart":"abc",
    "magic":"eqwew,werwer,wer,wer,wer,wer",
    "treatyIds":"abc"}

    3、方式一

    this.$message({
        type: 'info',
        message: xxlJobParams
    });

    效果:

    4、方式二 

    this.$message({
        type: 'info',
        dangerouslyUseHTMLString: true,
        message: xxlJobParams
    });

    效果:

     方式一和方式二均不好使,加上<br/>之后,显示不全了,最后是...

    参看链接:

    https://www.cnblogs.com/coderwhytop/p/14524800.html

    https://www.cnblogs.com/wangxiaoer5200/p/11491816.html

    let arr = ['测试一', '测试二', '测试三'];
          let str = arr.join(' <br/> ');
          this.$message({
            dangerouslyUseHTMLString: true,
            message: str,
            type: 'warning'
    });
    使用上面简单的属性        dangerouslyUseHTMLString: true,就可以实现换行;

    5、方式三

    this.$msgbox({
        title: '参数列表',
        message: xxlJobParams,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(action => {
        this.$message({
            type: 'info',
            message: 'action: ' + action
        });
    }).catch((e) => {
        console.log('生成参数列表失败', e);
    });

    效果:

     可以去掉.then

    不加.catch报如下错误:

    :9527/#/accountChecking/xxlJobInfo:1 Uncaught (in promise) cancel Promise.then (async) confirm @ index.vue?95f2:92 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917
    如果错过太阳时你流了泪,那你也要错过群星了。
    在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
    不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。
  • 相关阅读:
    Python实现杨辉三角
    第8.30节 重写Python __setattr__方法实现属性修改捕获
    转:Cookie详解
    第8.29节 使用MethodType将Python __setattr__定义的实例方法与实例绑定
    第8.28节 Python中使用__setattr__定义实例变量和实例方法
    第8.27节 Python中__getattribute__与property的fget、@property装饰器getter关系深入解析
    第8.26节 重写Python类中的__getattribute__方法实现实例属性访问捕获
    关于open函数文件打开模式的有意思的一个现象
    第8.25节 Python风格的__getattribute__属性访问方法语法释义及使用
    转:关于Python中的lambda,这篇阅读量10万+的文章可能是你见过的最完整的讲解
  • 原文地址:https://www.cnblogs.com/szrs/p/15272537.html
Copyright © 2011-2022 走看看