根据条件动态设置 Vuetify 组件 props

Posted 2023-02-23

【中文标题】根据条件动态设置 Vuetify 组件 props

【英文标题】：Dynamically set Vuetify component props based on condition

【发布时间】：2020-12-09 10:45:51

【问题描述】：

我有一个使用我的网络应用程序上的 v-app-bar vuetify 组件制作的导航栏组件。我遇到的问题是我需要根据用户所在的页面动态设置 v-app-bar 的道具。

 <v-app-bar
  absolute
  color="#43a047"
  dark
  shrink-on-scroll
  prominent
  src="https://picsum.photos/1920/1080?random"
  fade-img-on-scroll
  scroll-target="#scrolling-techniques-5"
  scroll-threshold="500"
>

例如，上面的代码是一个基本的 v-app-bar 组件，带有道具，使应用栏具有随着用户向下滚动而淡化并减小大小的图像背景，这基本上是我在我的网站的登陆页面。所以我只想要主页上的这种横幅导航栏样式，并且当用户在另一个页面上时想要不同的样式。我尝试制作单独的导航栏组件，并在组件内部使用 v-if 来根据路由更改导航栏，结果导致代码重复（基于导航栏组件内的路由的多个 if 语句）并且效率不高。对于我正在构建的网站（具有不同类型用户帐户的交互式大型网站），如果我可以从使用 v-app-bar 的页面动态设置 v-app-bar Vuetify 道具会容易得多而不是为每个页面制作单独的导航栏组件。

【问题讨论】：

你能详细解释一下你想要什么样的风格吗？对于像颜色这样简单的样式，最简单的方法是动态地将类绑定到其中

【参考方案1】：

我假设您在布局中使用 v-app-bar，因此正如您所说，使用 this.$route 访问路由将需要大量 if 或大型 switch 语句，并且性能不高。

由于 nuxt 中的每个路由都是由它所写入的页面文件定义的，您可以使用它来将详细信息传递给布局，然后可以将它们用作 v-app-bar 中的道具。为此，您可以使用事件总线。我有一个先前的答案，详细说明了它的用途 here 但我可以在这里概述如何应用它。

您似乎想要传递诸如颜色、src、滚动目标等属性来定制导航栏。从您的页面中，您可以像这样传递这些道具：

//index.vue -- or any route 

export default 
  mounted() 
      let props = 
        color: '#43a047',
        src: 'https://picsum.photos/1920/1080?random',
        scroll-target: '#scrolling-techniques-5',
        scroll-threshold: 500
      
      this.$nuxt.$emit('appBarProps', props);
  

然后在你的布局中像这样监听事件总线：

//default.vue

created() 
    this.$nuxt.$on('appBarProps', p => 
      this.appBarProps = p;
      )
    ,

data() 
    return 
      appBarProps: 
     


beforeDestroy() 
    this.$nuxt.$off('appBarProps');
,

并在您的 v-app-bar 中使用 appBarProps 对象