扯皮

现在有很多自定义指令封装好可实现的功能，都能从hooks函数中找到，例如大名鼎鼎的VueUse，大部分功能都有。

至于为什么写这篇文章呢，本着复盘记录vue技术点加上业务当中涉及到的一部分需求（要是用到第三方插件岂不是大材小用了），主要还是复盘一波理论上的内容，便于mianxi~（懂得都懂），于是乎就写下一篇文章作为经验分享个人参考使用~

构思

简简单单就拿常见的【复制】功能来说，利用到vue的特性是非常棒的。

举个栗子：假设我们需要展示的一些数据或者链接来说，根据用户角度考虑，一定是体验度越高充分表明这家业务水平做的优秀~

展示

介于我用的是Vue3 Ts Vite Element-Plus的技术栈，运用到尤大极力推荐的语法糖写法（嘎嘎香），

在根目录下创建directives指令文件夹，声明directive.ts作为全局指令存储文件，

为什么这么做呢？因为鉴于到后期的维护性能来说，

放在全局较为妥当，当然！局部的指令也可以放在这里噢~ 【具体需求具体使用】微信图片_20240328092150.png

main.ts 挂载全局指令

import myDirective from "@/directives/directive"
myDirective(app)
app.mount("#app");

directive.ts 全局指令

const myDirective = (app: any) => {
    app.directive("copy", {
        mounted: (el: any, binding:any, {value}: { value: string },) => {
            el.value = value
            el.handler = () => {
                if (!el.value) return ElMessage({message: "Nothing to copy!", type: "warning"})
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(el.value)
                        .then(() => {
                            return ElMessage({message: "Copy successfully!", type: "success"})
                        })
                        .catch(() => {
                            return ElMessage({message: "Replication failed!", type: "error"})
                        })
                } else {
                    let textarea = document.createElement('textarea')
                    textarea.readOnly = true
                    textarea.style.position = 'absolute'
                    textarea.style.left = '-9999px'
                    textarea.value = el.value
                    document.body.appendChild(textarea)
                    textarea.select()
                    const result = document.execCommand('Copy')
                    if (result) ElMessage({message: "Copy successfully!", type: "success"})
                    else ElMessage({message: "Replication failed!", type: "error"})
                    document.body.removeChild(textarea)
                }
            }
            el.addEventListener('click', el.handler)
        },
        updated: (el: any, {value}: { value: string }) => el.value = value,
        unmounted: (el: any) => el.removeEventListener('click', el.handler)
    })
}

demo.vue 使用指令

<template>
  <div class="tw-tag-slide flex items-center gap-2">每日一文
    <i-ep-CopyDocument class="text-[#000] cursor-pointer" v-copy="time"/>
  </div>
</template>
<script setup lang="ts">
import {getHour} from "@/utils/globaltime";
const time = getHour();
</script>

<style scoped lang="scss">

</style>

效果

End

看似较为复杂难懂的东西只需一个demo即可快速理解上手，这里是小李的李li，若对您有帮助，记得点赞收藏，给个鼓励！

Vue3自定义指令解析，快拿去收藏使用一波~😎

扯皮

构思

展示

效果

End