vue+Element實現文字列表輪番滾動效果

<template> <div style="position: relative;">
    <p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">預警信息</span></p>
    <div v-if="!chuxians" ref="message" class="messages">
        <div ref="infobord1" class="content-issue">
            <p v-if="chuxian" @click="geti(index)"  v-bind:class="getInfoClass(item.type)" v-for="(item,index) in messages"
            > <span> {{item.info}}</span> <span><span class="icon"><i class="el-icon-arrow-right"></i></span></span> </p>
        </div>
        <div ref="infobord1" class="content-issue">
            <p v-if="chuxian" @click="geti(index)"  v-bind:class="getInfoClass(item.type)" v-for="(item,index) in messages"
            > <span> {{item.info}}</span> <span><span class="icon"><i class="el-icon-arrow-right"></i></span></span> </p>
        </div>
    </div>
    <div v-else ref="chuxians" class="chuxians">
        <i @click="go" class="el-icon-back" style="left:280px;top:30px;position: absolute"></i>
        <div class="content-text"> {{nei}} </div>
        <div class="foot">
            緊急聯繫人：周峯  <br/>
            聯繫人電話：[phone]
        </div>
    </div>

</div>
</template>
<script>
  export default {
    data() {
      return {
        chuxian: true,
        chuxians: false,
        nei: "",
        messages: [
          {
            type: "報警",
            deviceId: 12,
            info: "溫度傳感器西特Setra STC溫度讀數異常"
          },
          {
            type: "報警",
            deviceId: 12,
            info: "西特Setra 230溼/ 溼差壓傳感器異常"
          },
          {
            type: "警告",
            deviceId: 12,
            info: "江森VG1000系列電動球閥異常"
          },
          {
            type: "警告",
            deviceId: 12,
            info: "壓力傳感器西特Setra 231 型讀數異常"
          },
          {
            type: "警告",
            deviceId: 12,
            info: "傳感器西特Setra SRIM2 型溫度異常"
          },
          {
            type: "警告",
            deviceId: 12,
            info: "NS系統溫控異常"
          },
          {
            type: "報警",
            deviceId: 12,
            info: "J651-T智能感溫探測器讀數異常"
          },
          {
            type: "警告",
            deviceId: 12,
            info: "機械溫控面板 T2000AAC-0C0有問題"
          },
          { type: "報警", deviceId: 1, info: "監測到有害氣體，請儘快疏散" }
        ]
      };
    },
    methods: {
      go() {
        this.chuxian = true;
        this.chuxians = false;
      },
      geti(i) {
        this.chuxian = false;
        this.chuxians = true;
        this.nei = this.messages[i].info;
        // this.$refs.chuxians.innerHTML(this.messages[i].info);
        console.log(this.messages[i].info);
      },
      getInfoClass: function(type) {
        if (type === "警告") {
          return "warn";
        } else if (type === "報警") {
          return "alert";
        } else {
          return "info";
        }
      },
      rollText: function() {
        var speed = 50;
        var that = this;
        function Marquee() {
          //    that.rollContainer.offsetHeight - that.rollContainer.scrollTop <=
          //   -(that.rollContainer.scrollTop / 2)
          if (that.message.scrollTop == 80) {
            that.message.scrollTop = 0;
          } else {
            that.message.scrollTop++;
            // console.log(that.message.scrollTop);
            // console.log(that.infobord1.offsetTop);
          }
        }
        var MyMar = setInterval(Marquee, speed); //設置定時器
        //鼠標移上時清除定時器達到滾動停止的目的

        this.message.addEventListener("mouseover", function() {
          clearInterval(MyMar);
        });
        //鼠標移開時重設定時器
        this.message.addEventListener("mouseout", function() {
          MyMar = setInterval(Marquee, speed);
        });
      }
    },
    mounted() {
      this.message = this.$refs.message;
      this.infobord1 = this.$refs.infobord1;
      this.infobord2 = this.$refs.infobord2;
      this.rollText();
    }
  };
</script>
<style lang="scss" scoped>
    .chuxians{
        width: 305px;
        height: 200px;
        position: absolute;
        background: url("../../assets/img/station-detail-bg.png") center no-repeat;
        background-size: 100% 90%;
    }
    .foot{
        margin-left: 20px;
        width: 300px;
        text-align: left;
        position: absolute;
        line-height: 20px;
        bottom: 10%;
    }
    .spans{
        height: 30px;
        vertical-align: middle;
        line-height: 30px;
    }
    .text-info{
        max-width: 240px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        background: none;
    }
    .content-text{
        float: left;
        text-align: left;
        padding-top: 100px;
        margin-left: 20px;
        width: 290px;
        text-indent:35px;
        line-height: 23px;
    }

    .content-issue {
        width: 88%;
        margin: 0 auto;
        /*margin-top: 20px;*/
    }

    .content-issue p {
        color: white;
        width: 100%;
        margin-top: 4px;
        // margin: 5px 12px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        background: #011d49;
        margin-top: 2px;
        padding: 6px 6px 6px 0;
        // border-radius: 4px;
        position: relative;
        white-space: nowrap;
        position: relative;
    }
    .content-issue p span:nth-child(1) {
        // position: absolute;
        // left: 0;
        // top: 0;
        // height: 12px;
    }
    .icon {
        position: absolute;
        right: 10px;
        top: 6px;
        /*width: 95%;*/
    }
    .content-issue p:hover {
        // color: white;
        // margin: 5px 12px;
        // font-size: 14px;
        // cursor: pointer;
        // display: flex;
        // justify-content: flex-start;
        background: #ff5454;
        // margin-top: 2px;
        // padding: 6px;
        // border-radius: 4px;
        // white-space: nowrap;
    }

    .content-issue span {
        color: #fff;
        margin-left: 5px;
        margin-right: 5px;
    }

    .content-issue span.alert {
        color: red;
        background: red;
    }

    .content-issue span.warn {
        color: orange;
        background: orange;
    }
    .content-issue p.warn {
        border-left: orange 4px solid;
    }
    .content-issue p.alert {
        border-left: #ff5454 4px solid;
    }

    .content-issue span.info {
        color: #39d6fe;
        background: #39d6fe;
    }
    .messages {
        position: relative;
        width: 305px;
        height: 200px;
        margin-top: 10px;
        border-bottom: 1px solid #032a69;
        border-top: 1px solid #032a6a;
        overflow: hidden;
    }
</style>

實現的效果

文字列表輪番滾動，鼠標懸停事件，點擊消息可查看詳情