引水方知開源不易
與朋友首次開源了一個輪播插件，希望大家積極品嘗
介紹
基於 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>
參數
Carousel 組件選項（Props）
| 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 | 選中時的指示器顏色 |
Carousel 事件（Event）
| event Name | parmas | meaning |
|---|---|---|
| @before-moving | 該鈎子函數擁有一個對象參數，你可以獲取到它們：輪播的方向(direction)以及當前輪播的索引(index) | 視圖移動前會執行的鈎子函數，如果您想在輪播圖輪播前做一些邏輯可以使用該鈎子 |
| @after-moving | 同上... | 視圖移動完成后會執行的鈎子函數，如果您想在輪播圖輪播完成之后做一些邏輯可以使用該鈎子 |
CarouselItem 組件選項（Props）
| property name | type | default value | meaning |
|---|---|---|---|
| idx | Number | 0 | 每個子實例對應的索引，一般用 v-for 中的第二個參數即可 |
聯系方式
使用如果出現問題歡迎來討論，覺得好用的話就點個
star吧，o(￣▽￣)o有什么建議歡迎大佬們提交
pr，謝謝！
repo歸屬者
- WeChat: x972761675
- 前端qq交流群: 700785102
目前維護者: 淳淳同學
 |