1.0.1 • Published 3 years ago

easycuse v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

自定义轮播插件

使用例子

<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>

属性含义

字段类型默认值必填
totalPageNumber
isAutoPlayerBooleanfalse
isShowNextPrevBooleanfalse
isShowTipDotBooleanfalse
toggleTimeNumberfalse
nextPrevCustomObject{width: '10vw',height: '20vw',srcL: require('@/assets/imgs/test/btn-lefRight01.png'),srcR: require('@/assets/imgs/test/btn-lefRight02.png')}
dotCustomObject{flex: true,width: '.6vh',height: '.6vh',normalBackground: '#f7d82e',activeBackground: '#fffcee',borderRadius: '.6vh',}
1.0.1

3 years ago

1.0.0

3 years ago