使用 Vuetify 进行影子控制
Shadow control with Vuetify
我正在为我的 header 使用 v-app-bar 标签，我希望元素的阴影更亮，因为它看起来太突出了。我无法将 box-shadow 属性应用于 v-app-bar 元素。
我应该怎么做？
方法一
您可以使用名为 elevation 的组件道具。查看应用程序栏文档的 API 部分 (https://vuetifyjs.com/en/components/app-bars/#api) 和 select PROPS 选项卡，您可以看到高程道具。
方法二
您可以使用内置海拔 类。您可以在这里阅读更多关于它们的信息：https://vuetifyjs.com/en/styles/elevation/
方法三
Vuetify 允许您自定义 sass 样式。
如果你去这里：https://vuetifyjs.com/en/components/app-bars/#api 和 select SASS 选项卡你可以看到它们提供了一些你可以编辑的变量。
其中之一是 elevation，它负责 box-shadow。
当然，你需要将 vuetify 安装为 vue-cli 插件或安装在 we pack 环境中，你可以在这里阅读：https://vuetifyjs.com/en/customization/sass-variables/
方法四
您可以直接应用 css，但不能应用到 v-app-bar，因为它只是 vuetify 组件名称，然后生成到 HTML。您可以使用例如检查您的页面chrome 开发工具并查看应用栏的结构，然后将 css 样式应用于正确的元素。
我正在为我的 header 使用 v-app-bar 标签，我希望元素的阴影更亮，因为它看起来太突出了。我无法将 box-shadow 属性应用于 v-app-bar 元素。
我应该怎么做？
方法一
您可以使用名为 elevation 的组件道具。查看应用程序栏文档的 API 部分 (https://vuetifyjs.com/en/components/app-bars/#api) 和 select PROPS 选项卡，您可以看到高程道具。
方法二
您可以使用内置海拔 类。您可以在这里阅读更多关于它们的信息：https://vuetifyjs.com/en/styles/elevation/
方法三
Vuetify 允许您自定义 sass 样式。 如果你去这里：https://vuetifyjs.com/en/components/app-bars/#api 和 select SASS 选项卡你可以看到它们提供了一些你可以编辑的变量。
其中之一是 elevation，它负责 box-shadow。
当然，你需要将 vuetify 安装为 vue-cli 插件或安装在 we pack 环境中，你可以在这里阅读：https://vuetifyjs.com/en/customization/sass-variables/
方法四
您可以直接应用 css，但不能应用到 v-app-bar，因为它只是 vuetify 组件名称，然后生成到 HTML。您可以使用例如检查您的页面chrome 开发工具并查看应用栏的结构，然后将 css 样式应用于正确的元素。