list列表自己滾動谋竖,鼠標進入停止?jié)L動離開繼續(xù)滾動

<!-- 實時告警 -->
<template>
<div class="readTime-alarm-mode-box">
  <div class="readTime-alarm-mode-box-con" @mousemove="testMove" @mouseleave="testMend" ref="roll">
    <div class="readTime-alarm-mode-box-con-node" v-for="n in 20">
      <div class="readTime-alarm-mode-box-con-node__l">
        <div class="readTime-alarm-mode-box-con-node__l-icon"></div>
        <div class="readTime-alarm-mode-box-con-node__l-label">廠區(qū)東門 ,發(fā)現張三未帶安全帽</div>
      </div>
      <div class="readTime-alarm-mode-box-con-node__time">2024-03-13 15:10</div>
    </div>
  </div>

</div>
</template>
<script lang='ts' setup>
import { ref, reactive, nextTick,onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()

let timer = ref<any>(null)
let roll = ref(null)

// 鼠標移動事件
const testMove = ()=>{
  clearTimeout(timer.value)
}

// 鼠標離開事件
const testMend = ()=>{
  start()
}
//開啟定時器方法
const start = () => {
  //清除定時器
  clearTimeout(timer.value)
  //定時器觸發(fā)周期
  let speed = ref(75)
  timer.value = setInterval(MarqueeTest, speed.value)
}
const MarqueeTest = () => {
  let test1:any = roll.value
  //判斷組件是否渲染完成
  if(!test1) return 
  if (test1.offsetHeight&&test1.offsetHeight == 0) {
    test1 = roll.value
  } else {
    //如果列表數量過少不進行滾動
    if(test1.childNodes.length>4){
      //組件進行滾動
      test1.scrollTop += 1
      //判斷滾動條是否滾動到底部
      if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
        //獲取組件第一個節(jié)點
        let a = test1.childNodes[0]
        //刪除節(jié)點
        test1.removeChild(a)
        //將該節(jié)點拼接到組件最后
        test1.append(a)
      }
    }else{
      clearTimeout(timer.value)
    }
  }
}

onUnmounted(()=>{
  //清除定時器
  clearTimeout(timer.value)
})

nextTick(()=>{
    start()
})

</script>
<style scoped lang='scss'>
.readTime-alarm-mode-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .readTime-alarm-mode-box-top {
    width: 100%;
    height: 60px;
    display: flex;
    .readTime-alarm-mode-box-top-node {
      flex: 1;
      background-color: #2e62c9;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .readTime-alarm-mode-box-top-node-value {
        font-size: 18px;
        color: #66FFFF;
      }
      &:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .readTime-alarm-mode-box-con {
    margin-top: 15px;
    flex: 1;
    height: 0;
    overflow: auto;
    font-size: 13px;
    .readTime-alarm-mode-box-con-node {
      width: 100%;
      padding: 2px 0;
      padding-right: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .readTime-alarm-mode-box-con-node__l {
        flex: 1;
        display: flex;
        align-items: center;
        .readTime-alarm-mode-box-con-node__l-icon {
          width: 35px;
          height: 35px;
          background: url('@/assets/images/alarm/real-time-alarm-item-icon.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 3px;
        }
        .readTime-alarm-mode-box-con-node__l-label {
          width:165px;//定寬 
          overflow: hidden; 
          text-overflow: ellipsis; 
          white-space: nowrap; 
          &:hover {
            flex: 1;
            white-space: wrap !important; 
          }
        }

      }
      .readTime-alarm-mode-box-con-node__time {
        font-size: 12px;
      }
      &:hover {
        cursor: pointer;
        background-color: rgba(25, 48, 82, 0.8);
      }
    }
  }
}
</style>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末壮吩,一起剝皮案震驚了整個濱河市蟆技,隨后出現的幾起案子,更是在濱河造成了極大的恐慌沿侈,老刑警劉巖闯第,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異缀拭,居然都是意外死亡咳短,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門蛛淋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咙好,“玉大人,你說我怎么就攤上這事褐荷」葱В” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長葵第。 經常有香客問我绘迁,道長,這世上最難降的妖魔是什么卒密? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮棠赛,結果婚禮上哮奇,老公的妹妹穿的比我還像新娘。我一直安慰自己睛约,他們只是感情好鼎俘,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辩涝,像睡著了一般贸伐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上怔揩,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天捉邢,我揣著相機與錄音,去河邊找鬼商膊。 笑死伏伐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的晕拆。 我是一名探鬼主播藐翎,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼实幕!你這毒婦竟也來了吝镣?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤昆庇,失蹤者是張志新(化名)和其女友劉穎末贾,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體凰锡,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡未舟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了掂为。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裕膀。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖勇哗,靈堂內的尸體忽然破棺而出昼扛,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布抄谐,位于F島的核電站渺鹦,受9級特大地震影響,放射性物質發(fā)生泄漏蛹含。R本人自食惡果不足惜毅厚,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浦箱。 院中可真熱鬧吸耿,春花似錦、人聲如沸酷窥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蓬推。三九已至妆棒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沸伏,已是汗流浹背糕珊。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留馋评,地道東北人放接。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像留特,于是被迫代替她去往敵國和親纠脾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容