vant-ui组件库中如何修改NavBar导航栏的样式

 更新时间:2022年08月31日 09:52:49   作者:行动是最好的证明  
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant-ui组件库修改NavBar导航栏的样式

Vant-ui组件中没有改变导航栏的样式的属性,这个时候怎么办呢

我们可以用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改 如下:

引用NavBar组件

<div id="div_box_nav"> 
  <van-nav-bar
    title="标题"
    left-text="返回"
    left-arrow
   />
  </div>

引用后是显示这个样子的 如下图:

但是现在需求是 要求导航栏背景色为蓝色 字体颜色 图标颜色都为白色

我们可以这样来修改

修改背景色这个好改写,直接拿到导航栏的属性名就可以修改

<style lass="scss" scoped>
.van-nav-bar {
  background-color: #2f97ec;
}
</style>

写完后它就变颜色了

下边来修改字体的颜色

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-nav-bar__title {
  color: white;
  font-size: 0.45rem;
}
</style>

使用deep来通过外层大的div盒子id标识定位来穿透设置原本组件的css样式

它这个字体颜色也就改变了

最后来修改箭头图标的颜色 也是用上边这个方法

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-icon {
  color: white;
}
</style>

最后这样也就成功可以修改原本的样式啦

vant组件库,修改NavBar组件的样式

今天在引用navbar组件的时候,发现没有像Tabbar那样能修改样式的属性,可以给

组件对应的标签去做修改,如果不能解决,那么就要使用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改

<van-nav-bar
    fixed
    :title="title"
    :right-text="text"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    class="van-ellipsis"
  >
    <template #left>
      <van-icon color="#fff" name="search" size="23" v-show="showIcon" />
    </template>
  </van-nav-bar>
  
.van-nav-bar {
 background-color: rgb(241, 186, 66);
}
::v-deep .van-icon {
 color: #fff;
}
::v-deep .van-nav-bar__text {
 color: #fff;
}
::v-deep .van-ellipsis {
 color: #fff;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue-以文件流-blob-的形式-下载-导出文件操作

    这篇文章主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 基于vuejs实现一个todolist项目

    基于vuejs实现一个todolist项目

    这篇文章主要为大家详细介绍了基于vuejs实现一个todolist项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue使用Echarts实现排行榜效果

    Vue使用Echarts实现排行榜效果

    这篇文章主要为大家详细介绍了Vue使用Echarts实现排行榜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue项目配置在局域网下访问方式

    Vue项目配置在局域网下访问方式

    这篇文章主要介绍了Vue项目配置在局域网下访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • unplugin-auto-import与unplugin-vue-components安装问题解析

    unplugin-auto-import与unplugin-vue-components安装问题解析

    这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue.js指令v-model实现方法

    vue.js指令v-model实现方法

    这篇文章主要为大家详细介绍了vue.js指令v-model实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue数据传递--我有特殊的实现技巧

    vue数据传递--我有特殊的实现技巧

    这篇文章主要介绍了vue数据传递一些特殊梳理技巧,需要的朋友可以参考下
    2018-03-03
  • Vue实现数据导出导入实战案例

    Vue实现数据导出导入实战案例

    我们经常需要在Vue搭建的后台管理系统里进行数据导入导出等操作,下面这篇文章主要给大家介绍了关于Vue实现数据导出导入实战案例的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue watch监听对象及对应值的变化详解

    vue watch监听对象及对应值的变化详解

    下面小编就为大家分享一篇vue watch监听对象及对应值的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 详解如何运行vue项目

    详解如何运行vue项目

    这篇文章主要介绍了如何运行vue项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论