ref版本,可以在页面中多次使用
<template>
<div ref="marqueeWrap" class="marquee-wrap">
<!-- 文本超出滚动显示 -->
<div ref="scroll" class="scroll">
<p class="marquee">{{text}}</p>
<p ref="copy" class="copy"></p>
</div>
<p ref="getWidth" 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 = this.$refs.marqueeWrap.clientWidth
let width = this.$refs.getWidth.scrollWidth
if (width <= maxWidth) return
this.$refs.copy.innerText = this.text
let distance = 0
this.timer = setInterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
this.$refs.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;
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>
id版本,一个页面中只能使用一次
<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;
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>