【文字横向滚动】封装文字横向滚动组件，强制文字不换行

1.强制文字不换行

使用文字

  我是好多文字  // 不遇到br换行标签不换行

2、template

// 注意：div并没有给宽度，所以使用组件时组件的父盒子需要有宽度和overflow: hidden;
 
            {{text}}

3、js

export default {
        name: "textScroll",
        props:{
            text:{ //这是需要显示的文字
                default:''
            },
            index:{
                type: Number, // 一般嵌在v-for里面，所以index表示是第几个滚动组件
                default:0
            }
        },
        data(){
            return{
                showScroll:false,
            }
        },
        mounted() {
            this.scroll()
        },

        methods:{
            scroll(){
                let parent = this.$refs['textParent'+this.index] 
                let text = this.$refs['scrollText'+this.index]
                    if(parent.offsetWidth < text.offsetWidth){ // 判断宽度是否需要文字滚动
                        this.showScroll = true;
                    }else{
                        this.showScroll = false;
                    }
                parent.style.opacity = 1;// 显示组件
            }
        }
    }

4、滚动CSS

   /*字幕滚动*/
   .textParent{
       opacity: 0;// 先透明不显示
   }
   .scroll{
       position: relative;
       width: 100%;
       overflow: hidden;
   }
   .scroll nobr{
       display: inline-block;
       animation: scroll 9s linear infinite; // 滚动时间
   }
   .scroll nobr:after{
       content: attr(data-text);
   }
   @keyframes scroll {
       from {
           transform: translateX(0);
           margin-left: 100%; //调整一开始文字显示位置
       }
       to {
           transform: translateX(-100%);
           margin-left: 0;
       }
   }

5、父组件调用滚动组件

先引入组件