【Quasar】quasar轮播图进度条

效果

开始效果

在这里插入图片描述

即将结束

在这里插入图片描述

结束

在这里插入图片描述

码

<template><q-carouselv-model="slide"transition-prev="scale"transition-next="scale"swipeableanimatedinfiniteautoplaynavigationpaddingarrowsheight="300px"class="bg-primary text-white shadow-1 rounded-borders"><template v-slot:navigation-icon="{ active, onClick }"><q-btn flat size="sm" v-if="active" @click="onClick" :ripple="false"><divclass="caruse-progress carouse-progress-active relative-position"></div></q-btn><q-btn flat size="sm" v-else @click="onClick" :ripple="false"><div class="caruse-progress relative-position"></div></q-btn></template><q-carousel-slide name="style" class="column no-wrap flex-center"><q-icon name="style" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="tv" class="column no-wrap flex-center"><q-icon name="live_tv" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="layers" class="column no-wrap flex-center"><q-icon name="layers" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide><q-carousel-slide name="map" class="column no-wrap flex-center"><q-icon name="terrain" size="56px" /><div class="q-mt-md text-center">{{ lorem }}</div></q-carousel-slide></q-carousel>
</template><script>
import { ref } from "vue";export default {setup() {return {slide: ref("style"),lorem: "我是大帅哥",};},
};
</script><style lang="sass" scoped>
.caruse-progresswidth: 30pxheight: 3pxbackground: rgba(0,0,0,.2).carouse-progress-active&::aftercontent: '',width: 0height: 100%background: whiteposition: absoluteleft: 0top: 0animation: 5s linear carouse-progress@keyframes carouse-progressfromwidth: 0towidth: 100%
</style>