Vue中修改Mint UI的Toast默认样式之字体大小调整方式

 更新时间:2023年05月16日 15:55:31   作者:Amelia Pond  
这篇文章主要介绍了Vue中修改Mint UI的Toast默认样式之字体大小调整方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue修改Mint UI的Toast默认样式之字体大小调整

给Toast添加className

Toast({
    message: '请输入正确的手机号码',
    duration: 800,
    className: 'noticeError'
});

添加样式

注意:取消scope,设为全局样式; 添加!important

stylus ,这里就没有加花括号、冒号和分号了。不要在意这些细节

.noticeError
    // font-size 28px !important
    transform scale(2) !important
    margin-left -.6rem !important

这里,我的本意是放大Toast中的字号。然鹅,设置的font-size并不能生效。

所以转换思路:

改为放大整个Toast模块。放大之后,Toast的位置就跑偏了。所以通过marginl-left进行微调。

vue修改mint-ui默认样式(默认风格) 

加入my-mint.css

我这里用的postcss的变量定义,如果亲们用的是其他预处理器,要改成其他处理器的定义方式

覆盖mint-ui的primary颜色,改为自己UI的主题色

--main-color: #f76349; /* 橙色 主色调 */
.mint-header {
 background-color: var(--main-color);
}
.mint-button:not(.is-disabled):active::after {
   opacity: .2 /* .6 */
}
.mint-button--primary {
   background-color: var(--main-color);
}
.mint-button--primary.is-plain {
   border: 1px solid var(--main-color);
   color: var(--main-color)
}
.mint-badge.is-primary {
 background-color: var(--main-color)
}
.mint-switch-input:checked + .mint-switch-core {
 border-color: var(--main-color);
 background-color: var(--main-color);
}
.mint-navbar .mint-tab-item.is-selected {
 border-bottom: 3px solid var(--main-color);
 color: var(--main-color);
}
.mint-tabbar > .mint-tab-item.is-selected {
 color: var(--main-color);
}
.mint-searchbar-cancel {
 color: var(--main-color);
}
.mint-checkbox-input:checked + .mint-checkbox-core {
 background-color: var(--main-color);
 border-color: var(--main-color);
}
.mint-radio-input:checked + .mint-radio-core {
 background-color: var(--main-color);
 border-color: var(--main-color);
}
.mt-range-progress {
 background-color: var(--main-color);
}
.mt-progress-progress {
 background-color: var(--main-color);
}
.mint-msgbox-confirm {
 color: var(--main-color);
}
.mint-msgbox-confirm:active {
 color: var(--main-color);
}
.mint-datetime-action {
 color: var(--main-color);
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决Vue.js Devtools未检测到Vue实例的问题

    解决Vue.js Devtools未检测到Vue实例的问题

    在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具,然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用,本文将详细解析这个问题,并提供相应的解决步骤与代码示例,需要的朋友可以参考下
    2024-01-01
  • vue与ant-tree结合伪造懒加载并可以查询

    vue与ant-tree结合伪造懒加载并可以查询

    这篇文章主要为大家介绍了vue与ant-tree结合伪造懒加载并可以查询实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 5个实用的Vue技巧分享

    5个实用的Vue技巧分享

    在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • 详解Vue.js搭建路由报错 router.map is not a function

    详解Vue.js搭建路由报错 router.map is not a function

    这篇文章主要介绍了详解Vue.js搭建路由报错 router.map is not a function,非常具有实用价值,需要的朋友可以参考下
    2017-06-06
  • vue elementUI select下拉框设置默认值(赋值)失败的解决

    vue elementUI select下拉框设置默认值(赋值)失败的解决

    这篇文章主要介绍了vue elementUI select下拉框设置默认值(赋值)失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中使用echarts的方法实例详解

    vue中使用echarts的方法实例详解

    这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
    2023-05-05
  • QT和vue交互的实现示例

    QT和vue交互的实现示例

    本文主要介绍了QT和vue交互的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue中路由的前进和后退问题

    vue中路由的前进和后退问题

    这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解,感兴趣的朋友一起看看吧
    2016-11-11
  • Vue 前端实现登陆拦截及axios 拦截器的使用

    Vue 前端实现登陆拦截及axios 拦截器的使用

    这篇文章主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下
    2019-07-07

最新评论