您的位置：首页 > 编程技术 > js  >  vant 解决tab切换插件标题样式自定义的问题

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

 更新时间：2020年11月14日 16:09  点击：3185

解决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切换插件标题样式自定义的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • php5.3下使用php管理crontab计划任务

    php5.3或以上版本可以使用php管理crontab计划任务，下面我先来体验一下，有需要学习了解的朋友可进入参考。 1.使用php-crontab-manager管理计划任务 要求 PHP>=5.3...2016-11-25

  • 使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11

  • 解决vant-UI库修改样式无效的问题

    这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03

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

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14

  • elementui的el-popover修改样式不生效的解决

    在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下...2021-07-01

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-04

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • 基于leaflet.js实现修改地图主题样式的流程分析

    这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16

  • vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • 微信小程序引入Vant框架的全过程记录

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下...2021-06-08

  • jquery实现有过渡效果的tab切换

    这篇文章主要为大家详细介绍了jquery实现有过渡效果的tab切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-17

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧...2021-06-10

  • photoshop图层样式详解之斜面和浮雕详解

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下图层样式详解之斜面和浮雕，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14

  • Vant+postcss-pxtorem 实现浏览器适配功能

    这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05

  • AngularJS使用ng-class动态增减class样式的方法示例

    这篇文章主要介绍了AngularJS使用ng-class动态增减class样式的方法,结合具体实例形式分析了ng-class操作页面class样式的相关技巧,需要的朋友可以参考下...2017-05-22

  • C#利用Label标签控件模拟窗体标题的移动及窗体颜色不断变换效果

    Label标签控件相信对大家来说都不陌生，下面这篇文章主要给大家介绍了关于C#利用Label标签控件模拟窗体标题的移动及窗体颜色不断变换效果的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。...2020-06-25

  • jQuery zTree如何改变指定节点文本样式

    这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-17

  • ionic实现可滑动的tab选项卡切换效果

    这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-09-01

  • C# 键盘Enter键取代Tab键实现代码

    这篇文章主要介绍了C# 键盘Enter键取代Tab键实现代码，有需要的朋友可以参考一下...2020-06-25

  • C++解析特殊符号tab、换行符号实例代码

    这篇文章主要给大家介绍了关于C++解析特殊符号tab、换行符号的相关资料，这个功能在我们日常开发中经常会遇到，需要的朋友可以参考下...2021-05-16