如何创建 vuetify 图标滑动控制台

Posted 2023-02-23

【中文标题】如何创建 vuetify 图标滑动控制台

【英文标题】：how to create vuetify icon slid console

【发布时间】：2021-01-01 02:29:32

【问题描述】：

我是 vuetify 实现 vuetify 图标滑动控制台的新手，但我很困惑。

下面的控制台代码包含图像幻灯片，使用此代码我可以实现示例图像 我想这样展示

<template>
  <v-carousel
    cycle
    
    hide-delimiter-background
    show-arrows-on-hover
  >
    <v-carousel-item
      v-for="(slide, i) in slides"
      :key="i"
    >
      <v-sheet
        :color="colors[i]"
        
      >
        <v-row
          class="fill-height"
          align="center"
          justify="center"
        >
          <div class="display-3"> slide  Slide</div>
        </v-row>
      </v-sheet>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
  export default 
    data () 
      return 
        colors: [
          'indigo',
          'warning',
          'pink darken-2',
          'red lighten-1',
          'deep-purple accent-4',
        ],
        slides: [
          'First',
          'Second',
          'Third',
          'Fourth',
          'Fifth',
        ],
      
    ,
  
</script>

【参考方案1】：

您可以在<v-carousel-item/> 中定义<v-row/>，然后用<v-col/> 填充它。每个<v-col/> 代表图像/图标和标题。

<v-carousel
...
>
  <v-carousel-item v-for="(slide, i) in 7" :key="i">

    <v-row>
      <v-col cols="3" v-for="(images, j) in 16" :key="j">
        <div class="d-flex flex-column justify-center align-center">
          <v-img src="https://via.placeholder.com/50" /> <!-- can also be `<v-icon/>` -->
          <span class="mx-auto text-center caption">Caption</span>
        </div>
      </v-col>
    </v-row>

  </v-carousel-item>
</v-carousel>

这是一个示例demo。

【讨论】：

每张幻灯片都显示相同的图像/图标以及如何修复它的标题

我这样做只是为了让您看到最终外观。当然，您需要修改要迭代的数据结构，并在那里定义每个图片/标题。我修改了我的代码和框演示，以便您可以查看数据的示例结构。

我是 vuetify 的新手，我对这方面的知识了解不多，你能给我答案吗

不用担心。更新后的代码框包含数据结构，因此您可以轻松跟进。您只需要替换每个图像的 src 和标题。

我有一个问题，如果我按下图标它应该打开路由器链接，请检查我的问题***.com/questions/64085558/…