Vue怎么替代marquee标签超出宽度文字横向滚动效果

本篇内容介绍了“Vue怎么替代marquee标签超出宽度文字横向滚动效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是一家专注于成都网站设计、成都做网站和四川服务器托管的网络公司，有着丰富的建站经验和案例。

一、npm 安装

安装

# install dependencies
npm i marquee-components

使用

在main.js引入

import marquee from 'marquee-components'
Vue.use(marquee );

在页面使用

val后加文字即可，当超过文本容器长度时，触动横向滚动效果。

二、直接引入组件

marquee组件

 .marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
 }
 .marquee{
  margin-right: 16px;
 }
 p {
  word-break:keep-all;
  white-space: nowrap;
  font-size: 16px;
  font-family: "微软雅黑 Light";
 }
 .scroll {
  display: flex;
 }
 .getWidth {
  word-break:keep-all;
  white-space:nowrap;
  position: absolute;
  opacity: 0;
  top: 0;
 }

其他页面引入marquee组件

“Vue怎么替代marquee标签超出宽度文字横向滚动效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！