一、npm 安裝

如果你想安裝插件（自己寫的）

安裝

# install dependenciesnpm i marquee-components

使用

在main.js引入

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

在頁面使用

<template> <div >    <marquee :val="msg"></marquee> </div></template><script>export default { name: 'app', data () {  return {   msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'  } }}</script>

val后加文字即可，當超過文本容器長度時，觸動橫向滾動效果。

二、直接引入組件

marquee組件

<template> <div class="marquee-wrap">  <div class="scroll">   <p class="marquee">{{text}}</p>   <p class="copy"></p>  </div>  <p class="getWidth">{{text}}</p> </div></template><script>export default { name: 'marquee', props: ['val'], data () {  return {   timer: null,   text: ''  } }, created () {  let timer = setTimeout(() => {   this.move()   clearTimeout(timer)  }, 1000) }, mounted () {  for (let item of this.val) {   this.text += ' ' + item  } }, methods: {  move () {   let maxWidth = document.querySelector('.marquee-wrap').clientWidth   let width = document.querySelector('.getWidth').scrollWidth   if (width <= maxWidth) return   let scroll = document.querySelector('.scroll')   let copy = document.querySelector('.copy')   copy.innerText = this.text   let distance = 0    this.timer = setInterval(() => {    distance -= 1    if (-distance >= width) {     distance = 16    }    scroll.style.transform = 'translateX(' + distance + 'px)'   }, 20)  } }, beforeDestroy () {  clearInterval(this.timer) }}</script><style scoped> .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; }</style>

其他頁面引入marquee組件

<template> <div class="container">    <marquee :val="title"></marquee> </div></template><script>import marquee from './marquee' name: 'index', components: {  marquee }, data () {  return { title: ''  } },</script>

總結

以上所述是小編給大家介紹的Vue替代marquee標簽超出寬度文字橫向滾動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！