当文本超宽时 左右滚动 通知消息

<template>
    <div class="box" style="width:100%;">
      <p :class="{'scroll':(options.isRoll || getContentLength(options.text) > options.MaxTength)}">{{options.text}}</p>
    </div>
</template>

<script>
export default {
    name: 'DfcvDtmsAppTaskschedule',

    components: {  },

    directives: {  },

    data() {
       return {
           text:"",
       }
    },

    mounted() {
        
    },
    
    props:{
        options:{
            type:Object,
            default:() => {
                return {
                    text:"无内容无",//文本内容
                    isRoll:false,//长度多少都滚动
                    MaxTength:10//长度大于某个值滚动
                }
            }
        }
    },

    computed:{
        
    },

    methods: {
        //获取字的长度
        getContentLength(text){
            let str = ""
            str = text
            if(str){
              return str.length
            }else {
                return 0
            }
        }
    }
};
</script>

<style scoped>
.box .scroll {
    animation: 8s wordsLoop linear infinite normal;
  }

  @keyframes wordsLoop {
    0% {
      transform: translateX(140px);
      -webkit-transform: translateX(140px);
    }

    100% {
      transform: translateX(-150%);
      -webkit-transform: translateX(-150%);
    }
  }

  @-webkit-keyframes wordsLoop {
    0% {
      transform: translateX(140px);
      -webkit-transform: translateX(140px);
    }

    100% {
      transform: translateX(-150%);
      -webkit-transform: translateX(-150%);
    }
  }

  .box {
    width:100%;
    height:100%;
    display: flex;
    overflow: hidden;
    color:#FFF;
  }

  p{
    text-align:center;
    white-space: nowrap;
    margin:0;
   }
</style>