一个vue3实时时间的自定义指令

最新推荐文章于 2024-08-21 09:10:49 发布

深情的狼

最新推荐文章于 2024-08-21 09:10:49 发布

阅读量352

点赞数

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

本文链接：https://blog.csdn.net/xu_yi_hang/article/details/128626831

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

一、代码

二、效果

总结

一、代码

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

    <div id="app">
        <p v-time></p>
        <p v-time="'HH:mm'"></p>
        <p v-time="'YYYY-MM-DD HH:mm:ss'"></p>
        <p v-time="'hh:mm:ss'"></p>
        <p v-time="'YYYY年MM月DD日HH时mm分'"></p>
    </div>

    <script>
        const app = Vue.createApp({})

        app.directive('time', {
            mounted(el, binding) {
                if ('$TIMEVALLIST' in window) {
                    const timeList = window['$TIMEVALLIST']
                    window['$TIMEVALLIST'][timeList.length] = setInterval(() => {
                        el.innerText = dayjs(new Date()).format(binding.value || 'YYYY/MM/DD HH:mm:ss')
                    }, 1000)
                    el.setAttribute('time_val_index', timeList.length)
                } else {
                    window['$TIMEVALLIST'] = []
                    window['$TIMEVALLIST'][0] = setInterval(() => {
                        el.innerText = dayjs(new Date()).format(binding.value || 'YYYY/MM/DD HH:mm:ss')
                    }, 1000)
                    el.setAttribute('time_val_index', 0)
                }
            },
            unmounted(el) {
                clearInterval(window['$TIMEVALLIST'][+el.getAttribute('time_val_index')])
            }
        })

        app.mount('#app')
    </script>
</body>