Vue.js的无渲染轮播组件 - vue-renderless-carousel

Vue.js的无渲染轮播组件 - vue-renderless-carousel
插件名称 vue-renderless-carousel
发布时间 2021年4月29日
插件作者 mpbarlow

Vue.js的轮播库,提供了一组无渲染的轮播组件,以简化轮播滑块的创建。

特征:

  • 反应灵敏且移动友好。
  • 支持垂直和水平方向。
  • 箭头和数字导航。
  • 支持动态幻灯片。

安装和下载:

# NPM
$ npm i vue-renderless-carousel

使用:

1.导入carousel组件。

mport { RlCarousel, RlCarouselSlide } from ‘vue-renderless-carousel’;

2.将“carousel”组件添加到模板中。

<rl-carousel
  v-model="slide"
  @swipe-recognized="clearInterval"
>
  <div slot-scope="{ wrapperStyles, slides: { count, active } }">
    <div class="overflow-hidden text-center">
      <div v-bind="wrapperStyles">
        <slot></slot>
      </div>
    </div>
    <div class="mt-4 text-center">
      <span
        v-for="(item, index) in count"
        :key="index"
        class="mx-1 cursor-pointer"
        @click="slide = index; clearInterval()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="30"
          height="20"
          class="stroke-current"
          :class="{
            'text-grey': active !== index,
            'text-grey-dark': active === index
          }"
        >
          <line x1="0" y1="10" x2="30" y2="10" stroke-width="2" />
        </svg>
      </span>
    </div>
  </div>
</rl-carousel>

3.注册组件。

export default {
  name: 'my-carousel',
  components: {
    RlCarousel
  },
  data () {
    return {
      slide: 0,
      interval: undefined
    }
  },
  methods: {
    clearInterval () {
      clearInterval(this.interval)
    }
  },
  created () {
    this.interval = setInterval(() => { this.slide += 1 }, 2000)
  }
}

4.在你的 app.vue

<my-carousel>
  <rl-carousel-slide>
    <div
      class="border border-blue p-8 mx-8 text-center text-3xl"
      style="width: 20vw;"
    >
      One
    </div>
  </rl-carousel-slide>
  <rl-carousel-slide>
    <div
      class="border border-red p-8 mx-8 text-center text-3xl"
      style="width: 40vw;"
    >
      Two
    </div>
  </rl-carousel-slide>
  <rl-carousel-slide>
    <div
      class="border border-green p-8 mx-8 text-center text-3xl"
      style="width: 80vw;"
    >
      Three
    </div>
  </rl-carousel-slide>
</my-carousel>

5.可用的旋转木马道具

align: {
  type: String,
  default: "center",
  validator: (value) => value.match(/^(left|center|right)$/) !== null,
},
animateIn: {
  type: Boolean,
  default: false,
},
noWrap: {
  type: Boolean,
  default: false,
},
static: {
  type: Boolean,
  default: false,
},
touchWrap: {
  type: Boolean,
  default: false,
},
transition: {
  type: String,
  default: "ease",
  validator: (value) =>
    value.match(/^(ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier\(.*\))$/) !== null,
},
transitionTime: {
  type: [Number, String],
  default: 0.5,
},
value: {
  type: Number,
  required: true,
},
vertical: {
  type: Boolean,
  default: false,
},