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 相关文章推荐
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
jQuery选择器基础入门教程
May 10 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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 表单验证实现代码
2009/03/10 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python logging模块handlers用法详解
2020/08/14 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
黄金酒广告词
2014/03/21 职场文书
超市创意活动方案
2014/08/15 职场文书
个人股份合作协议书
2014/10/24 职场文书
中学生检讨书1000字
2014/10/28 职场文书
写给父母的感谢信
2015/01/22 职场文书
python计算列表元素与乘积详情
2022/08/05 Python