Skip to content

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>

Released under the MIT License.