在nuxt3中自定义指令

最新推荐文章于 2024-05-27 22:07:16 发布

非凡编程

最新推荐文章于 2024-05-27 22:07:16 发布

阅读量286

点赞数 3

分类专栏： nuxt 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gxbmy/article/details/138096588

版权

nuxt 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在根目录下新建 plugins 目录，
并创建v-counter.js文件

// plugins/v-counter.js
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('counter', {
        updated(el, binding) {
            console.log('updated', el, binding)
            el.cur = binding.oldValue
            el.targetNum = binding.value
            el.timer = setInterval(el.jump, 50)
        },
        beforeMount(el, binding) {
            el.jump = () => {
                let step = Math.ceil((el.targetNum - el.cur) / 5)
                el.cur = Math.round(el.cur + step)
                if (Math.abs(el.targetNum - el.cur) < 1) {
                    el.innerText = el.targetNum
                    clearInterval(el.timer)
                    return
                }
                el.innerText = el.cur
            }
        },
        mounted(el, binding) {
            el.cur = 0
            el.targetNum = Number(binding.value)
            el.timer = setInterval(el.jump, 50)
            el.innerText = el.cur
        },
        unmounted(el) {
            el.jump = null
            clearInterval(el.timer)
        }
    })
})