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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
Php Cookie的一个使用注意点
2008/11/08 PHP
php中spl_autoload详解
2014/10/17 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python妹子图简单爬虫实例
2015/07/07 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
详解python算法常用技巧与内置库
2020/10/17 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
《小熊住山洞》教学反思
2014/02/21 职场文书
父母对孩子说的话
2014/04/12 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
前台岗位职责范本
2015/04/16 职场文书
音乐会主持人开场白
2015/05/28 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书