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


Posted in Vue.js onMarch 04, 2021

       接着上一篇文章,熟悉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 ? dotBgColor : '#fff'}" 
  @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)">></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)"><</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. 大体的思想就是这样,还有一些细节可以自己再多想想。感谢!!

六:往期回顾

以上就是vue3.0封装轮播图组件的步骤的详细内容,更多关于vue3.0封装轮播图组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 #Vue.js
vue 数据双向绑定的实现方法
Mar 04 #Vue.js
vue3.0中使用element的完整步骤
Mar 04 #Vue.js
VUE实现吸底按钮
Mar 04 #Vue.js
vue实现可移动的悬浮按钮
Mar 04 #Vue.js
vue中axios封装使用的完整教程
Mar 03 #Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
You might like
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
python fabric使用笔记
2015/05/09 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python输入错误后删除的方法
2019/10/12 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
大学生求职自我评价
2014/01/16 职场文书
活动策划邀请函
2014/02/06 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis