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 相关文章推荐
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
如何实现js拖拽效果及原理解析
May 08 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
validator验证控件使用代码
2010/11/23 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python 计算文件的md5值实例
2017/01/13 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
transform python环境快速配置方法
2018/09/27 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
职工小家建设活动方案
2014/08/25 职场文书
影视广告专业求职信
2014/09/02 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
英语导游词
2015/02/13 职场文书
独生子女证明范本
2015/06/19 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android