0.2.0 • Published 4 years ago
vue-y-swiper v0.2.0
vue-y-swiper
Vue.js 轮播组件
Install
npm install --save-dev vue-y-swiper
Demo
https://bujing.github.io/demo/vue-y-swiper/
Props
active
—— 当前活跃索引,默认为 0autoplay
—— 是否自动播放,默认为 truecontent
—— 轮播图片数组:'http://example/1.jpg', 'http://example/2.jpg', ... ,'http://example/n.jpg'duration
—— 轮播延迟时间(秒),默认为 3mode
—— 图片展示样式,默认 aspectFit。- aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来
- scaleToFill: 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
- 可传入 css 类名,自定义图片展示样式
direction
—— 轮播方向,默认为 row- row: 左滑为正向,右滑为反向
- row-reverse: 右滑为正向,左滑为反向
- column: 上滑为正向,下滑为反向
- column-reverse: 下滑为正向,上滑为反向
transition
—— 过渡效果,默认为 ''- 接收字符串或字符串数组
- 不传或传入空字符串或空数组时,使用默认过渡效果
- 传入字符串或长度为 1 的数组时,过渡效果统一作用于正、反向操作
- 传入长度为 2 的数组时,过渡效果分别作用于正、反向操作
- 传入长度大于 2 的数组时,过渡效果随机作用于正、反向操作
组件内部使用 vue 官方提供的 transition 组件实现过渡效果,所以如需自定义过渡效果,需自行实现过渡 CSS,并通过 transition
属性传入类名。
本组件内部实现了 4 种过渡效果,分别对应 4 种轮播方向。
- row: 相当于
transition
属性为 'slide_left', 'slide_right' - row-reverse: 相当于
transition
属性为 'slide_right', 'slide_left' - column: 相当于
transition
属性为 'slide_up', 'slide_down' - column-reverse: 相当于
transition
属性为 'slide_down', 'slide_up'
Events
onSwiperChange(index)
—— 轮播项改变时触发onSwiperClick(index)
—— 轮播项被点击时触发
Usage
v2.0 版本除横向过渡效果外,其他过渡效果仍 需指定 swiper 组件高度
<template>
<!-- 图片轮播 -->
<YSwiper :content="images" direction="column">
</YSwiper>
<!-- 自定义配置轮播 -->
<YSwiper class="swiper_text" :content="texts" :duration="5" @onSwiperChange="swiperChange">
<slot>
<span>{{ texts[textIndex] }}</span>
</slot>
</YSwiper>
</template>
<script>
import YSwiper from 'vue-y-swiper'
export default {
components: {
YSwiper
},
data () {
textIndex: 0,
texts: [
'vue-y-swiper',
'bujing.github.io',
'码农炸鸡'
],
images: [
'https://dummyimage.com/360x240/cce5ff/333&text=vue-y-swiper',
'https://dummyimage.com/360x240/d4edda/333&text=vue-y-swiper',
'https://dummyimage.com/360x240/f8d7da/333&text=vue-y-swiper',
'https://dummyimage.com/360x240/fff3cd/333&text=vue-y-swiper',
'https://dummyimage.com/360x240/d6d8d9/333&text=vue-y-swiper'
]
},
methods: {
swiperChange (index) {
this.textIndex = index
}
}
}
</script>
<style scoped>
.swiper {
height: 200px;
}
</style>