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控制listbox中项的移动并排序
Nov 12 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JavaScript变量声明详解
Nov 27 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
js实现开关灯效果
Mar 30 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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 代码优化之经典示例
2011/03/24 PHP
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
基于构造函数的五种继承方法小结
2017/07/27 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python反转序列的方法实例分析
2018/03/21 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
服务理念口号
2014/06/11 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
七年级作文之冬景
2019/11/07 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
用Python提取PDF表格的方法
2021/04/11 Python
MySQL多表查询机制
2022/03/17 MySQL