vant套用组件模板时如何修改模板颜色（以导航栏改变背景颜色为例）

最新推荐文章于 2024-07-24 23:34:20 发布

小程和大只

最新推荐文章于 2024-07-24 23:34:20 发布

阅读量3.1k

点赞数 2

文章标签： elementui vue.js css3

本文链接：https://blog.csdn.net/H1910819090/article/details/122205074

版权

导航栏原本代码

<van-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

进入浏览器出来的效果如图

点击F12键出现源码，按ctrl+shift+c键，选中整个导航栏！！！一定是整个！！右侧出现代码

.van-nav-bar__content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 46px;
}

在我们自己写的的vue代码里添加！！！深度渲染

<style scoped>
/deep/.van-nav-bar__content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-