Привет, хочу передавать два параметра директиве (стрингу и число):
v-scroll-text="'.source-label', 10" как это сделать правильно, не могу нагуглить пример(
Весь код
<li
v-for="source in pageSources"
:key="source"
class="source"
v-scroll-text="'.source-label'"
>
<div class="source-label">
<span class="source-name" @click="selectSource(source)">
{{ source }}
</span>
</div>
</li>
scrollText(el, selector, speed) {
console.log(speed)
let hoverTimeOutFn = null
const timeout = 500
el.addEventListener("mouseenter", (e) => {
const target = e.target
const nameEl = target.querySelector(selector.value)
const textEl = nameEl.firstChild
const nameELRect = nameEl.getBoundingClientRect()
const textElRect = textEl.getBoundingClientRect()
const translateX = Math.min(nameELRect.width - textElRect.width, 0)
const pxPerInterval = 10
const interval = 120
const time = Math.abs((translateX / pxPerInterval) * interval)
clearTimeout(hoverTimeOutFn)
hoverTimeOutFn = setTimeout(() => {
textEl.style.display = "inline-block"
textEl.style.transition = `transform ${time}ms linear`
textEl.style.transform = `translateX(${translateX}px)`
}, timeout)
})
el.addEventListener("mouseleave", (e) => {
const target = e.target
const nameEl = target.querySelector(selector.value)
const textEl = nameEl.firstChild
textEl.style.transition = `transform ${timeout}ms linear`
textEl.style.transform = ""
clearTimeout(hoverTimeOutFn)
hoverTimeOutFn = setTimeout(() => {
textEl.style.display = "initial"
}, timeout)
})
},
