vue-cli3.x 在vue中使用走马灯，文本滚动

太过爱你忘了你带给我的痛 2022-10-15 10:46 244阅读 0赞

安装插件vue-marquee-text-component

npm install vue-marquee-text-component 
    
    or
    
    yarn add vue-marquee-text-component

在main.js中使用

// in your main.js or similar file
    import Vue from 'vue'
    import MarqueeText from 'vue-marquee-text-component'
     
    Vue.component('marquee-text', MarqueeText)

或者在单个文件中使用

// HelloWorld.vue
    import MarqueeText from 'vue-marquee-text-component'
     
    export default {
      name: 'HelloWorld',
      components: {
        MarqueeText
      }
    }

<marquee-text>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
    </marquee-text>
     
    
    <marquee-text :repeat="10">
      Short text =(
    </marquee-text>
     
    
    <marquee-text :duration="30">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
    </marquee-text>

传参props

<table> 
 <thead> 
  <tr> 
   <th>Prop</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>duration</td> 
   <td>Number</td> 
   <td>15</td> 
   <td>Animation Duration</td> 
  </tr> 
  <tr> 
   <td>repeat</td> 
   <td>Number</td> 
   <td>2</td> 
   <td>Number of repeat the Slot (It's important for to short content)</td> 
  </tr> 
  <tr> 
   <td>paused</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>The property specifies whether the animation is running or paused</td> 
  </tr> 
  <tr> 
   <td>reverse</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>Set animation-direction to reverse</td> 
  </tr> 
 </tbody> 
</table>

实际使用中 如果出现滚动时候内部遮挡滚动 加一段css

.marquee-text-wrap {
      overflow: visible;
    }