javascript - 如何自定义vuetify轮播箭头？

Question

您好，我的应用程序中有以下模板:

        <v-carousel cycle height="300" class="carousel" hide-delimiters>
          <template v-slot:prev="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-left</v-icon></v-btn
            >
          </template>
          <template v-slot:next="{ on, attrs }">
            <v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
              ><v-icon>mdi-arrow-right</v-icon></v-btn
            >
          </template>
          <v-carousel-item
            v-for="i in 4"
            :key="i"
            :src="photo"
          ></v-carousel-item>
        </v-carousel>

我想自定义负责更改幻灯片的箭头。为此，根据 vuetify 文档，我使用了上一个和下一个插槽。问题是我的代码对提到的箭头的外观没有影响。控制台也不会记录任何错误。我究竟做错了什么？如何自定义轮播箭头？

Answer 1

这是工作示例。还需要更多东西吗？？？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4',
      ],
      slides: [
        'First',
        'Second',
        'Third',
        'Fourth',
        'Fifth',
      ],
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f690999882b6c2d88e" rel="noreferrer noopener nofollow">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65131000110c031c25574b1d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c5c6d6f3819dcb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfa9aabaabb6b9a69fedf1a7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.js"></script>
  

<div id="app">
  <v-app id="inspire">
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <template v-slot:prev="{ on, attrs }">
        <v-btn
          color="success"
          v-bind="attrs"
          v-on="on"
        >PREV @Bulchsu</v-btn>
      </template>
      <template v-slot:next="{ on, attrs }">
        <v-btn
          color="info"
          v-bind="attrs"
          v-on="on"
        >NEXT @Bulchsu</v-btn>
      </template>
      <v-carousel-item
        v-for="(slide, i) in slides"
        :key="i"
      >
        <v-sheet
          :color="colors[i]"
          height="100%"
        >
          <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>
  </v-app>
</div>