介绍
为大家介绍一个我编写的vue组件 auto-marquee ，他可以根据要展示文本是否超出展示区域，来判断是否使用跑马灯效果，效果图如下所示
假设要展示区域的宽度为500px，当要展示文本的长度小于500px时，只会展示文本；只有要展示文本的宽度超过500px时，才会进行跑马灯展示。
安装
npm i auto-marquee
描述
文本未充满容器时，展示文本；文本超出容器时，自动进行跑马灯展示
参数选项
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String | 空字符串 | 要展示的文本 |
| type | String | auto | auto : 文本过长时自动进行跑马灯效果 hover: 鼠标悬浮时，过长的文本才进行跑马灯效果 |
| time | String/Number | 10s | 为animation-duration的值，数值越大，文字速度越慢 |
| bg | String | #fff | 背景色，如果项目有主题切换功能，需要考虑为 bg 动态赋值 |
示例
点击查看 线上演示.
项目地址
- github
支持
vue2 vue3
使用
<script setup>
import {reactive} from "vue";
import AutoMarquee from 'auto-marquee';
const state = reactive({
text:'计算机语言',
});
</script>
<template>
<auto-marquee :value="state.text"></auto-marquee>
</template>