开源的起因

开源一个组件是十分需要想象力,但是如果在业务的加持下,这种想象力就能被打开了.而我最近便遇到了这种场景(在element-ui无法提供组件能力的情况下),我根据它的实现思路自己实现了一个更加强大的组件(自恋了哈哈哈哈哈).

实现思路

就是使用css的transform的特性,为子项位于统一水平线上,点击下一个按钮或者上一个按钮,移动的距离就是一个子项的宽度.在卡片模式下,利用了定位的层级关系,让激活的卡片永远在其它卡片之上.

使用

安装

npm install v-carousel-lucky --save

全局引入

import { createApp } from 'vue'
import App from './App.vue'
//引入css文件
import "v-carousel-lucky/dist/style.css"
// 引入组件
import vCarouselLucky from 'v-carousel-lucky'
const app = createApp(App);
app.use(vCarouselLucky)
app.mount("#app")

局部引入

import { Carousel, CarouselItem } from 'v-carousel-lucky'
import "v-carousel-lucky/dist/style.css"

使用

<script setup>
import { Carousel, CarouselItem } from 'v-carousel-lucky'
import "v-carousel-lucky/dist/style.css"

function beforeMoving(before) {
  console.log("before", before);
}
function afterMoving(after) {
  console.log("after", after);
}
</script>

<template>
  <div class="app">
    <carousel 
    :autoplay="true" 
    :duration="5000" 
    :initIndex="0" 
    :direction="true" 
    directionMode="hover" 
    :indicator="true"
    indicatorMode="always" 
    :loop="true" 
    type="card"  
    :delay="500"
    @before-move="beforeMoving" 
    @change-move="afterMoving">
      <carousel-item v-for="item in 3" :key="item" class="item">
        <div class="h">{{ item }}</div>
      </carousel-item>
    </carousel>
  </div>
</template>

<style scoped>
.app {
  width: 500px;
  height: 300px;
}

.h,
.item {
  width: 100%;
  height: 100%;
}

.item:nth-child(1) .h {
  background-color: rgb(198, 121, 22);
}

.item:nth-child(2) .h {
  background-color: rgb(74, 56, 33);
}

.item:nth-child(3) .h {
  background-color: rgb(39, 199, 68);
}
</style>

这样便能得到如下结果:

配置项如下:

名称	介绍	可选值	默认值
width	轮播的宽度	-	400px
height	轮播的高度（不包含指示灯的高度）	-	300px
duration	轮播延迟的时间	-	3000ms
autoplay	是否自动轮播	true/false	true
initIndex	初始化展示的item	-	0（第一个）
direction	是否展示切换按钮	true/false	true
directionMode	切换按钮展示的方式	always/hover	always
indicator	指示灯是否展示	true/false	true
indicatorMode	指示灯展示方式	always/hover	always
indicatorPosition	指示灯在外部还是内部	inside/outside	inside
indicatorTrigger	指示灯触发方式	hover/click	hover
type	carousel的类型	card	-
loop	是否循环轮播	true/false	true
delay	切换过渡时的事件	-	300
scale	幻灯片缩小的比例	小于1	0.8
cardWidth	激活幻灯片的宽度	小于整体宽度	50%

Event

名称	介绍	参数
before-move	目前激活幻灯片的前一个	Object=>(index,direction)
change-move	目前激活的幻灯片	Object=>(index,direction)

结尾

欢迎大家star.哈哈哈哈哈哈.

GitHub