yaNastia
@yaNastia

Как передать несколько параметров директиве?

Привет, хочу передавать два параметра директиве (стрингу и число): 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)
        })
    },
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
объект передавайте:

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


scrollText(el, { value: { selector, speed } }) {
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы