在vue中封裝一個從右至左滾動公告的元件

weixin_33912445發表於2018-10-18
Vue封裝元件

例項：

首先新建一個公用寫元件的檔案下建立新的vue元件Sroller為例

Scroller.vue

佈局區域
  <template>
     <div class="wrap">
      <div id="box">
         <div id="marquee">{{text}}</div>
         <div id="copy" style="display: none;margin-top: -5px"></div>
     </div>
    <div id="node">{{text}}</div>
  </div>
</template>
js區域
     <script type="text/ecmascript-6">
      export default {
      name:'Scroller',
      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 = 10 // 位移距離
         // 設定位移
        setInterval(function () {
        distance = distance - 1
       // 如果位移超過文字寬度，則回到起點
        if (-distance >= width) {
        distance = 16
       }
        box.style.transform = 'translateX(' + distance + 'px)'
      }, 40)
    }
  },
     // 把父元件傳入的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;
color: #005bbe;
     }
 #box {
/*width: 80%;*/
height: 100%;
 }
 #box div {
float: left;
 }
 #marquee {
margin: -5px 16px 0 20px;
}
#node {
position: absolute;
z-index: -99;
top: -99px;
}
</style>
  • 以上就是可以實現滾動的元件

在需要的頁面中呼叫Scroller.vue檔案，如：

Demo.vue

佈局區域
  <template>
     <div class="aa">
       <Scroller :lists="lists" class="scrollContainer left" />
     </div>
</template>
js區域
     <script type="text/ecmascript-6">
      export default {
      components: {Scroller},
      props: ['lists'], // 父元件傳入資料， 陣列形式 [ "aaaa"，"bbbbb"]
       data () {
        return {
         lists:['歡迎大家來一起學習'],
                 }
              }
        }
</script>
樣式區域
  <style scoped>
   /*樣式的話可以寫*/
.scrollContainer {
color: #ffffff;
font-size: 16px;
margin-left: 10px;
width:79%;
height: 30px;
line-height: 30px;
overflow: hidden;
 }
</style>
  • 以上就是可以實現滾動的功能
                                                                   ——————我是晨曦，歡迎大家多多提出意見一起共同進步

相關文章