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

一、npm安装如果你想安装插件（自己写的）安装#installdependenciesnpmimarquee-components使用在main.j

一、npm 安装

如果你想安装插件（自己写的）

安装

# install dependencies
npm i marquee-components

使用

在main.js引入

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

在页面使用

<template>
 <div id="app">
 <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标签超出宽度文字横向滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！