<template> <div class="wrap"> // 外框，固定寬度  <div id="box"> // 內部滾動框   <div id="marquee">{{text}}</div> //展示的文字   <div id="copy"></div> // 文字副本，為了實現無縫滾動  </div>  <div id="node">{{text}}</div> //為了獲取text實際寬度 </div></template><script>export default { name: 'Marquee', props: ['lists'], // 父組件傳入數據， 數組形式 [ "連雨不知春去"，"一晴方覺夏深"] data () {  return {   text: '' // 數組文字轉化后的字符串  } }, 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 // 位移距離//設置位移   setInterval(function () {     distance = distance - 1 // 如果位移超過文字寬度，則回到起點    if (-distance >= width) {     distance = 16    }    box.style.transform = 'translateX(' + distance + 'px)'   }, 20)   } },// 把父組件傳入的arr轉化成字符串 mounted: function () {  for (let i = 0; i < this.lists.length; i++) {   this.text += ' ' + this.lists[i]  } },// 更新的時候運動 updated: function () {  this.move() }}</script><style scoped>// 限制外框寬度，隱藏多余的部分.wrap { overflow: hidden;}// 移動框寬度設置#box { width: 80000%;}// 文字一行顯示#box div { float: left;}// 設置前后間隔#marquee {  margin: 0 16px 0 0;}// 獲取寬度的節點，隱藏掉#node { position: absolute; z-index: -999; top: -999999px;}</style>

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