vue根据文字长短展示跑马灯效果

介绍

为大家介绍一个我编写的vue组件 auto-marquee ,他可以根据要展示文本是否超出展示区域,来判断是否使用跑马灯效果,效果图如下所示

假设要展示区域的宽度为500px,当要展示文本的长度小于500px时,只会展示文本;只有要展示文本的宽度超过500px时,才会进行跑马灯展示。

项目地址

示例

点击查看 线上演示.

支持

vue2 vue3

相关推荐
天若有情6732 分钟前
从零实现轻量级C++ Web框架:SimpleHttpServer入门指南
开发语言·前端·c++·后端·mvc·web应用
摇滚侠5 分钟前
css,控制超出部分隐藏,显示... css,控制超出部分不隐藏,换行
前端·css
IT_陈寒10 分钟前
Python 3.12 新特性实战:10个让你代码更优雅的隐藏技巧
前端·人工智能·后端
一 乐31 分钟前
海产品销售系统|海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·后端
艾小码32 分钟前
还在死磕模板语法?Vue渲染函数+JSX让你开发效率翻倍!
前端·javascript·vue.js
炒毛豆33 分钟前
vue3 + antd + print-js 实现打印功能(含输出PDF)
前端·javascript·vue.js
天天向上102434 分钟前
el-table动态添加行,删除行
前端·javascript·vue.js
小王码农记1 小时前
vue2中实现天气预报
前端·javascript·vue.js·echarts
我命由我123452 小时前
Element Plus 组件库 - Select 选择器 value 为 index 时的一些问题
开发语言·前端·javascript·vue.js·html·ecmascript·js
一念一花一世界2 小时前
Arbess从初级到进阶(2) - 使用Arbess+GitLab实现Vue.js项目自动化部署
vue.js·ci/cd·gitlab·arbess