vue3——自己封装轮播图效果

最新推荐文章于 2024-09-06 13:55:54 发布

最新推荐文章于 2024-09-06 13:55:54 发布

阅读量1.7k

点赞数 5

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57712926/article/details/120315594

版权

本文介绍如何在Vue3项目中封装一个具备自动轮播、悬停停止、点击切换功能的轮播图组件，并通过插件注册为全局组件，便于复用。详细讲述了准备、注册和使用过程。

摘要由CSDN通过智能技术生成

前言

vue3项目中如何封装自己的轮播图效果组件呢，希望轮播图可以控制是否自动轮播，当鼠标悬停的时候停止自动轮播。点击左右切换或者分页指示器可以切换图片。这些功能是如何实现的呢？又是如何通过插件方式注册为全局组件的呢？一起来看看如何实现的吧~

一、为什么封装？

为了迎合es6模块化开发思想
注册为全局组件，可以更好地复用，需要用到的地方，直接使用标签即可

二、如何封装？

1. 准备

像之前vue3——自己封装骨架屏效果这篇博文一样的操作，通过vue插件的方式注册为全局组件。

项目中需要用到的全局组件可以统一都放到src/components目录下，新建xx.vue文件，名称自定义。

代码如下（示例）：

<template>
  <div class='carousel' @mouseenter="stop()" @mouseleave="start()">
    <ul class="carousel-body">
      <li class="carousel-item" v-for="(item, i) in list" :key="item.id" :class="{fade: index === i}">
        <RouterLink to="/">
          <img :src="item.imgUrl" alt="">
        </RouterLink>
      </li>
    </ul>
    <!-- 左右控制按钮 -->
    <a href="javascript:;" class="carousel-btn prev" @click="toggle(-1)">&lt;</a>
    <a href="javascript:;" class="carousel-btn next" @click="toggle(1)">&gt;</a>
    <!-- 分页器 -->
    <div class="carousel-indicator">
      <span v-for="(item,i) in list" :key="i" :class="{active: index === i}" @click="index = i"></span>
    </div>
  &l