Marquee 跑马灯
跑马灯组件,用于循环播放一段文字或者一组图片。
基础使用
通过 NueMarquee
组件,实现跑马灯的功能。
通过 speed-ratio
属性设置速度倍率系数,值越大,速度越慢。属性接受数字类型。
<template>
<nue-marquee :speed-ratio="32">
<nue-text style="width: max-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quidem
voluptatem itaque nobis, totam recusandae maxime, sunt vero eos esse
ipsam. Molestias at explicabo nulla, ipsum numquam magni culpa
voluptates.
</nue-text>
</nue-marquee>
</template>
无限循环
通过 infinite
属性设置是否无限循环,属性接受布尔类型。
<template>
<nue-marquee infinite>
<div class="marquee-item" v-for="item in 12" :key="item">
{{ item }}
</div>
</nue-marquee>
</template>
<style scoped>
.marquee-item {
width: 80px;
height: 80px;
background-color: var(--nue-divider-color);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--nue-primary-radius);
}
</style>