v3+ts手写轮播图

最新推荐文章于 2024-04-28 13:46:58 发布

VIP文章我的同桌朱丽叶

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量321

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_68902642/article/details/125961214

版权

v3+ts手写轮播图

父组件传入需要的数据，是否自动播放（autoPlay）和间隔时间（:duration="3000"）

子组件用defineProps接收

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

const {slides,autoPlay,duration} = defineProps({
  slides:{
    //as是断言 PropType是类型 BannerItem是我们之前拿到的数据的类型
    // BannerItem = {
    //hrefUrl: string;
    //id: string;
    //imgUrl: string;
    //type: string;
 // }
   type:Array as PropType<BannerItem[]>
  },
  //是否自动播放
  autoPlay:{
    type:Boolean,
    default:false
  },
  //间隔的时间