NoticeBar 通知栏组件，封装好的可直接使用

1.项目中遇到NoticeBar效果怎么写
建一个NoticeBar.vue组件
组件代码如下

<template>
  <transition name="fade">
    <!--主要内容-->
    <div class="noticebar" :style="{backgroundColor:data.backround}">
      <div style="margin-left:5px"></div>
      <img v-if="data.icon" :style="{height:data.iconSize?data.iconSize:'16px',width:data.iconSize?data.iconSize:'16px'}" :src=data.icon alt="">
      <div style="margin-right:5px"></div>
      <div ref="back" class="back">
        <span ref="text" :style="{fontSize:data.size?data.size:'16px',color:data.color?data.color:'#f60'}" class="text">{{ data.text?data.text:'通知内容' }}</span>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
    props: {
        options: {
            type: Object,
            default() {
                return {
                    text: '默认'
                };
            }
        }
    },
    data() {
        return {
            speed: this.options.speed, // 速度（单位px/s）
            backWidth: '', // 父级宽度
            backHeight: '', // 父级高度
            wordLength: '', // 文本长度
            state: 1,
            firstAnimationTime: '', // 状态一动画效果
            secondAnimationTime: '', // 状态二动画效果
            data: this.options
        };
    },
    methods: {
        // 获取数据
        getData() {
            let style = document.styleSheets[0];
            let text = this.$refs.text;
            let back = this.$refs.back;
            this.backWidth = back.offsetWidth;
            this.backHeight = back.offsetHeight;
            text.style.lineHeight = this.backHeight + 'px';
            this.wordLength = text.offsetWidth;
            this.ComputationTime(); // 计算时间
            style.insertRule(
                `@keyframes firstAnimation {0%   {left:0px;}100%  {left:-${this.wordLength}px;}}`
            );
            style.insertRule(
                `@keyframes secondAnimation {0%   {left:${this.backWidth}px;}100%  {left:-${this.wordLength}px;}}`
            );
            setTimeout(res => {
                this.changeState();
            }, this.data.delay);
        },
        // 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
        ComputationTime() {
            this.firstAnimationTime = this.wordLength / this.speed;
            this.secondAnimationTime =
                (this.wordLength + this.backWidth) / this.speed;
        },
        // 根据状态切换动画
        changeState() {
            let text = this.$refs.text;
            if (this.state == 1) {
                text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`;
                this.state = 2;
            } else {
                text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
            }
        },
        Listener() {
            let text = this.$refs.text;
            console.log(text);
            text.addEventListener(
                'animationend',
                res => {
                    this.changeState();
                },
                false
            );
        }
    },
    mounted() {
        this.Listener();
        setTimeout(res => {
            this.getData();
        }, 100);
    }
};
</script>
<style lang="less" scoped>
.noticebar {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #fff7cc;
    .icon {
        img {
            height: 100%;
            width: 100%;
        }
    }
    .back {
        overflow: hidden;
        white-space: nowrap;
        margin: 0 auto;
        height: 100%;
        width: 100%;
        position: relative;
        .text {
            position: absolute;
            display: inline-block;
            padding: 2px 0;
        }
    }
}
</style>

调用的时候如下

<template>
  <transition name="fade">
    <div class="wrap">
      <div class="father">
        <noticebar :options=options></noticebar>
      </div>
    </div>
  </transition>
</template>
<script>
import noticebar from './noticebar';
export default {
    components: {
        noticebar
    },
    data() {
        return {
            // noticebar 组件的配置项
            options: {
                text:'关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解
              关于新年假期的调整希望大家可以理解', // 通知内容
                icon:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=735421754,4062673022&fm=26&gp=0.jpg', // 左侧图标(不需要icon不传)
                iconSize: '16px', // icon大小（正方形默认16px）
                size: '16px', // 通知内容文字大小（默认16px）
                color: '#1989fa', // 通知内容文字颜色(默认#f60)
                backround: '#fff7cc', //背景颜色(默认#fff7cc)
                delay: '1000', // 动画延迟时间(默认一秒后开始滚动，单位毫秒)
                speed: '50' // 滚动速率默认50 (px/s)
            }
        };
    }
};
</script>
<style lang="less" scoped>
.wrap {
    .father {
        margin: 150px auto;
        height: 60px;
        width: 100%;
        img {
            height: 100%;
            width: 20px;
        }
    }
}
</style>