1.0.1 • Published 4 years ago
easycuse v1.0.1
自定义轮播插件
使用例子
<template>
<div style="height: 100vh; background: #000;">
<MyCarousel :total-page="imgs.length" :is-auto-player="true" :is-show-tip-dot="true" :is-show-next-prev="true">
<MyCarouselItem v-for="(item, index) of imgs" :key="index">
<div><img :src="item" alt="" width="100%" height="100%"></div>
</MyCarouselItem>
</MyCarousel>
</div>
</template>
<script>
import MyCarousel from './MyCarousel.vue';
import MyCarouselItem from './MyCarouselItem.vue';
export default {
name: "test",
data () {
return {
imgs: [
'//game.gtimg.cn/images/lolm/m/f_1.jpg',
'//game.gtimg.cn/images/lolm/m/f_2.jpg',
'//game.gtimg.cn/images/lolm/m/f_3.jpg',
'//game.gtimg.cn/images/lolm/m/f_4.jpg',
'//game.gtimg.cn/images/lolm/m/f_5.jpg',
'//game.gtimg.cn/images/lolm/m/f_6.jpg',
'//game.gtimg.cn/images/lolm/m/f_1.jpg',
'//game.gtimg.cn/images/lolm/m/f_2.jpg',
'//game.gtimg.cn/images/lolm/m/f_2.jpg',
'//game.gtimg.cn/images/lolm/m/f_2.jpg',
'//game.gtimg.cn/images/lolm/m/f_2.jpg',
],
}
},
components: {
MyCarousel,
MyCarouselItem
},
}
</script>
<style lang="stylus" scoped>
</style>
属性含义
字段 | 类型 | 默认值 | 必填 |
---|---|---|---|
totalPage | Number | 无 | 是 |
isAutoPlayer | Boolean | false | 否 |
isShowNextPrev | Boolean | false | 否 |
isShowTipDot | Boolean | false | 否 |
toggleTime | Number | false | 否 |
nextPrevCustom | Object | {width: '10vw',height: '20vw',srcL: require('@/assets/imgs/test/btn-lefRight01.png'),srcR: require('@/assets/imgs/test/btn-lefRight02.png')} | 否 |
dotCustom | Object | {flex: true,width: '.6vh',height: '.6vh',normalBackground: '#f7d82e',activeBackground: '#fffcee',borderRadius: '.6vh',} | 否 |