How to pass multiple parameters to the Directive?

Hi, I want to pass two parameters to the Directive (string and number): v-scroll-text="'.source-label', 10" how to do it correctly, I can not naguglit example(

All the code

<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)
})
 },
April 19th 20 at 12:30
1 answer
April 19th 20 at 12:32
Solution
object pass:

v-scroll-text="{ selector: '.source-label', speed: 10 }"


scrollText(el, { value: { selector speed } }) {
 ...
exactly, thank you!) - Maximus commented on April 19th 20 at 12:35

Find more questions by tags Vue.jsJavaScript