Vue组件-广告滚动

1.广告组件

<!-- 
 * 滚动广告
 *@parmas msg 广告内容
 *@parmas height 容器高度
-->
<template>
  <div class="inner" :style="{height:height}">
    <ul 
      :class="{marquee_top:animate}" 
      :style="{marginTop:(animate?`-${height}`: 0)}" 
      @mouseover='stop' 
      @mouseleave='start'
    >
      <li v-for="(item, index) in msg" :key="index" class="txtWrap">
          <a-tooltip>
            <template slot="title">
              {{item}}
            </template>
            <span class="txt">{{item}}</span>
          </a-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Advertising',
  props:{
      msg:{
        type:Array,
        default:() => []
      },
      height:{
        type:String,
        default:'16px'
      }
  },
  data () {
    return {
      animate: false,
      setInTime:'' // 定时器
    }
  },
  components:{
  },
  watch:{
  },
  computed: {
  },
  methods: {
    // 滚动栏滚动
    showMarquee () {
      this.animate = true
      setTimeout(() => {
        this.msg.push(this.msg[0])
        this.msg.shift()
        this.animate = false
      }, 500)
    },
    stop(){
      clearInterval(this.setInTime)
    },
    start(){
      this.setInTime = setInterval(this.showMarquee, 3000)
    }
  },
  mounted () {
    this.setInTime = setInterval(this.showMarquee, 3000)
  },
  destroyed () {
    clearInterval(this.setInTime) // 页面销毁时清除定时器
  },
  
}
</script>

<style lang="less" scoped>
ul,li{ padding:0;margin:0;list-style:none}
.inner{
    width: 100%;
    overflow: hidden;
    li {
      width: 90%;
      font-size: 12px;
      font-weight: 100;
      overflow: hidden;
      text-overflow:ellipsis; 
      white-space: nowrap;
    }
}
.marquee_top {
  transition: all 0.5s;
  margin-top: -16px; /* 容器高度 */
}
</style>

2.父组件使用

　　template

<advertising :msg='msg' height='16px'/>

<script>
import Advertising from '../components/advertising/Advertising.vue'
export default {
  name: 'home',
  data(){
    return{
      msg: ['3车间1号隧道炉电机运转异常！','3车间2号隧道炉电机运转异常！'],
    }
  },
  components:{
    'advertising':Advertising
  },
  computed:{
  },
  mounted () {
  },
  methods: {
  },
}
</script>

今天的文章Vue组件-广告滚动分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/57551.html

Vue组件-广告滚动

相关推荐

发表回复