Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

缺乏、安全感 2021-08-13 12:46 640阅读 0赞

## 一、npm 安装 ##

如果你想安装插件（自己写的）

### 安装 ###

# install dependencies
    npm i marquee-components

### 使用 ###

在main.js引入

import marquee from 'marquee-components'
    Vue.use(marquee );

在页面使用

<template>
      <div id="app">
           <marquee :val="msg"></marquee>
      </div>
    </template>
    <script> export default { name: 'app', data () { return { msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } </script>

`val`后加文字即可，当超过文本容器长度时，触动横向滚动效果。

## 二、直接引入组件 ##

`marquee组件`

<template>
      <div class="marquee-wrap">
        <div class="scroll">
          <p class="marquee">{
       {text}}</p>
          <p class="copy"></p>
        </div>
        <p class="getWidth">{
       {text}}</p>
      </div>
    </template>
    
    <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, mounted () { for (let item of this.val) { this.text += ' ' + item } }, methods: { move () { let maxWidth = document.querySelector('.marquee-wrap').clientWidth let width = document.querySelector('.getWidth').scrollWidth if (width <= maxWidth) return let scroll = document.querySelector('.scroll') let copy = document.querySelector('.copy') copy.innerText = this.text let distance = 0 this.timer = setInterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = 'translateX(' + distance + 'px)' }, 20) } }, beforeDestroy () { clearInterval(this.timer) } } </script>
    
    <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 16px; } p { word-break:keep-all; white-space: nowrap; font-size: 16px; font-family: "微软雅黑 Light"; } .scroll { display: flex; } .getWidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>

其他页面引入marquee组件

<template>
      <div class="container">
            <marquee :val="title"></marquee>
      </div>
    </template>
    <script> import marquee from './marquee' name: 'index', components: { marquee }, data () { return { title: '' } }, </script>