上篇做了一个简单的vue中uvx的初次引用,使用时发现,样式修改通过css并不能达到效果,简单尝试之后分享一下笔记。
本文以button-tab为例:
<button-tab class ="vux-tab" style="padding-right:30px;padding-left:30px;">
<button-tab-item class ="vux-tab-item" @on-item-click="choose(1)" selected=true>Today</button-tab-item>
<button-tab-item class ="vux-tab-item" @on-item-click="choose(2)">This Week</button-tab-item>
<button-tab-item class ="vux-tab-item" @on-item-click="choose(3)">This Month</button-tab-item>
</button-tab>
所有组件的默认样式,都定义在他自身的主题色(theme.less)中,如果通过css,eg;
.vux-tab .vux-tab-item{
color: blueviolet ;
border-bottom:3px solid blueviolet;
}
// 上面这个把tab 里的文字都变成了blueviolet
这样是可以改变样式,但是属于样式覆盖,并不会出现状态切换。所以考虑从主题样式里修改,首先找到
依照上面格式,引入主题theme.less,如果你找不到该theme,就自己在src自己新建个**.less**文件。然后把ButtonTab里你所需要的样式复制过去,重新赋值定义:
//比如被选中框的颜色
@button-tab-active-background-color:#009FE8;
最后重启工程就好。
最终我自己所需的样式: