风云阁资源网

vue3.0封装轮播图组件的步骤
网络编程 2024/12/22 佚名
3 1

       接着上一篇文章，熟悉vue3.0的基本用法，和使用一段时间以后，开始准备开发适用于vue3.0使用的pc端的组件库。会陆续跟新一些组件库的写法和注意事项，有兴趣的同学可以多多关注哦，不多bb，开始。

开发一个轮播图组件，适用pc端，(暂无考虑app), 使用于vue3.0 + TS

大致的实现效果是这样：

vue3.0封装轮播图组件的步骤

图片自由轮播，对应圆点图片跳转，左右指示器跳转等。暴露以下options配置：

vue3.0封装轮播图组件的步骤

以上是主要的options，下面展开来说一下具体如何封装。

一：封装思想

在vue3.0和vue2.0中封装组件其实核心思想都是一样的，需要使用到vue.component();对组件进行注册，之后在main.ts中挂载一下就可以使用。

在 src下面创建： src --> libs --> sqm_ui(自己UI库的名称）-->index.js

这里的index.js就是注册组件的入口。

同级目录下新建一个文件， Carousel， 这个文件包含所有的轮播组件的功能和样式。

目录如下：

vue3.0封装轮播图组件的步骤

要注意一点： 虽然是在vue3.0和ts中使用，但是入口文件还是用js，这也是为了可以适用非ts写法。

在index.js中：

import Carousel from './Carousel/carousel';
import CarItem from './Carousel/item';let SqmUI = {};
SqmUI.install = function(vue) {
 vue.component(Carousel.name, Carousel);
 vue.component(CarItem.name,CarItem);
};
export default SqmUI;

但是为了配合TS使用，我们需要新建一个index.d.ts文件，用来描述库中成员类型来给TS用。

declare const _default: ({
 install: (app: import("vue").App<any>, ...options: any[]) => any; // 这里单纯描述一下install});
export default _default;

完成以上配置后，在main.ts中使用：

import SqmUI from '@/libs/sqm_ui/index';
import { createApp } from 'vue';
createApp.use(SqmUI);

二：封装流程

对于轮播图而言，我们需要一个固定的容器，来放置每一张滚动的图片，这时候我们需要定义一个Carousel.vue组件。

<template>
 <div class="carousel">
 <slot></slot> // 这里的slot是用来放置item组件
 </div>
</template>

还需要一个用来存储照片的组件，item.vue

<template>
 <div class="carousel-item">
 <slot></slot> // 这里的slot是用来放置img
 </div>
</template>

基本框架搭好，当用户使用的时候在carousel中配置options。

<carousel
 :autoPlay="true" 
 :durdation="3000" 
 :initial="3" 
 :hasDot="true" 
 :hasDirector="true"> </carousel>

在carousel.vue中：接受传来的配置项

props: { 
 autoplay: {  
 type: Boolean,  
 default: true }, 
 duration: {  
 type: Number,  
 default: 3000 }, 
 initial: {  
 type: Number,  
 default: 0 }, 
 hasDot: {  
 type: Boolean,
 default: true }, 
 hasDirector: { 
 type: Boolean,  
 default: true }
}

(1): 实现autoPlay：

在carousel.vue中：

const autoPlay = () => {
 if (props.autoplay) {
 t = setInterval(() => {
  // 轮播逻辑
 }, props.duration);
};
onMounted(() => {
 autoPlay();
});

逻辑很简单，定义一个autoPlay函数，在mounted阶段挂载。

(2): 实现轮播：

想这样一个问题：如何才能让这一张图片显示？一定需要当前图片的index，等于轮播时的index才可以显示。

在item.vue中：

<div class="carsel-item" v-if="selfIndex === currentIndex"> 
 <slot></slot> 
</div>

只有当自身的index，等于当前的index的时候才能显示。

获取currentIndex：

vue3.0中内置方法： getCurrentInstance()

这是一个很重要的方法，通过这个方法我们可以获取当前组件的实例，然后通过ctx获取该组件的上下文。特别好用。

在item.vue中：

setup() {
 const instance:any = getCurrentInstance(); console.log(instance);
}

vue3.0封装轮播图组件的步骤

在instance.vnode下面有个key是每个图片对应的自身的key也就是index。

在instance.parent.ctx 下面有个定义的currentIndex，是当前的index。

当二者相同时，可以显示当前图片。那么currentIndex在哪里设置呢？

回到carousel.vue中：

setup(props) { 
 const state = reactive({  
 currentIndex: props.initial,  
 itemLen: 0,  
 showDir: false 
 });
}

当前的currentIndex就是传入的initial的值。

在autoPlay中：执行轮播

const setIndex = ((dir:String): void => { 
 switch(dir) { 
 case 'next':  
  state.currentIndex += 1;  
  if (state.currentIndex === state.itemLen) {   
  state.currentIndex = 0;  
  }  
  break; 
 case 'prev':  
  state.currentIndex -= 1;  
  if (state.currentIndex === -1) {   
  state.currentIndex = state.itemLen - 1;  
  }  
  break; 
 default:  
  break; 
 } 
});

当next的时候，让currentIndex++； 直到等于轮播图片的长度。(array.length)

当prev的时候， 让currentIndex--； 直到=== -1

之后在item.vue中监听一下：

watch(() => {  
 return instance.parent.ctx.currentIndex 
 }, (value) => {  
 state.currentIndex = value; 
})

这样就完成图片的轮播。

三： 圆点指示器

实现的思想还是很简单的：

       通过传入的hasDot来确定需不需要显示。传入itemLen根据图片的数量来确定显示几个圆点，点击圆点可以跳转到对应的图片上。

在dot.vue中：

<template>
 <div class="dot-goes-wrapper" v-if="hasDot">
 <div class="dot-item" v-for="item in itemLen" :key="item">
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
  class="dot-link"
  :style="{backgroundColor: (item - 1) === currentIndex " 
  @click="dotClick(item - 1)">
 </a> 
 </div> 
 </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
 name: 'dot',
 props: { 
 itemLen: Number, 
 currentIndex: Number, 
 dotBgColor: {  
  type: String,
  default: '#ff5000' },
 hasDot: {  
  type: Boolean,  
  default: true } 
 }, 
 setup(props, ctx) { 
 const dotClick = (index: Number) => { 
  ctx.emit('dotClick', index); 
 }; 
 return {  
  dotClick 
 } 
}})
</script>

通过ctx触发dotClick事件，把index传入，在父组件中使用(Carousel.vue):

@dotClick="dotClick"

const dotClick = (index: any): void => {

state.currentIndex = index;

};

这样完成了圆点指示器。

四： 左右指示器

这个很简单，就是移入的时候显示，然后点击图片滑动。

<template> 
 <div v-if="showDir"> 
 <div class="director dir-next" v-if="dir === 'next'">  
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">&gt;</a> 
 </div> 
 <div class="director dir-prev" v-else-if="dir === 'prev'">  
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">&lt;</a> 
 </div> 
 </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({ 
 name: 'direct', 
 props: { 
 dir: String, 
 showDir: {  
  type: Boolean,  
  default: false 
 } 
 }, 
 setup(props, ctx) { 
 const dirClick = (dir: String) => {  
  ctx.emit('dirClick', dir); 
 }; 
 return {  
  dirClick 
 } 
 }
})</script>

一样的传给父组件一个dirClick事件，在父组件中执行点击移动就可以了。

五：最后：

因为轮播图是通过定时器实现的需要销毁定时器。

onBeforeUnmount(() => {

      _clearFunction();

});

function _clearFunction(): void {

     clearInterval(t);

       t= null;

};

在鼠标移入时停止自动播放，显示左右指示器：

const mouseEnter = (): void => { 
 _clearFunction();
 state.showDir = true;
 };

在鼠标移出时开始播放， 左右指示器消失

 const mouseLeave = (): void => { 
  autoPlay();
  state.showDir = false; 
};

ok. 大体的思想就是这样，还有一些细节可以自己再多想想。感谢！！

六：往期回顾

www.jb51.net/article/206833.htm

以上就是vue3.0封装轮播图组件的步骤的详细内容，更多关于vue3.0封装轮播图组件的资料请关注其它相关文章！

风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com