修改Vant组件库NavBar 导航栏的样式

最近在做一个关于vue的小项目，在做的过程中用到了Vant组件库，需要去改一下导航栏上的一些样式，官网上写的有点复杂。其实用深度选择器就能实现修改。

            <van-nav-bartitle="标题"left-text="返回"left-arrow></van-nav-bar>

这个是它自己的样式。

用深度选择器给它修改：

::v-deep .van-nav-bar__title {color: red;
}
::v-deep .van-nav-bar__text {color: red;
}
::v-deep .van-nav-bar__arrow {color: red;
}

二，在开发中还有许多修改样式的方法可以用，介绍一个比较简单的方法

<template><div class="hello"><el-page-header @back="goBack" content="标题"> </el-page-header></div>
</template>

比如上面这段代码，想要修改它的样式，标题，返回，箭头的样式。可以先运行起来，在浏览器中打开开发者工具，用小箭头选择要修改的内容，右边会出现它的class，根据class就可以修改它的样式。

<template><div class="hello"><el-page-header @back="goBack" content="标题"> </el-page-header></div>
</template>
<style>
.el-icon-back {color: red;
}
.el-page-header__title { color: blue;font-size: 20px;
}
.el-page-header__content {color: yellow;font-size: 30px;
}
</style>

这样就修改好了。

修改Vant组件库NavBar 导航栏的样式相关推荐

【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景
感觉自己封装的返回组件不太好用,于是尝试用一下Vant组件库里的 NavBar [uniapp]小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头, ...
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
一.vue中自适应rem的设置新建文件src/libs/rem.js function setRem() {// 750px为设计稿视口宽度字体大小默认18px;const screenWidth ...
用一用Vant组件库
目录一.Vant是什么? 二.小案例 2.1 准备工作 2.2 功能实现三.总结本篇文章主要讲述如何在Vue2中使用Vant2组件库,面向会Vue基础初次使用Vant组件库的对象,大概阅读时间5 ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
微信小程序（五）--- Vant组件库，API Promise化，MboX全局数据共享，分包相关
目录一.npm包 1.Vant Weapp (1)安装Vant组件库 (2)使用Vant组件 (3)定制全局主题样式 2.API Promise化 (1)基于回调函数的异步API的缺点 (2)API ...
使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...

修改Vant组件库NavBar 导航栏的样式

二，在开发中还有许多修改样式的方法可以用，介绍一个比较简单的方法

修改Vant组件库NavBar 导航栏的样式相关推荐

最新文章

热门文章