本篇內容介紹了“Vue怎么替代marquee標簽超出寬度文字橫向滾動效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設計、成都做網(wǎng)站和四川服務器托管的網(wǎng)絡公司，有著豐富的建站經(jīng)驗和案例。

一、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標簽超出寬度文字橫向滾動效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！