【Vue3 组件封装】vue3 轮播图组件封装

news2024/11/28 19:05:52

文章目录

    • 轮播图功能-获取数据
    • 轮播图-通用轮播图组件
    • 轮播图-数据渲染
    • 轮播图-逻辑封装

轮播图功能-获取数据

目标: 基于pinia获取轮播图数据

核心代码:

(1)在types/data.d.ts文件中定义轮播图数据的类型声明

// 所有接口的通用类型
export type ApiRes <T> = {
    code: string,
    msg: string,
    result: T
}
// 轮播图类型
export type BannerItem = {
  hrefUrl: string
  id: string
  imgUrl: string
  type: string
}

(2)在store/home.ts文件中封装接口,用于获取轮播图数据

import { ApiRes, BannerItem } from '@/types/data'
import request from '@/utils/request'
import { defineStore } from 'pinia'

export default defineStore('home', {
  state: () => ({
    bannerList: [] as BannerItem[],
  }),
  actions: {
    async getBannerList() {
      const {data: res} = await request.get<ApiRes<BannerItem[]>>('/home/banner')
      this.bannerList = res.result
    },
  },
})

(3)在store/index.ts中导入

import useCategoryStore from './modules/category'
import useHomeStore from './modules/home'
export default function useStore() {
  return {
    category: useCategoryStore(),
    home: useHomeStore(),
  }
}

(4)通过开发者工具查看数据

<script lang="ts" setup>
import useStore from '@/store'

const { home } = useStore()
home.getBannerList()
</script>

在这里插入图片描述

轮播图-通用轮播图组件

项目中会多次使用到轮播图组件,但是轮播图渲染的数据是不一样的。

但是轮播图的基本功能都是一样的,比如图片切换,自动播放等等。

因此需要封装一个通用的轮播图组件。

(1)通用轮播图的基本结构src/components/carousel/index.vue

fade 类:用于控制图片的显示和隐藏

active 类:用于控制小圆点高亮

<script lang="ts" setup name="Carousel">
defineProps()
</script>

<template>
  <div class="carousel">
    <ul class="carousel-body">
      <li class="carousel-item fade">
        <RouterLink to="/">
          <img
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </li>
      <li class="carousel-item">
        <RouterLink to="/">
          <img
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </li>
      <li class="carousel-item">
        <RouterLink to="/">
          <img
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg"
            alt=""
          />
        </RouterLink>
      </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>
</template>

