Element message同时出现多个提示框 以及修改样式

356 阅读1分钟

js将数组子集全部拼接成为字符串

提交数据很多字段为必填如何for遍历提示

思路1:

把所有的内容以字符串拼接起来

在提交的时候统一提示 www.cnblogs.com/huoshengmia…

image.png

blog.csdn.net/weixin_4029…

样式修改不成功

image.png 加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染,但是this.$message生成的dom是没有添加data-v-xxx属性的,所以样式无效。

可以用js动态设置,但是还需要修改内部元素的样式操作起来就比较麻烦了

 
        this.$message({
          message:'登录失败',
          center:true,
          type:'error',
          duration:0
        });
        var el=document.querySelector('.el-message');
        if(el)el.style.cssText='  border: 1px dashed blue;  min-width: 1380px;'

ask.csdn.net/questions/7…

image.png

无效
::v-deep  .el-message--error .el-message__content {
  color: #F56C6C;
  line-height: 20px !important;
  font-size: 18px !important;
}

image.png 没用

       this.$message.error({
           customClass :'Model',
           showClose: true,
           message: afterTips,
           duration:5000
        });
        var el = document.querySelector('.Model.el-message');
        if(el)el.style.cssText='line-height:20px !important;font-size:18px !important;'

思路二:

<style >
/* 影响全局 */
.el-message__content {
  color: #F56C6C;
  line-height: 20px !important;
  font-size: 18px !important;
}
</style>

可以用:

<style >
/* 增加一个样式 这样不会影响全局 */
.Model .el-message__content {
  color: #F56C6C;
  line-height: 20px !important;
  font-size: 18px !important;
}
</style>