时间:2021-05-26
在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下:
1、在src/assets/css目录下新建scss文件,my-mint.scss,内容如下:
$color-primary: #05AFAF;.mint-header { background-color: $color-primary;}.mint-button:not(.is-disabled):active::after { opacity: .2 }.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默认样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下1.安装vue2.0的mint-ui框架npminstallmint-ui-save2.
Import按需引入:import{Checklist}from'mint-ui';Vue.component(Checklist.name,Checklist
1.mint-ui安装:npminstallmint-ui--save使用:main.js//MintUI组件库importMintUIfrom'mint-ui
vue中mint-ui环境搭建详细介绍首先需要如下配置node(最好用淘宝源)$npminstall-gcnpm--registry=https://regis
在vue2.0中引入了mint-ui后总是报一个css的错误但是package.json中已经配置了css-loaderstyle-loader,webpack