基于 vue3 composition api 编写的轮播插件,多种属性适配,轮播内容 可完全自定义
,基本可以满足大部分的轮播需求。
基本功能介绍:
- 是否开启自动轮播,自定义轮播时间
- 鼠标移入后暂停轮播,鼠标移出后重置轮播
- 点击 左侧/右侧 切换按钮,手动切换
- 点击 底部轮播指示器,手动切换
- 切换按钮 与 轮播指示器,可设置 hover 展示
- 左侧切换向左滚动,右侧切换向右滚动
- ...
在线Demo:正在制作...
npm install v3-carousel
or
yarn add v3-carousel
main.js
import { createApp } from "vue";
import App from "./App.vue";
import Carousel from "v3-carousel"; // 引入
const app = createApp(App)
app.use(Carousel).mount('#app') // 使用
注意点:将你需要显示的图片使用
CarouselItem
包裹起来(创建CarouselItem
暂时必须使用v-for
循环完成,因为我需要使用到idx
来操作),完成之后你还需要将这些CarouselItem
用一个大的Carousel
包裹起来,再给Carousel
添加你需要的属性,好了,到这里一个实例就完成了,你可以去网页上查看轮播图了
App.vue
<template>
<div class="app">
<Carousel
:autoplay="true"
:duration="2000"
:initIndex="2"
:direction="true"
directionMode="hover"
:directionSize="20"
directionColor="skyblue"
:indicator="true"
indicatorMode="always"
indicatorColor="white"
indicatorActiveColor="skyblue"
@before-moving="beforeMoving"
@after-moving="afterMoving"
>
<CarouselItem v-for="(item, index) in data" :key="index" :idx="index">
<img :src="item" />
</CarouselItem>
</Carousel>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
name: "App",
setup() {
const state = reactive({
data: [
"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00693-2745.jpg",
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2190440116,1436403087&fm=26&gp=0.jpg",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593656793,3600757928&fm=26&gp=0.jpg",
],
});
function beforeMoving(dire) {
console.log("before", dire);
},
function afterMoving(obj) {
console.log("after", obj);
},
return {
...toRefs(state),
beforeMoving,
afterMoving,
};
},
});
</script>
property name | type | default value | meaning |
---|---|---|---|
containerWidth | String | 100% | 设置整个carousel容器的宽度,当然你也可以使用vw,rem,em等像素单位 |
containerHeight | String | 100% | 设置整个carousel容器的g高度,同上 |
duration | Number | 3000 | 轮播间隔是多久一次 |
initIndex | Number | 0 | 初始化显示的图片索引 |
autoplay | Boolean | true | 是否自动开始轮播 |
direction | Boolean | true | 是否需要切换按钮(即 上、下一张按钮) |
directionMode | String | always | 切换按钮的展示方式,可选 always、hover |
directionColor | String | white | 切换按钮的颜色 |
directionSize | Number | 25 | 切换按钮的大小,单位(px) |
indicator | Boolean | true | 是否需要轮播图指示器(底部当前选中标识) |
indicatorMode | String | always | 切换按钮的展示方式,可选 always、hover |
indicatorColor | String | #FFFFFF80 | 未选中时的指示器颜色 |
indicatorActiveColor | String | #FFFFFF | 选中时的指示器颜色 |
event Name | parmas | meaning |
---|---|---|
@before-moving | 该钩子函数拥有一个对象参数,你可以获取到它们:轮播的方向(direction)以及当前轮播的索引(index) | 视图移动前会执行的钩子函数,如果您想在轮播图轮播前做一些逻辑可以使用该钩子 |
@after-moving | 同上... | 视图移动完成后会执行的钩子函数,如果您想在轮播图轮播完成之后做一些逻辑可以使用该钩子 |
property name | type | default value | meaning |
---|---|---|---|
idx | Number | 0 | 每个子实例对应的索引,一般用 v-for 中的第二个参数即可 |
使用如果出现问题欢迎来讨论,觉得好用的话就点个
star
吧,o( ̄▽ ̄)o有什么建议欢迎大佬们提交
pr
,谢谢!
- WeChat: x972761675
- 前端qq交流群: 700785102
|