vue项目中vant tab改变标签颜色方式

目录
  • vant tab改变标签颜色
  • vant标签栏样式改变
    • 问题描述
    • 算法描述

vant tab改变标签颜色

找了几种方法，只有下面这个方法是生效的：

<van-tabs
v-model="active"
sticky
title-active-color="#144a9e" // 选中的标签文字颜色
color="#144a9e" // 下面那个下划线颜色
@click="tabClick">

vant标签栏样式改变

问题描述

在使用vant的Tab标签制作导航栏时，Tab样式书写方式同css有些许不同，并且一些样式变量是已经自定义的。那么如何改变样式呢？为此总结了一部分较为常用的样式的代码。

算法描述

在对Tab标签的样式进行改变时，不仅要写类标签名（class），还要写上vant-tab的所需要部分的名。或者某些自定义样式可通过vant教程里的主题定制教程进行样式的改变。本章节采用前一方式改变样式。例子如下：

1）默认模式（line样式）

代码清单 1

<van-tabs class="menu-tabs" v-model="activeName" @click="tagClick" >
           <van-tab title="导览" name="guide" ></van-tab>
           <van-tab title="出入口" name="entranceandexit"></van-tab>
           <van-tab title="教学楼" name="academicBuilding"></van-tab>
         </van-tabs>

效果如下：

默认的样式：

2）若要在点击标签时改变标签的样式需要在类标签名后添上 .van-tab--active。

代码清单 2

<style >
/* 标签栏样式 */
.menu-tabs .van-tab--active{
 color: #FFFFFF; /* 字体颜色 */
 background-color: #FF8917;/* 标签背景颜色 */
 border-radius: 40px;/* 圆角标签背景 */
}
</style >

还可通过 width，height改变背景的宽和高。

效果如下：

3）若要改变标签底部线条的样式需要在类标签名后添上 .van-tabs__line。

代码清单 3

<style >
.menu-tabs .van-tabs__line{
 background-color: #ff55ff;/* 线条颜色 */
 width: 40px;/*宽度 */
 height: 10px;/* 高度 */
border-radius: 40px;/* 圆角 */
}
</style >

效果如下：

4）card样式，在van-tabs使用type。

代码清单 4

<van-tabs class="menu-tabs" type="card" v-model="activeName" @click="tagClick" >
           <van-tab title="导览" name="guide" ></van-tab>
           <van-tab title="出入口" name="entranceandexit"></van-tab>
           <van-tab title="教学楼" name="academicBuilding"></van-tab>
</van-tabs>

效果如下：

本篇文章主要讲的是vant的Tab标签样式的改变。在遇到不会可以运行到浏览器中使用检查工具进行调试，再加上通过教程学习进行问题的解决。希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js 实现tab切换并变色操作讲解

    Vue.js 实现tab切换并变色操作讲解

    在实现这个功能时借鉴的原博主的方法没有实现切换变色,琢磨了好久终于知道了怎么切换变色(小菜鸟的咆哮)!!!记录下来以供参考,以下是vue的完整tab页切换并变色的代码框架. ​<template> <div > //tab页切换按钮部分 <ul > <li v-for="(item,index) in navList" :class = "{active:!(index- menuIndex)}" @click = 'men

  • vue2.0实现的tab标签切换效果（内容可自定义）示例

    vue2.0实现的tab标签切换效果（内容可自定义）示例

    本文实例讲述了vue2.0实现的tab标签切换效果.分享给大家供大家参考,具体如下: 这里利用vue2.0 实现tab标签切换效果 比较实用 初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. 先上代码: html部分 [记得引入vue文件哦] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

  • 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, d

  • Vue实现导航栏点击当前标签变色功能

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • vue项目中vant tab改变标签颜色方式

    vue项目中vant tab改变标签颜色方式

    目录 vant tab改变标签颜色 vant标签栏样式改变 问题描述 算法描述 vant tab改变标签颜色 找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e" // 选中的标签文字颜色 color="#144a9e" // 下面那个下划线颜色 @click="tabClick"> vant标签栏样式

  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • animate.css在vue项目中的使用教程

    在vue项目中使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留可以实现: 第一步:安装: 在命令行中执行:npm install animate.css --save 第二步:引入及使用: main.js中: import animated from 'animate.css

  • vue+elementUI中表格高亮或字体颜色改变操作

    重点的代码: :row-style="setRowStyle"这个属性就是在table标签绑定的 :row-style="setRowStyle" // 这个方法直接加到methods里就好了,页面会自动调用的 setRowStyle(row) { if (row.row.isPart == true) { return 'color:blue;' } }, 具体代码: hmtl <el-table width="100%" :data=&

  • vue项目中使用bpmn为节点添加颜色的方法

    内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

  • Vue项目中常用的工具函数总结

    目录 前言 一.自定义聚焦指令 1.方式一 2.方式二 3.方式三 二.输入框防抖 1.需求 2.思路 3.代码实现 三.关键字高亮 1.需求 2.思路 3.代码演示 四.格式化Excel表格中存储的时间 1.需求 2.代码演示 总结 前言 本文记录了一些Vue项目中常用的工具函数,为了工具函数的统一管理,统一将这些函数放到src目录下的utils文件夹里 一.自定义聚焦指令 1.方式一 mouted周期,ref+querySelector获取到input标签,调用focus() 2.方式二 自

  • 教你在vue项目中使用svg图标的方法

    svg图标优点 svg与iconfont之类的字体图标在网页中的使用差别不大,可以修改大小,颜色等而且不失真. 安装svg-sprite-loader npm install --save-dev svg-sprite-loader 文件夹目录 (xxx.svg 注意:这里的 xxx 不要使用中文) - assets -- icon --- svg --- index.js 配置依赖 // Vue2.x 在 webpack.base.conf.js 中配置如下: // 注意svg图标的路径 sr

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • Vue项目中配置pug解析支持

    Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 要注意的一点是: 标签后面

  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

随机推荐