Vue修改mint-ui默认样式的方法


Posted in Javascript onFebruary 03, 2018

在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下:

1、在src/assets/css目录下新建scss文件,my-mint.scss,内容如下:

/* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */
$color-primary: #05AFAF;
.mint-header {
 background-color: $color-primary;
}
.mint-button:not(.is-disabled):active::after {
  opacity: .2 /* .6 */
}
.mint-button--primary {
  background-color: $color-primary;
}
.mint-button--primary.is-plain {
  border: 1px solid $color-primary;
  color: $color-primary
}
.mint-badge.is-primary {
 background-color: $color-primary
}
.mint-switch-input:checked + .mint-switch-core {
 border-color: $color-primary;
 background-color: $color-primary;
}
.mint-navbar .mint-tab-item.is-selected {
 border-bottom: 3px solid $color-primary;
 color: $color-primary;
}
.mint-tabbar > .mint-tab-item.is-selected {
 color: $color-primary;
}
.mint-searchbar-cancel {
 color: $color-primary;
}
.mint-checkbox-input:checked + .mint-checkbox-core {
 background-color: $color-primary;
 border-color: $color-primary;
}
.mint-radio-input:checked + .mint-radio-core {
 background-color: $color-primary;
 border-color: $color-primary;
}
.mt-range-progress {
 background-color: $color-primary;
}
.mt-progress-progress {
 background-color: $color-primary;
}
.mint-msgbox-confirm {
 color: $color-primary;
}
.mint-msgbox-confirm:active {
 color: $color-primary;
}
.mint-datetime-action {
 color: $color-primary;
}

2、在main.js中引入自定义的scss文件

import './assets/css/my-mint.scss';//全局修改mint-UI样式

以上这篇Vue修改mint-ui默认样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
javascript this用法小结
Dec 19 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 #Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 #Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 #Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 #Javascript
You might like
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python实现ipsec开权限实例
2014/11/11 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python多线程http压力测试脚本
2019/06/25 Python
python word转pdf代码实例
2019/08/16 Python
python实现滑雪游戏
2020/02/22 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
Unix如何在一行中运行多个命令
2015/05/29 面试题
学校清明节活动总结
2014/07/04 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
JS的深浅复制详细
2021/10/16 Javascript