vue实现横屏滚动公告效果_vue.js

<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="vue实现横屏滚动公告效果_vue.js" 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>