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

Question

我不知道如何使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';
      }
    },
  },