转盘(Carousel)

Quasar Carousel是一个Vue组件，它使用幻灯片以较少的空间显示更多信息。 对于创建向导也很有用。

转盘高度由最大高度的滑块决定，除非使用“height”属性。

安装

编辑/quasar.conf.js：

framework: {
  components: [
    'QCarousel',
    'QCarouselSlide',
    'QCarouselControl'
  ],
}

基本用法

这是一个非常基本的例子：

<q-carousel class="text-white">
  <q-carousel-slide class="bg-primary">
    Slide 1
  </q-carousel-slide>
  <q-carousel-slide class="bg-secondary">
    Slide 2
  </q-carousel-slide>
  <q-carousel-slide class="bg-tertiary">
    Slide 3
  </q-carousel-slide>
</q-carousel>

QCarousel (父组件)

QCarousel Vue属性

支持决定幻灯片编号的v-model。

Vue属性 类型 说明
color 字符串 来自Quasar调色板的颜色。它决定了开箱即用的转盘控件（箭头、快速导航）的颜色。
arrows 布尔 显示导航箭头。
infinite 布尔 无限幻灯片滚动。
autoplay 布尔/数字 自动在幻灯片之间滚动。能和’infinite’属性很好地配合（但不一定需要’infinite’）。如果用作数字，则表示滚动之间的毫秒数。
quick-nav 布尔 在底部显示导航点。
quick-nav-icon 字符串 使用图标代替底部的导航点。
no-swipe 布尔 通过触摸/鼠标操作禁用导航。
handle-arrow-keys 布尔 允许使用左右箭头键进行导航。在这种情况下，最好一次只渲染一个这样的转盘。
easing 函数 从自动播放或按按钮切换幻灯片时使用的缓动函数。
swipe-easing 函数 使用滑动切换幻灯片时使用的缓动函数。
thumbnails 数组 (v0.15.11+) 指向“statics”文件夹的缩略图数组。 查看示例。
thumbnails-horizontal 布尔 (v0.15.11+) 缩略图水平显示。

QCarousel Vue方法

Vue方法 说明
next() 转到下一张幻灯片。
previous() 转到上一张幻灯片。
goToSlide(slideNumber) 转到所需的幻灯片。 slideNumber是基于0的。

QCarousel Vue事件

Vue事件 说明
@input(index) 发出当前幻灯片的索引。
@slide-trigger(oldIndex，newIndex，direction) 在动画到新幻灯片之前发出。
@slide(index，direction) 转换动画完成后，发出当前幻灯片的索引和幻灯片的方向。即使导航到相同的幻灯片也会发出。
@slide-direction('next'/'previous') 在导航到幻灯片时发出，描述方向（下一个/上一个）。

QCarouselSlide（子组件）

Vue属性 类型 说明
img-src 字符串 来自静态文件夹的图像。例如：’statics/mountaings.png’。

QCarouselControl（子组件）

Vue属性 类型 说明
position 字符串 控件的位置： ‘top’、’top-right’、’top-left’、’bottom-right’等
offset 2个数字的数组 水平和垂直偏移（以像素为单位）。示例（默认值）：[18，18]。

例子

带有基本颜色、箭头、快速导航和包含图像的幻灯片

<template>
  <q-carousel
    color="white"
    arrows
    height="400px"
  >
    <q-carousel-slide img-src="statics/mountains.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">First stop</div>
        <div class="q-headline">Mountains</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide img-src="statics/parallax1.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">Second stop</div>
        <div class="q-headline">Famous City</div>
      </div>
    </q-carousel-slide>
    <q-carousel-slide img-src="statics/parallax2.jpg">
      <div class="absolute-bottom custom-caption">
        <div class="q-display-1">Third stop</div>
        <div class="q-headline">Famous Bridge</div>
      </div>
    </q-carousel-slide>
  </q-carousel>
</template>

<style>
.custom-caption {
  text-align: center;
  padding: 12px;
  color: $grey-4;
  background: rgba(0, 0, 0, 0.5);
}
</style>

带图像幻灯片和缩略图的转盘

需要 Quasar v0.15.11+

<q-carousel
  color="white"
  arrows
  quick-nav
  height="300px"
  :thumbnails="[
    'statics/mountains.jpg',
    'statics/parallax1.jpg',
    'statics/parallax2.jpg'
  ]"
>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />
</q-carousel>

水平缩略图：

<q-carousel :thumbnails="...." thumbnails-horizontal>
  ...
</q-carousel>

无限滚动，自动播放和自定义快速导航图标。 第二张幻灯片有一个Youtube视频。

使用infiniteVue属性。

<q-carousel
  color="white"
  arrows
  quick-nav
  quick-nav-icon="favorite"
  infinite
  autoplay
  height="300px"
>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide>
    <q-video
      class="absolute-full"
      src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
    />
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />
</q-carousel>

自定义快速导航和不同类型的幻灯片内容

第三张幻灯片有一个Youtube视频。

