vue3封装轮播图组件功能的完整步骤

更新时间：2022年11月23日 14:44:27 作者：风无雨

我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下

需求:

封装一个轮播图组件

功能:

1.有上下切换的点击图标,可以实现点击切换上下张

2.底部有小圆点,对应每一张图片,图片切换,小圆点对应切换

3.小圆点可以点击切换,对应的图片也会切换

功能实现

父组件通过自定义属性传值传递包含图片的数组变量,

子组件通过prorps接收数组,循环渲染数组中的图片

新建公共组件src/components/carousel/index.vue

html部分:

轮播图图片部分由ul套li套img构成
上一张下一张图片由
底部小圆点

<template>
    <div class="home-banner">

        <div class="carousel">
            <!--  轮播图图片部分 -->
            <ul class="carousel-body">
                <li class="carousel-item fade">
                        <img src="" alt="" />
                </li>

            </ul>
            <!-- 上一张下一张箭头图标 -->
            <a href=" javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
            <a href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
            <!-- 底部小圆点 -->
            <div class="carousel-indicator">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</template>

css部分

轮播图切换通过类名fade的opacity实现
加上transition使变化更加顺滑
给span设置border-radius变成小圆点

<style scoped lang="less">
.home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
    background-color: pink;
}

.carousel {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 150px;
    position: relative;

    .carousel {
        &-body {
            width: 100%;
            height: 100%;
        }

        &-item {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 0.5s linear;

            &.fade {
                opacity: 1;
                z-index: 1;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        &-indicator {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                cursor: pointer;

                ~span {
                    margin-left: 12px;
                }

                &.active {
                    background: #fff;
                }
            }
        }

        &-btn {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, 0.2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all 0.5s;

            &.prev {
                left: 20px;
            }

            &.next {
                right: 20px;
            }
        }
    }

    &:hover {
        .carousel-btn {
            opacity: 1;
        }
    }
}
</style>

父组件中引入轮播图组件,传入数组

1.导入轮播图组件,页面使用组件名便签(此处为局部组件注册,可以注册为全局组件)

2.模拟轮播图数据,对象数组,每个对象有图片数据imageUrl和id

3.通过自定义属性把轮播图数据传递给子组件

父组件部分

<script setup lang='ts'>
import Carousel from "@/components/carousel/index.vue"
import { ref } from "vue";
const bannerList = ref([
    { imageUrl: "1.jpg", id: 1 },
    { imageUrl: "2.jpg", id: 2 },
    { imageUrl: "3.jpg", id: 3 },
    { imageUrl: "4.jpg", id: 4 },
    { imageUrl: "5.jpg", id: 5 }
])
</script>

<template>
    <Carousel :slides="bannerList" />
</template>

<style scoped>

</style>

子组件接收父组件数据并渲染

v-for循环渲染图片.key值绑定item.id
v-for循环渲染底部小圆点span,使小圆点个数与图片个数相同

<script lang="ts" setup name="Carousel">
const { slides } = defineProps<{
    slides: []
}>()
</script>
.....省略
        <!-- 轮播图图片 -->
        <ul class="carousel-body">
            <li class="carousel-item "  fade v-for="(item, index) in slides"  :key="item.id">
                    <img :src="item.imageUrl" alt="" />
            </li>
        </ul>
......省略
        <!-- 底部小圆点 -->
        <div class="carousel-indicator">
            <span v-for="(item, index) in slides" active :key="item.id"></span>
        </div>

实现点击上下张图标切换图片,点击底部小圆点切换图片

点击上下张图标切换图片:

给上下图表注册事件pre和next
定义一个变量active记录当前显示图片的下标
判断active记录的下标和当前下标是否一致来显示图片(fade类名 )

点击底部小圆点切换图片:

给每一个span注册点击事件,点击时把当前小圆点index赋值给active
active变化,由于active是响应式数据,所以图片变化为和active相同的index图片(fade类名实现)
小圆点实现高亮变化同样依靠类名实现:class="{ active: active === index }",当active和当前index相同时获得active类名,小圆点变为白色

<script lang="ts" setup name="Carousel">
import { ref } from 'vue';
const { slides } = defineProps<{
    slides: []
}>()
//高亮下标
const active = ref(0)

// 上一张下一张
const prev = () => {
    active.value--
    if (active.value < 0) {
        active.value = slides.length - 1
    }
}
const next = () => {
    active.value++
    if (active.value > slides.length - 1) {
        active.value = 0
    }
}
</script
<template>
    <div class="carousel" @mouseenter="stop" @mouseleave="start">
        <!-- 轮播图图片 -->
        <ul class="carousel-body">
            <li class="carousel-item " :class="{ fade: active === index }" v-for="(item, index) in slides"
                :key="item.id">
                <RouterLink :to="item.hrefUrl">
                    <img :src="item.imgUrl" alt="" />
                </RouterLink>
            </li>

        </ul>
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="carousel-btn prev" @click="prev"><i class="iconfont icon-angle-left"></i></a>
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="carousel-btn next" @click="next"><i class="iconfont icon-angle-right"></i></a>
        <!-- 底部小圆点 -->
        <div class="carousel-indicator">
            <span v-for="(item, index) in slides" @click="active=index" :class="{ active: active === index }"
                :key="item.id"></span>
        </div>
    </div>
</template>

总结

组件传值

封装组件可以通过父子组件传值,插槽传值,实现数据传递

轮播图实现无限滚动

我们需要在图片到达临界时对index进行处理,实现图片首尾衔接

当index小于零时,把index赋值为最后的index
当index大于最后的index时,把index值赋值为0

// 上一张下一张
const prev = () => {
    active.value--
    if (active.value < 0) {
        active.value = slides.length - 1
    }
}
const next = () => {
    active.value++
    if (active.value > slides.length - 1) {
        active.value = 0
    }
}

实现小圆点点击高亮切换

首先设置一个active高亮类,加了这个类则对应小圆点高亮
设置一个active记录当前选中的小圆点的index值,当active和当前index相同时对应的span获得active类名

:class="{ active: active === index }"

给每一个span注册点击事件,当点击时,更改active值为点击的小圆点的index

@click="active=index"

总结

到此这篇关于vue3封装轮播图组件功能的文章就介绍到这了,更多相关vue3封装轮播图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

elementUI Pagination 分页指定最大页的问题及解决方法(page-count)
项目中遇到数据量大,查询的字段多,但用户主要使用的是最近的一些数据,1万条以后的数据一般不使用,这篇文章主要介绍了elementUI Pagination 分页指定最大页的问题及解决方法(page-count),需要的朋友可以参考下
2024-08-08
如何利用vue3实现一个俄罗斯方块
俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
vue实现移动端div拖动效果
这篇文章主要为大家详细介绍了vue实现移动端div拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue自动路由-单页面项目（非build时构建）
这篇文章主要介绍了vue自动路由-单页面项目（非build时构建）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Vue3 KeepAlive实现原理解析
KeepAlive 是一个内置组件，那封装一个组件对于大家来说应该不会有太大的困难，它的核心逻辑在于它的 render 函数，它用 map 去记录要缓存的组件，就是 [key，vnode] 的形式，这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下
2022-09-09
vue中动态设置meta标签和title标签的方法
这篇文章主要介绍了vue中动态设置meta标签和title标签的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Element Breadcrumb 面包屑的使用方法
这篇文章主要介绍了Element Breadcrumb 面包屑的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue3 Composition API的使用简介
这篇文章主要介绍了Vue3 Composition API的使用简介，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
2021-03-03
深入分析element ScrollBar滚动组件源码
这篇文章主要介绍了element ScrollBar滚动组件源码深入分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue操作dom元素的3种方法示例
这篇文章主要给大家介绍了关于vue操作dom元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09