解决vant 框架 tab切换插件标题样式不能自定义问题
找到源码:node_modules/vant/es/tabs/Title.js
修改如下代码:
return h("div", { "attrs": { "role": "tab", "aria-selected": this.isActive }, "class": [bem({ active: this.isActive, disabled: this.disabled, complete: !this.ellipsis }), { 'van-ellipsis': this.ellipsis }], "style": this.style, "on": { "click": this.onClick } }, [h("span", { "class": bem('text') }, [this.slots() || this.title, h(Info, { "attrs": { "dot": this.dot, "info": this.info } })])]);
this.title即是标题;新增一个span标签
<span>看情况修改</span>
[h("span", { "class": bem('text') }, [this.slots() || this.title, h(Info, { "attrs": { "dot": this.dot, "info": this.info } }),h("span","看情况修改")])]
最后在app.vue中修改样式
.van-tabs__nav--line .van-tab .van-tab__text span{ color:#cc0000 !important; }
补充知识:vant样式改不动?进入调试器找生成的class类名设置样式
vant样式改不动?进入调试器找生成的class类名设置样式
用vue写的项目需要注意的地方是,在scoped里修改是无法做到修改vant样式的,这是外部引入的。我们需要新建一个,然后在里面用自己的类名限定住这个样式的修改。举例:
以上这篇vant 解决tab切换插件标题样式自定义的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长技术。
本文将研究 ES6 的 for ... of 循环。 旧方法 在过去,有两种方法可以遍历 javas...
vbs:把一段文字中指定字符颜色变成红色的正则 functionc(Tstr,Word) Dimre Setre...
【排序算法】之lowb三人组冒泡、插入、选择 什么是lowb三人组 冒泡排序bubble so...
计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持...
一、正则表达式概述 二、正则表达式在VBScript中的应用 三、正则表达式在VavaScr...
前言 相信大家都知道在IDE中代码的智能提示几乎都是标配,虽然一些文本编辑器也...
歌词编辑器 歌词编辑器 第一步:选择要播放的歌曲并播放 第二步:填写全部的歌词...
ADO对象: Connection Command Recordset Record Stream ASP支持的对象很多,可...
微信文件传输助手是微信电脑版与手机微信之间相互传输图片等文件的好工具,但很...
一石激起千层浪,继中国区浩浩荡荡的大裁员告一段落之后,甲骨文并未因此收起手...