Как включить или выключить стрелки вправо / влево компонента Vuetify Carousel

Question

Я хочу динамически управлять видимостью стрелок (<) и (>) в компоненте Vuetify карусель .

Например, чтобы последняя стрелка вправо на последнем элемент исчезает, или я могу использовать внутренние кнопки или другую интерактивность в содержимом carousel-item для динамической замены кнопок. (Я знаю, что continuous prop может выполнить простой конечный случай).

Документация для next-icon и prev-icon prop - bool или string, а по умолчанию указано $next.

Name    next-icon
Type    boolean | string
Default $next
Description Icon used for the "next" button if show-arrows is true

Я могу сделать так, чтобы кнопка значка исчезла, установив для нее значение false, но true не заставляет ее появляться снова.

Я угадывание строкового значения - это имя иконки (например, md-arrow-right?), но в документации не указано, какое значение по умолчанию, и это не работает. Я предполагаю, что «выкл» устанавливает опору на false, а «вкл» восстанавливает ее на имя иконки.

Я также не понимаю, что означает $next, и это не так т объяснил на странице. Это ошибки, если вы используете это в качестве значения. Все остальное, похоже, оценивается как ложное.

Я предполагаю, что это примерно так:

<template>
  <v-carousel v-model="stepNo" :show-arrows="show.arrows" :next-icon="show.nextArrow" height="auto" light>
  <!-- ... -->
</template>

<script>
export default {
  data: () => {
    return {
      stepNo: 0,
      show: {
        arrows: true,
        nextArrow: "md-arrow-right",
      },
    }
  },
  watch: {
    stepNo: function(newStep, oldStep) {
      // some logic here, for example
      this.nextArrow = (newStep === 4) ? "md-arrow-right" : false;
    },
  },
  //...
}
</script>

---

ОБНОВЛЕНИЕ

Одна из моих ошибок была md-arrow-right должно быть mdi-arrow-right (пропущено i) или на самом деле mdi-chevron-right, как отмечает tony19. Теперь я могу установить буквальный значок ОК.

Но установка $next или $prev по-прежнему не работает - он отображает либо ничего, и пустой круг, либо знак $, который на самом деле слово $next. И это, похоже, «нарушает» привязку и устанавливает ее в буквальный значок после этого, не удается до перезагрузки страницы.

<i aria-hidden="true" class="v-icon notranslate material-icons theme--light" style="font-size: 36px;">$next</i>

Answer 1

Видимость значка должна быть восстановлена ​​при установке его на $next (как видно из фрагмента демонстрационного кода ниже).

О $next ...

Для всех значков в рамках Vuetify использует v-icon для отображения значка, указанного именем. Имена значков сопоставляются с набором значков (по умолчанию Значки дизайна материалов ). Названия сопоставленных значков идентифицируются префиксом $ и переназначается во время рендеринга значков.

Например, предустановка mdi сопоставляет $prev с mdi-chevron-left и $next до mdi-chevron-right; и предустановки fa (Font Awesome) отображаются $prev на fas fa-chevron-left и $next на fas fa-chevron-right.

Буквенные имена значков (без префикс $) также может быть использован явно. Например, вы можете указать mdi-arrow-expand-right вместо $next в v-icon.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      nextIcon: '$next',
      prevIcon: '$prev',
      nextIconEnabled: true,
      prevIconEnabled: true,
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4',
      ],
      slides: [
        'First',
        'Second',
        'Third',
        'Fourth',
        'Fifth',
      ],
    }
  },
  watch: {
    nextIconEnabled(nextIconEnabled) {
      if (nextIconEnabled) {
        this.nextIcon = this._lastNextIcon
      } else {
        this._lastNextIcon = this.nextIcon
        this.nextIcon = false
      }
    },
    prevIconEnabled(prevIconEnabled) {
      if (prevIconEnabled) {
        this.prevIcon = this._lastPrevIcon
      } else {
        this._lastPrevIcon = this.prevIcon
        this.prevIcon = false
      }
    }
  }
})

.controls {
  display: flex;
  flex-direction: column;
}

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.2.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.2.8/dist/vuetify.min.css">


<div id="app">
  <v-app id="inspire">
    <div class="controls">
      <label>Toggle next-icon
        <input type="checkbox" v-model="nextIconEnabled">
      </label>
      <label>next-icon:
        <input v-model="nextIcon" placeholder="icon name"/>
      </label>
      <label>Toggle prev-icon
        <input type="checkbox" v-model="prevIconEnabled">
      </label>
      <label>prev-icon:
        <input v-model="prevIcon" placeholder="icon name"/>
      </label>
    </div>
    <v-carousel
      height="400"
      hide-delimiter-background
      :prev-icon="prevIcon"
      :next-icon="nextIcon"
    >
      <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>

Answer 2

Я думаю, что вы можете добиться желаемого поведения, не полагаясь на документацию, если оно не обеспечивает то, что вам нужно.

Просто осмотрите стрелки left и right компонента карусели и получите DOM узел по селектору. Тогда вы готовы делать с элементами то, что вы хотите.

Например:

const nextButton = document.querySelector('.v-window__next button');

const prevButton = document.querySelector('.v-window__prev button');

(Возможно, вместо document вы можете использовать $el внутри вашего компонента)

Теперь вы можете делать со своими элементами все, что захотите.

К show/hide динамически:

nextButton.style.display = 'None'; // Hide
nextButton.style.display = 'Block'; // Show

К navigate:

nextButton.click(); // Go next.
prevButton.click(); // Go prev.

Vue равно JavaScript в конце, без волхвов c;)

Кстати, вы можете попробовать это прямо в консоли браузера по ссылке , которую вы указали для карусели.

Answer 3

Простая опечатка в имени иконки:

nextArrow: "md-arrow-right",

должна быть

nextArrow: "mdi-arrow-right",

Я продолжаю делать эту ошибку, потому что я получаю имена иконок, выполняя поиск https://materialdesignicons.com/ , где имена значков не имеют префикса mdi-, и я часто ошибаюсь, когда вручную добавляю md- только для дизайна материала.