vue3自定义指令-文本超出宽度滚动

 fontScroll.ts 指令文件

import { Directive } from 'vue'

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
export default {
    // 可控制滚动速度，默认滚动速度20px/s,最低动画时长2s
    mounted: (el, binding, vNode): void => {
        el.style.overflow = 'hidden'
        el.style.whiteSpace = 'nowrap'
        const speed = binding.value || 20
        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,
                    6
                )
                let offsetleft = el.__span__.offsetWidth-100;
                let mymove = `@keyframes myAnimation { 
                    0% { transform: translate(0px, 0); } 
                    100% { 
                        transform: translate(-${offsetleft}px, 0);
                        animation-delay: 2s; 
                    } 
                }`;
                const style:any = document.createElement('style');
                style.setAttribute('type', 'text/css')
                document.head.appendChild(style)
                style.sheet.insertRule(mymove, 0)
                el.__span__.style.float = 'left';
                let num = randomInt(1,4);
                console.log(num)
                el.__span__.style.animation = `myAnimation linear ${times}s ${num}s infinite normal forwards`

            } 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>

main.ts 引入&全局注入

import directives from '@/script/utils/fontScrall'

app.directive('textRoll',directives)

页面中使用 v-text-roll

<div v-text-roll> 11月27日上午，王思聪现身山东泰安，以北京寰聚商业管理有限公司
董事长身份，出席了泰安某文旅项目签约活动。 </div>

《完》