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>《完》
原文地址:https://blog.csdn.net/QQ_Empire/article/details/134738104
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_41372.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
