vue实现横屏滚动公告效果

<template>
? <div id="box" ref="box">
? ? <div class="marquee-box" ref="marquee" @mouseover="menter" @mouseleave="mleave">
? ? ? <p ref="cmdlist" id="pWidth">
? ? ? ? <img style="width: 12px;height: 12px" src="../assets/logo.png" alt="">累计练习时长1小时，可以获得1次抽奖机会，奖品有。。。。。
? ? ? </p>
? ? </div>
? </div>
</template>

export default {
? name: 'HelloWorld',
? data () {
? ? return {
? ? ? value: 0,
? ? ? timer: '',//计时器
? ? ? pwidth:0,//公告文本的宽度
? ? ? windowWidth:document.documentElement.clientWidth,// 设备屏幕的宽度
? ? ? }
? ? },

? mounted() {
? ? let element = this.$refs.cmdlist;
? ? this.pwidth = document.defaultView.getComputedStyle(element,'').width.split('px');
? ? this.timer = setInterval(this.clickCommend, 20);
? },
??
? watch:{
? ? value(newValue, oldValue) {
? ? ? let allWidth= parseInt(this.windowWidth)+parseInt(this.pwidth[0]);
? ? ? if(newValue <= -allWidth){
? ? ? ? this.$refs.cmdlist.style.marginLeft = this.windowWidth+"px";
? ? ? ? this.value = 0;
? ? ? }
? ? },
? },
??
? methods:{
? ? clickCommend(e) {
? ? ? let _this = this;
? ? ? this.$nextTick(() => {
? ? ? ? this.value -=1;
? ? ? ? this.$refs.cmdlist.style.marginLeft = _this.windowWidth+this.value+"px";
? ? ? });
? ? },
? ? menter(){
? ? ? clearInterval(this.timer);
? ? },
? ? mleave(){
? ? ? this.timer = setInterval(this.clickCommend, 20);
? ? },
? },
? beforeDestroy() {
? ? clearInterval(this.timer);
? }
}

<style scoped>
#box {
? width: 100%;
? height: 50px;
? margin-top: 50px;
? position: relative;
}
.marquee-box ?{
? position: relative;
? width: 100%;
? height: 100%;
? overflow:auto;
? background-color: #f8f8f8;
}
#pWidth{
? width: 100%;
? height: 50px;
? padding: 0;
? margin: 0;
? line-height: 50px;
? display: block;
? word-break: keep-all;
? white-space: nowrap;
? overflow:hidden;
? font-family: 微软雅黑; fontSize:14px;
? background-color: #f8f8f8
}
::-webkit-scrollbar {
? width: 0 !important;
}
::-webkit-scrollbar {
? width: 0 !important;height: 0;
}
</style>