<q-carousel
  color="white"
  quick-nav
  height="300px"
>
  <q-carousel-slide class="text-white bg-primary row flex-center">
    <div class="q-display-2">First Slide</div>
  </q-carousel-slide>
  <q-carousel-slide class="text-white bg-secondary row flex-center">
    <div class="q-display-2">Second Slide</div>
  </q-carousel-slide>
  <q-carousel-slide class="text-white bg-primary">
    <div v-for="n in 7" :key="`custom-${n}`" class="q-ma-sm">
      {{ lorem }}
    </div>
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/mountains.jpg" />
  <q-carousel-slide>
    <q-video
      class="absolute-full"
      src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
    />
  </q-carousel-slide>
  <q-carousel-slide img-src="statics/parallax1.jpg" />
  <q-carousel-slide img-src="statics/parallax2.jpg" />

  <q-carousel-control slot="control-nav" slot-scope="carousel" :offset="[18, 52]">
    <q-btn
      @click="carousel.previous"
      :disable="!carousel.canGoToPrevious"
      color="amber" text-color="black"
      icon="keyboard_arrow_left"
      round dense
      class="q-mr-small"
    />
    <q-btn
      @click="carousel.next"
      :disable="!carousel.canGoToNext"
      color="amber" text-color="black"
      icon="keyboard_arrow_right"
      round dense
    />
  </q-carousel-control>

  <q-btn
    slot="quick-nav"
    slot-scope="props"
    color="white"
    flat
    dense
    :label="`${props.slide + 1}`"
    @click="props.goToSlide()"
    :class="{inactive: !props.current}"
  />
</q-carousel>

使用v-model和一些自定义控件：自动播放按钮、进度条、全屏切换

Controlling from outside of Carousel:
<q-btn
  rounded
  color="primary"
  @click="slide = 1"
  icon="arrow_downward"
  label="Navigate to second slide"
  class="q-ml-sm"
/>

<q-carousel
  v-model="slide"
  color="amber"
  quick-nav
  infinite
  :autoplay="autoplay"
  height="400px"
>
  <q-carousel-slide
    v-for="n in 7" :key="`car-${n}`"
    class="flex flex-center"
    :class="`bg-${colors[n % 5]}`"
  >
    <div class="text-center">
      <div class="q-display-3">Slide {{ n }}</div>
      <div>Slides can contain any content.</div>
    </div>
  </q-carousel-slide>

  <q-carousel-control
    slot="control"
    position="top-right"
    :offset="[18, 18]"
    class="text-white"
    style="background: rgba(0, 0, 0, .3); padding: 4px; border-radius: 4px"
  >
    <q-toggle dark color="amber" v-model="autoplay" label="Auto Play" />
  </q-carousel-control>

  <q-carousel-control
    slot="control-button"
    slot-scope="carousel"
    position="bottom-right"
    :offset="[18, 22]"
  >
    <q-btn
      round dense push
      color="amber"
      :icon="carousel.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
      @click="carousel.toggleFullscreen()"
    />
  </q-carousel-control>

  <q-carousel-control slot="control-progress" slot-scope="carousel" position="bottom" :offset="[42, 100]">
    <q-progress :percentage="carousel.percentage" stripe color="amber" :animate="autoplay" />
  </q-carousel-control>
</q-carousel>

自定义缓动动画。

<template>
  <q-carousel
    class="text-white"
    :easing="overshoot"
    infinite
    autoplay
    arrows
    color="white"
    height="250px"
  >
    <q-carousel-slide
      v-for="n in 7" :key="`anim-${n}`"
      class="flex flex-center"
      :class="`bg-${colors[n % 5]}`"
    >
      <div class="q-display-3">Slide {{ n }}</div>
    </q-carousel-slide>
  </q-carouse>
</template>

<script>
import { easing } from 'quasar'
// easing是一个集合;
// 我们从中挑选"overshoot"

export default {
  data () {
    return {
      overshoot: easing.overshoot
    }
  }
}
</script>

全屏启动

创建向导时很有用。

<template>
  <div>
    <q-btn color="primary" class="glossy" @click="modal = true">
      Launch
    </q-btn>
    <q-modal v-model="modal" maximized>
      <q-carousel
        color="white"
        arrows
        quick-nav
        class="text-white full-height"
      >
        <q-carousel-slide
          v-for="n in 7" :key="`full-${n}`"
          class="flex flex-center"
          :class="`bg-${colors[n % 5]}`"
        >
          <div class="q-display-3">Step {{ n }}</div>
        </q-carousel-slide>

        <q-carousel-control
          slot="control-full"
          slot-scope="carousel"
          position="bottom-right"
          :offset="[18, 22]"
        >
          <q-btn
            rounded push
            color="amber"
            icon="close"
            label="Close me"
            @click="modal = false"
          />
        </q-carousel-control>
      </q-carousel>
    </q-modal>
  </div>
</template>

<script>
export default {
  data () {
    return { modal: false }
  }
}
</script>
旋转器 视差