vue3封装轮播图组件的方法

目的

封装轮播图组件,直接使用,具体内容如下

大致步骤

  • 准备my-carousel组件基础布局,全局注册
  • 准备home-banner组件,使用my-carousel组件,再首页注册使用。
  • 深度作用选择器覆盖my-carousel组件的默认样式
  • 在home-banner组件获取轮播图数据,传递给my-carousel组件
  • 在my-carousel组件完成渲染
  • 自动播放,暴露自动轮播属性,设置了就自动轮播
  • 如果有自动播放,鼠标进入离开,暂停,开启
  • 指示器切换,上一张,下一张
  • 销毁组件,清理定时器

落地代码

一、封装组件




二、封装成插件

import MyCarousel from './my-carousel.vue'
export default {
  install(app) {
    app.component(MyCarousel.name, MyCarousel)
  }
}

三、在入口文件 main.js 中全局注册

import { createApp } from 'vue'
import App from './App.vue'
import MyUI from './components/library'

// 插件的使用,在main.js使用app.use(插件)
createApp(App).use(MyUI).mount('#app')

四、在项目中使用组件

准备home-banner组件,使用my-carousel组件,然后在项目中使用轮播的地方引入 home-banner 组件, 下面的参数可以在 home-banner 组件中设置

findBannerList 参数作为,后台请求数据给到组件内部

autoplay 参数是否开启轮播,默认 true 开启轮播

duration 参数轮播停留时间间隔以 秒 为单位

总结

按照思路步骤,一步步实现即可。

1.基本组件拆分和布局
2.自动轮播
3.悬停控制启动和停止
4.手动控制切换
5.销毁定时器
6.抽取相关的参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的