vant 解决tab切换插件标题样式自定义的问题


Posted in Javascript onNovember 13, 2020

解决vant 框架 tab切换插件标题样式不能自定义问题

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类名设置样式

vant 解决tab切换插件标题样式自定义的问题

用vue写的项目需要注意的地方是,在scoped里修改是无法做到修改vant样式的,这是外部引入的。我们需要新建一个,然后在里面用自己的类名限定住这个样式的修改。举例:

vant 解决tab切换插件标题样式自定义的问题

以上这篇vant 解决tab切换插件标题样式自定义的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript利用apply和arguments复用方法
Nov 25 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php5.3 注意事项说明
2013/07/01 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
在Python中使用成员运算符的示例
2015/05/13 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
简爱电影观后感
2015/06/10 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
Java 定时任务技术趋势简介
2022/05/04 Java/Android