vant-ui组件库修改NavBar样式

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vant-ui组件库修改NavBar样式

行动是最好的证明   2022-09-29 我要评论

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;
}

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们