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】

相关推荐
BillKu18 分钟前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
VueVirtuoso2 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
祈祷苍天赐我java之术2 小时前
Vue 整体框架全面解析
前端·javascript·vue.js
清风细雨_林木木4 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu5 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
前端农民工ws6 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育6 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿8 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11258 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_9 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式