如何在 Vuetify 中使 Appbar 背景颜色透明

Question

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

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

谢谢。

Answer 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';
      }
    },
  },

Answer 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>