Vue3指令实现文字溢出滚动效果，可控制滚动速度

指令使用

    <div style="width:200px;" v-text-roll>滚动的文字滚动的文字滚动的文字滚动的文字滚动的文字滚动的文字</div>

可控制滚动速度，默认滚动速度80px/s,最低动画时长2s

import { Directive } from 'vue'

export default {
  mounted: (el, binding, vNode): void => {
    el.style.overflow = 'hidden'
    el.style.whiteSpace = 'nowrap'
    const speed = binding.value || 80
    el.__span__ = document.createElement('span')
    el.__span__.innerHTML = vNode.children[0].children
    el.innerHTML = ''
    el.appendChild(el.__span__)
    el.isRoll = () => {
      if (el.__span__.offsetWidth > el.offsetWidth) {
        const times = Math.max(
          Number(el.__span__.offsetWidth - el.offsetWidth) / speed,
          2
        )
        el.__span__.style.float = 'left'
        el.__span__.style.animation = `roll-text linear ${times}s normal infinite`
      } else {
        el.__span__.style.float = 'none'
        el.__span__.style.animation = 'none'
      }
    }
    el.__observe__ = new ResizeObserver(el.isRoll)
    el.__observe__.observe(el, { box: 'border-box' })
  },
  updated: (el, _, vNode) => {
    el.__span__.innerText = vNode.children[0].children
    el.isRoll()
  },
  unmounted: (el: any): void => {
    el.__observe__.disconnect()
  },
} as Directive<any, number>