zoukankan      html  css  js  c++  java
  • 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{
         100%;
        overflow: hidden;
        li {
           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'/>

      js

    <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>
  • 相关阅读:
    如何复用网页
    sap
    学习方法
    spring + ehcache 实例
    200个 jquery插件
    vs 示例代码浏览器 搜索
    struts jquery 整合
    eclipse clean 后clease 为空
    mvc相关
    css 框架
  • 原文地址:https://www.cnblogs.com/CGWTQ/p/15543734.html
Copyright © 2011-2022 走看看