<template>
 <div class="wrap"> // 外框，固定寬度
  <div id="box"> // 內(nèi)部滾動框
   <div id="marquee">{{text}}</div> //展示的文字
   <div id="copy"></div> // 文字副本，為了實現(xiàn)無縫滾動
  </div>
  <div id="node">{{text}}</div> //為了獲取text實際寬度
 </div>
</template>
<script>
export default {
 name: 'Marquee',
 props: ['lists'], // 父組件傳入數(shù)據(jù)， 數(shù)組形式 [ "連雨不知春去"，"一晴方覺夏深"]
 data () {
  return {
   text: '' // 數(shù)組文字轉(zhuǎn)化后的字符串
  }
 },
 methods: {
  move () {
// 獲取文字text 的計算后寬度 （由于overflow的存在，直接獲取不到，需要獨立的node計算）
   let width = document.getElementById('node').getBoundingClientRect().width 
   let box = document.getElementById('box')
   let copy = document.getElementById('copy')
   copy.innerText = this.text // 文字副本填充
   let distance = 0 // 位移距離
//設(shè)置位移
   setInterval(function () { 
    distance = distance - 1
 // 如果位移超過文字寬度，則回到起點
    if (-distance >= width) {
     distance = 16
    }
    box.style.transform = 'translateX(' + distance + 'px)'
   }, 20) 
  }
 },
// 把父組件傳入的arr轉(zhuǎn)化成字符串
 mounted: function () {
  for (let i = 0; i < this.lists.length; i++) {
   this.text += ' ' + this.lists[i]
  }
 },
// 更新的時候運(yùn)動
 updated: function () {
  this.move()
 }
}
</script>
<style scoped>
// 限制外框?qū)挾?，隱藏多余的部分
.wrap {
 overflow: hidden;
}
// 移動框?qū)挾仍O(shè)置
#box {
 width: 80000%;
}
// 文字一行顯示
#box div {
 float: left;
}
// 設(shè)置前后間隔
#marquee {
  margin: 0 16px 0 0;
}
// 獲取寬度的節(jié)點，隱藏掉
#node {
 position: absolute;
 z-index: -999;
 top: -999999px;
}
</style>

data (){
 return {
  lists: [
    '連雨不知春去',
    '一晴方覺夏深'
  ]
 }
}