电子网站设计,WordPress导航主页,邢台做外贸网站,织梦网站安装视频教程介绍
为大家介绍一个我编写的vue组件 auto-marquee #xff0c;他可以根据要展示文本是否超出展示区域#xff0c;来判断是否使用跑马灯效果#xff0c;效果图如下所示 假设要展示区域的宽度为500px#xff0c;当要展示文本的长度小于500px时#xff0c;只会展示文本他可以根据要展示文本是否超出展示区域来判断是否使用跑马灯效果效果图如下所示 假设要展示区域的宽度为500px当要展示文本的长度小于500px时只会展示文本只有要展示文本的宽度超过500px时才会进行跑马灯展示。
安装
npm i auto-marquee描述
文本未充满容器时展示文本文本超出容器时自动进行跑马灯展示
参数选项
参数类型默认值描述valueString空字符串要展示的文本typeStringautoauto : 文本过长时自动进行跑马灯效果 hover: 鼠标悬浮时过长的文本才进行跑马灯效果timeString/Number10s为animation-duration的值数值越大文字速度越慢bgString#fff背景色如果项目有主题切换功能需要考虑为 bg 动态赋值
示例
点击查看 线上演示.
项目地址
github
支持
vue2 vue3
使用
script setup
import {reactive} from vue;
import AutoMarquee from auto-marquee;const state reactive({text:计算机语言,
});
/scripttemplateauto-marquee :valuestate.text/auto-marquee
/template