<style scoped lang="less">
.xtxcarousel {
  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>

(2)全局注册通用轮播图 src/components/index.ts

import type { App } from 'vue'
import skelecton from './skeleton/index.vue'
+import Carousel from './carousel/index.vue'
export default {
  install(app: App) {
    app.component(skelecton.name, skelecton)
+    app.component(Carousel.name, Carousel)
  },
}

(3)在广告组件中使用src/views/home/components/home-banner.vue

<template>
  <div class="home-banner">
    <!-- 轮播图 -->
    <Carousel></XtxCarousel>
  </div>
</template>

(4)覆盖样式,控制箭头和小圆点的位置src/views/home/components/home-banner.vue

:deep(.carousel-btn.prev) {
  left: 270px!important;
}
:deep(.carousel-indicator) {
  padding-left: 250px;
}

(5)查看效果

在这里插入图片描述

轮播图-数据渲染

目的

home-banner组件把数据传递给Carousel组件进行渲染

(1)父传子的方式将数据传给通用轮播图组件src/views/home/components/home-banner.vue

<Carousel :slides="home.bannerList"></Carousel>

(2)子组件接收数据src/components/carousel/index.vue

了解写法:如果通过js的方法定义类型,需要单独引入PropType进行编写

<script lang="ts" setup name="Carousel">
import { BannerItem } from '@/types/data'
// import { PropType } from 'vue'

// defineProps({
//   slides: {
//     type: Array as PropType<BannerItem[]>,
//     required: true,
//   },
// })
defineProps<{
  slides: BannerItem[]
}>()
</script>

(3)渲染轮播图数据src/components/carousel/index.vue

<template>
  <div class="carousel">
    <ul class="carousel-body">
      <li class="carousel-item fade" v-for="item in slides" :key="item.id">
        <RouterLink :to="item.hrefUrl">
          <img :src="item.imgUrl" alt="" />
        </RouterLink>
      </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 v-for="item in slides" :key="item.id" class="active"></span>
    </div>
  </div>
</template>

(4)控制高亮的下标

<script lang="ts" setup name="Carousel">

const active = ref(0)
</script>

(5)高亮渲染

  1. 添加的fade的图片才会展示,所以根据当前索引号进行判断,索引号等于active的才进行展示
  2. 添加了active类名的小圆点才会高亮,高亮逻辑跟图片一致
<template>
  <div class="carousel">
    <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:;" 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
+        v-for="(item, index) in slides"
        :key="item.id"
+        :class="{ active: active === index }"
      ></span>
    </div>
  </div>
</template>

轮播图-逻辑封装

实现需求:

  1. 轮播图里面的图片需要从父组件传入(因为轮播组件可以复用)
  2. 父组件需要控制轮播图的是否自动播放、动画时间(处理默认值逻辑)
    • 是否自动播放和动画时间都是需要默认值的(如果不传就可以使用轮播组件自己提供的默认值)
  3. 播放逻辑
    1. 点击小圆点可以切换图片
    2. 点击prev和next按钮可以播放指定图片(根据图片个数判断播放的循环)
    3. 如果父组件配置了自动播放,则需要定时播放图片
    4. 鼠标进入轮播图,暂停轮播
    5. 鼠标离开轮播图,继续轮播
    6. 注意点:组件卸载的时候需要清除定时轮播效果(不然组件重新加载的时候会导致多个定时器开启)

(1)父组件传值给轮播图src/views/home/components/home-banner.vue

<template>
  <div class="home-banner">
    <!-- 轮播图 -->
    <Carousel :slides="slides" autoPlay :duration="3000"></XtxCarousel>
  </div>
</template>

(2)props接收src/components/Carousel.vue

<script lang="ts" setup name="Carousel">
import { BannerItem } from '@/types/data'
import { ref, PropType } from 'vue'

defineProps({
  slides: {
    type: Array as PropType<BannerItem[]>,
    required: true,
  },
  autoPlay: {
    type: Boolean,
    default: false,
  },
  duration: {
    type: Number,
    default: 3000,
  },
})

const active = ref(0)
</script>

(3)轮播图的播放逻辑

<script lang="ts" setup name="Carousel">
import { BannerItem } from '@/types/data'
import { onMounted, onUnmounted, PropType, ref } from 'vue'
// import { PropType } from 'vue'

const props = defineProps({
  slides: {
    type: Array as PropType<BannerItem[]>,
    required: true,
  },
  duration: {
    type: Number,
    default: 3000,
  },
  autoPlay: {
    type: Boolean,
    default: false,
  },
})
// const props = defineProps<{
//   slides: BannerItem[]
// }>()

// 控制高亮
const active = ref(0)

const prev = () => {
  if (active.value <= 0) {
    active.value = props.slides.length - 1
  } else {
    active.value--
  }
}

const next = () => {
  if (active.value >= props.slides.length - 1) {
    active.value = 0
  } else {
    active.value++
  }
}

const play = () => {
  // 如果没有自动播放
  if (!props.autoPlay) return
  // 在ts中,使用定时器,window.setInterval
  timer = window.setInterval(() => {
    next()
  }, props.duration)
}
const stop = () => {
  clearInterval(timer)
}

let timer = -1
// 自动播放
onMounted(() => {
  play()
})

onUnmounted(() => {
  stop()
})
</script>

(4)鼠标进入和离开操作

<div class="carousel" @mouseenter="stop" @mouseleave="play">

(5)鼠标经过小圆点切换

<span
  v-for="(item, index) in slides"
  :key="item.id"
  :class="{ active: active === index }"
  @mouseenter="active = index"
></span>

(6)点击左右箭头切换

const prev = () => {
  if (active.value === 0) {
    active.value = props.slides.length - 1
  } else {
    active.value--
  }
}
const next = () => {
  if (active.value === props.slides.length - 1) {
    active.value = 0
  } else {
    active.value++
  }
}

// 注册事件
<a href="javascript:;" class="carousel-btn prev" @click="prev">
  <i class="iconfont icon-angle-left"></i>
</a>
<a href="javascript:;" class="carousel-btn next" @click="next">
  <i class="iconfont icon-angle-right"></i>
</a>
vascript
const prev = () => {
  if (active.value === 0) {
    active.value = props.slides.length - 1
  } else {
    active.value--
  }
}
const next = () => {
  if (active.value === props.slides.length - 1) {
    active.value = 0
  } else {
    active.value++
  }
}

// 注册事件
<a href="javascript:;" class="carousel-btn prev" @click="prev">
  <i class="iconfont icon-angle-left"></i>
</a>
<a href="javascript:;" class="carousel-btn next" @click="next">
  <i class="iconfont icon-angle-right"></i>
</a>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/335608.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux(centos7.6)docker

官方文档&#xff1a;https://docs.docker.com/engine/install/centos/1安装之前删除旧版本的docker2安装yum install-y yum-utils3配置yum源 不用官网的外国下载太慢 推荐阿里云yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.r…

笔记_js运算符

目录二进制相关运算符移位运算符<<>>&#xff5c;(位或运算)参考文档二进制相关运算符 移位运算符 移位运算就是对二进制进行有规律的移位。 tips:进制转换文档链接 << “<<”运算符执行左移位运算。在移位运算过程中&#xff0c;符号位始终保持不变…

jvm mat分析dump文件

jvm调优中&#xff0c;经常使用dump来分析是否存在大对象导致频繁full gc&#xff0c;以下为使用步骤&#xff1a;一、获得服务进程二、生成dump文件jmap -dump:formatb,filexxx.dump pid三、下载mat工具地址:https://www.eclipse.org/mat/downloads.php注意&#xff0c;12及以…

网络安全实验室5.上传关

5.上传关 1.请上传一张jpg格式的图片 url&#xff1a;http://lab1.xseclab.com/upload1_a4daf6890f1166fd88f386f098b182af/ 上传一张后缀名为jpg的图片&#xff0c;上传抓包修改后缀名为别的&#xff0c;s或者直接删掉&#xff0c;放包 得到key is IKHJL9786#$%^& 2.请…

再说多线程(六)——Thread生命周期

前面一直在用Thread介绍多线程任务&#xff0c;本节对线程类Thread的生命周期进行简单的梳理。线程状态对于一个线程来说&#xff0c;有以下几种状态&#xff1a;Unstarted(New) StateRunnable State(Ready to Run)Running StateNot Runable StateDead State这几种状态的转换关…

chatgpt国内能用的镜像与api请求样例

chatgpt去年刚出来时我就到openai注册了账号&#xff0c;必须用国外的线路才能注册&#xff0c;正常注册不了&#xff0c;注册完要用国外手机接收验证码&#xff0c;才能使用&#xff0c;我卡到验证码就没继续用了&#xff0c;昨晚&#xff0c;找了几个国内的镜像&#xff0c;用…

课程回顾|以智能之力,加速媒体生产全自动进程

本文内容整理自「智能媒体生产」系列课程第二讲&#xff1a;视频AI与智能生产制作&#xff0c;由阿里云智能视频云高级技术专家分享视频AI原理&#xff0c;AI辅助媒体生产&#xff0c;音视频智能化能力和底层原理&#xff0c;以及如何利用阿里云现有资源使用音视频AI能力。课程…

PyTorch学习笔记:nn.Sigmoid——Sigmoid激活函数

PyTorch学习笔记&#xff1a;nn.Sigmoid——Sigmoid激活函数 torch.nn.Sigmoid()功能&#xff1a;逐元素应用Sigmoid函数对数据进行激活&#xff0c;将元素归一化到区间(0,1)内 函数方程&#xff1a; Sigmoid(x)σ(x)11e−xSigmoid(x)\sigma(x)\frac1{1e^{-x}} Sigmoid(x)σ(…

基于python下selenium库实现交互式图片保存操作(批量保存浏览器中的图片)

Selenium是最广泛使用的开源Web UI&#xff08;用户界面&#xff09;自动化测试套件之一&#xff0c;可以通过编程与浏览量的交互式操作对网页进行自动化控制。基于这种操作进行数据保存操作&#xff0c;尤其是在图像数据的批量保存上占据优势。本博文基于selenium 与jupyterla…

Python基础01

Python基础 1、编程环境&#xff1a;IDLE 1.1使用 1、文件创建&#xff1a;File —> New File 2、文件打开&#xff1a;File —> Open 3、文件保存&#xff1a; File —> Save 2、输入输出 2.1输入&#xff1a;input() 语法&#xff1a;input(“想要表达的内容”…

在阿里当外包,是一种什么工作体验?

上周和在阿里做外包的朋友一起吃饭&#xff0c;朋友吃着吃着&#xff0c;就开启了吐槽模式。 他一边喝酒一边说&#xff0c;自己现在做着这份工作&#xff0c;实在看不到前途。 看他状态不佳&#xff0c;问了才知道&#xff0c;是手上的项目太磨人。 他们现在做的项目&#…

大数据---Hadoop安装Hadoop简易版

编写自动安装Hadoop的shell脚本 完整流程: 大数据—Hadoop安装教程&#xff08;二&#xff09; 文章目录编写自动安装Hadoop的shell脚本上传压缩包编写shell脚本vim hadoopautoinstall.sh运行上传压缩包 在opt目录下创建连个目录install和soft 将压缩包上传到install目录下 …

docker file和compose

文章目录1.dockerfile&#xff08;单机脚本&#xff09;1.概念2.原理3.dockerfile核心四步4.命令2.docker compose1.概念2.注意事项3.常用字段4.常用命令1.dockerfile&#xff08;单机脚本&#xff09; 1.概念 通过脚本&#xff0c;生成一个镜像&#xff0c;并运行对应的容器…

简介Servlet

目录 一、maven中心库 二、简介Servlet 三、实现Servlet动态页面 1、创建一个maven项目 2、引入依赖 3、创建目录结构 4、编写Servlet代码 5、打包 6、部署 7、验证程序 四、Servlet的运行原理 五、Tomcat伪代码 1、Tomcat初始化 a、让Tomcat先从指定的目录…

C语言学习_DAY_2_变量的定义_输入与输出

高质量博主&#xff0c;点个关注不迷路&#x1f338;&#x1f338;&#x1f338;&#xff01; 目录 I. 变量的定义 II. 变量的赋值 III. 输出 IV. 输入 I. 变量的定义 首先&#xff0c;我们新建一个.c文件在Dev C中&#xff0c;并把之前定义好的程序框架放进去。 此时我…

丝绸之路——NFT 系列来袭!

丝绸之路的经历讲述了汉朝时代的一个重要历史事件。该系列中的 NFT 带有中国这段黄金时代令人愉悦的视觉元素&#xff0c;使其成为值得收藏的物品。 NFT 系列介绍 敦煌女神像01&#xff08;左&#xff09;&#xff1b;汉代士兵&#xff08;中&#xff09;&#xff1b;敦煌女神像…

Matlab与ROS(1/2)链接与入门(一)

0. 简介 Matlab作为广大学生以及算法工程师常用的软件&#xff0c;因其良好的可视化以及矩阵适应能力&#xff0c;使其得到了广泛的使用。同时ROS作为机器人、自动驾驶领域最常用的软件&#xff0c;其与Matlab结合在一起也是理所当然的。为此这一系列就是来带领读者熟悉并了解…

说说连接查询有哪些以及它们之间的区别?

一、左连接 -- 左连接 select t1.a,t2.b from (select 1 a from DUAL union ALL select 1 a from DUAL union ALL select 2 a from DUAL union ALL select 2 a from DUAL union ALL select 3 a from DUAL)t1 LEFT JOIN (select 1 b from DUAL union ALL select 2 b from DUAL …

【成为架构师课程系列】大数据技术体系精华总结【值得收藏!】

目录 大数据技术总结 #大纲 #概念 #应用 #难题 #技术栈 #大数据架构 #1. 数据收集

git报错大全,你将要踩的坑我都帮你踩了系列

使用git push -u origin master报下面的错&#xff1a; 使用git push -u origin master报下面的错&#xff1a; Updates were rejected because the remote contains work that you do not have locally&#xff0c;This is usually caused by another repository pushing to …