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标签超出宽度文字横向滚动效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页标题:Vue如何替代marquee标签超出宽度文字横向滚动效果
分享路径:http://scyanting.com/article/jcjcci.html