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

扯皮

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

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

构思

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

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

展示

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

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

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

放在全局较为妥当,当然!局部的指令也可以放在这里噢~ 【具体需求具体使用】

main.ts 挂载全局指令

TypeScript 复制代码
import myDirective from "@/directives/directive"
myDirective(app)
app.mount("#app");

directive.ts 全局指令

TypeScript 复制代码
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 使用指令

html 复制代码
<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,若对您有帮助,记得点赞收藏,给个鼓励!公zong号:【小李的李li】

相关推荐
加洛斯43 分钟前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
Never_Satisfied2 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js
一嘴一个橘子2 小时前
useTemplateRef Vue3.5
javascript·vue.js
PHP武器库2 小时前
从零到一:用 Vue 打造一个零依赖、插件化的 JS 库
前端·javascript·vue.js
excel2 小时前
深入理解 Slot(插槽)
前端·javascript·vue.js
工业互联网专业4 小时前
基于大数据的学习资源推送系统的设计与实现 _django
vue.js·python·django·毕业设计·源码·课程设计·学习资源推送系统
記億揺晃着的那天12 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
真的想不出名儿13 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
Queen_sy14 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
技术钱16 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json