【问题标题】:How to Make Appbar Background Color Transparent in Vuetify如何在 Vuetify 中使 Appbar 背景颜色透明
【发布时间】:2020-10-20 20:24:36
【问题描述】:

我不知道如何使app-bar in vuetify 透明。我尝试添加属性color="transparent",但没有奏效。我试过color="rgba(0,0,0, 0)",但没用。我试过color="shades.transparent" - 也没有用。

我想不通。知道如何实现吗?

谢谢。

【问题讨论】:

  • 透明的工作,看看这支笔。 codepen.io/aaha/pen/qBbVNWG。你加载了 vuetify 颜色吗?
  • 我删除了inverted-scroll 并对其进行了测试。如果我向下滚动,它是透明的。即使我不向下滚动,任何想法如何让它变得透明。
  • 我认为您的意思是,当您删除反向滚动时,您有一个白色的应用栏,但是当您向下滚动时它会改变...这是您的问题吗?
  • 是的——我希望它始终透明。不只是当我向下滚动时。

标签: vuetify.js


【解决方案1】:

如果你想让应用栏只有在顶部或顶部一定距离时才透明,你可以使用 window.onscroll 来改变背景颜色。

<v-app-bar :color="bg">...</v-app-bar>

然后在你的脚本部分

mounted() {
    window.onscroll = () => {
      this.changeColor();
    };
  },
  methods: {
    changeColor() {
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) {
        this.bg = 'white';
      } else {
        this.bg = 'transparent';
      }
    },
  },

【讨论】:

  • 感谢这正是我需要让 v-app-bar 在顶部透明,但任何向下滚动都会导致它改变颜色!干杯!
【解决方案2】:

当你有一个固定的应用栏时,vuetify 对 v-content 应用相等的填充,为了删除这个填充并将内容拉起来,你可以使用 class="pa-0"。然后 v-content 将从屏幕顶部开始,并使透明的 appbar 可见。我希望这是有道理的。

Codepen:https://codepen.io/aaha/pen/qBbVNWG

<v-app app>
    <v-app-bar app color="transparent">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
    <v-content class="ma-0 pa-0">
       <div class="d-flex flex-wrap justify-center" width="900">
        <img src="https://picsum.photos/300/300"/>
        <img src="https://picsum.photos/600/300"/>
        <img src="https://picsum.photos/700/300"/>
        <img src="https://picsum.photos/200/300"/>
        <img src="https://picsum.photos/400/300"/>
        <img src="https://picsum.photos/500/300"/>
      </div>
    </v-content>
  </v-app>

【讨论】:

猜你喜欢
  • 2012-08-02
  • 1970-01-01
  • 2012-11-05
  • 2012-06-26
  • 2021-05-04
  • 1970-01-01
  • 2011-06-11
  • 2013-09-02
  • 1970-01-01
相关资源
最近更新 更多