基于Vue3+TypeScript内置指令和封装6个常用的自定义指令

最新推荐文章于 2024-06-26 14:51:29 发布
最新推荐文章于 2024-06-26 14:51:29 发布
阅读量4.7k 收藏 30
点赞数 7
文章标签： vue.js 前端 javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42365152/article/details/124633877
版权

 内置指令

Vue3逐渐的成熟并且渐渐的被大众选择，开发过程中如果想要提高效率以及技术要点，可以尝试封装一些公共的方法或者指令，内置的核心功能默认提供了一些内置指令例如：

 <!-- v-text -->
  <p v-text="text"></p>

  <!-- v-html -->
  <p v-html="html"></p>

  <!-- v-show -->
  <p v-show="show"></p>

  <!-- v-if组合 -->
  <p v-if="showIf"></p>
  <p v-else-if="!showIf"></p>
  <p v-else></p>

  <!-- v-for -->
  <p v-for="item in array" :key="item">{{ item }}</p>

  <!-- v-on缩写@ -->
  <el-button type="primary" @click="onClick"> 按钮 </el-button>

  <!-- v-bind缩写: -->
  <img v-bind:src="imageSrc" />

  <!-- v-model -->
  <el-input v-model="value" />

  <!-- v-slot缩写# -->
  <base-layout>
    <template v-slot:header></template>
  </base-layout>

  <!-- v-pre -->
  <p v-pre></p>

  <!-- v-cloak -->
  <div v-cloak>{{ cloak }}</div>

  <!-- v-once -->
  <p v-once></p>

 自定义指令

在开发过程中，有的情况下需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。Vue自定义指令分为全局注册和局部注册两种方式，注册全局指令的方式是通过App.directive(key,directive),然后在main.js文件引入并调用。 新建directives文件夹下新建modules文件夹和index.ts文件，批量注册指令,index.ts文件。

// import directives
import { App } from "vue";
import copy from "./modules/copy";
import waterMarker from "./modules/waterMarker";
import draggable from "./modules/draggable";
import debounce from "./modules/debounce";
import throttle from "./modules/throttle";
import longpress from "./modules/longpress";

const directivesList: any = {
    // Custom directives
    copy,
    waterMarker,
    draggable,
    debounce,
    throttle,
    longpress
};

const directives = {
    install: function (app: App<Element>) {
        Object.keys(directivesList).forEach(key => {
            // 注册自定义指令
            app.directive(key, directivesList[key]);
        });
    }
};

export default directives;

 在main.js引入并调用

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import directives from '@/directives/index.ts'
import router from './routers/index.js'

const app = createApp(App)
app.use(ElementPlus, {
    size: 'small',
    zIndex: 3000,
    locale: zhCn
})

指令定义函数提供了几个钩子函数(可选):

  • created:在绑定元素的attribute或事件监听器被应用之前调用。
  • beforeMount: 当指令第一次绑定到元素并且在挂载父组件之前调用。
  • mounted: 在绑定元素的父组件被挂载后调用。
  • beforeUpdate: 在更新包含组件的VNode之前调用。
  • updated: 在包含组件的VNode及其子组件的VNode更新后调用。
  • beforeUnmount: 在卸载绑定元素的父组件之前调用。
  • unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。

v-copy复制指令 

     功能：通过鼠标点击复制绑定的文本内容，可以绑定按钮一起使用。

  1. 定义封装点击函数handleClick手动创建input标签且赋值，并让标签隐藏。
  2. 将input标签插入到body内，并复制其内容后将input框从body中移除。
  3. 在第一次调用时绑定事件，和解绑时移除事件。
/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
 import type { Directive, DirectiveBinding } from "vue";
 import { ElMessage } from "element-plus";
 interface ElType extends HTMLElement {
     copyData: string | number;
     __handleClick__: any;
 }
 const copy: Directive = {
     mounted(el: ElType, binding: DirectiveBinding) {
         el.copyData = binding.value;
         el.addEventListener("click", handleClick);
     },
     updated(el: ElType, binding: DirectiveBinding) {
         el.copyData = binding.value;
     },
     beforeUnmount(el: ElType) {
         el.removeEventListener("click", el.__handleClick__);
     }
 };
 
  function handleClick(this: any) {
    const input = document.createElement("input");
    input.style.opacity = '0'
    input.value = this.copyData.toLocaleString();
    document.body.appendChild(input);
    input.select();
    document.execCommand("Copy");
    document.body.removeChild(input);
    ElMessage({
        type: "success",
        message: "复制成功"
    });
  }
 
 export default copy;

 使用：只需在DOM节点上绑定v-copy的文本内容，通过鼠标点击就可以赋值其内容到粘贴板上。

<template>
    <div class="content-box">
        <span class="text">复制指令</span>
        <div class="box-content">
            <el-input placeholder="请输入内容" v-model="data">
                <template #append>
                    <el-button v-copy="data">复制</el-button>
                </template>
            </el-input>
        </div>
    </div>
</template>

<script setup lang="ts" name="copyDirect">
import { ref } from "vue";

const data = ref<string>("我是被复制的内容！！！");

</script>

v-debounce防抖指令

功能：多次点击按钮会多次触发事件，如果是在表单提交就会多次调用后端接口，就会达不到需求，防止多次触发。

  1. 通过监听点击事件设置定时器，设置几秒内才触发点击事件，通过绑定和解绑移除事件。
/**
 * v-debounce
 * 按钮防抖指令，可自行扩展至input
 * 接收参数：function类型
 */
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
  __handleClick__: () => any;
}
const debounce: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== "function") {
      throw "callback must be a function";
    }
    let timer: NodeJS.Timeout | null = null;
    el.__handleClick__ = function () {
      if (timer) {
        clearInterval(timer);
      }
      timer = setTimeout(() => {
        binding.value();
      }, 500);
    };
    el.addEventListener("click", el.__handleClick__);
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener("click", el.__handleClick__);
  }
};

export default debounce;

使用：只需在DOM节点上绑定v-debounce及回调函数即可。

<template>
  <div class="content-box">
    <span class="text">防抖指令</span>
    <el-button type="primary" v-debounce="debounceClick">防抖按钮 (0.5秒后执行)</el-button>
  </div>
</template>

<script setup lang="ts" name="debounceDirect">
import { ElMessage } from 'element-plus'
const debounceClick = () => {
  ElMessage.success('我是防抖按钮触发的事件 🍍🍓🍌')
}
</script>

v-draggable拖拽指令

功能：通过鼠标按住在页面可视区域内任意拖拽元素。

  1. 设置需要拖拽的元素为absolute，其父元素为relative。
  2. 鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
  3. 鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值。
  4. 鼠标松开(onmouseup)时完成一次拖拽。
import type { Directive } from "vue";
interface ElType extends HTMLElement {
    parentNode: any;
}
const draggable: Directive = {
    mounted: function (el: ElType) {
        el.style.cursor = "move";
        el.style.position = "absolute";
        el.onmousedown = function (e) {
            let disX = e.pageX - el.offsetLeft;
            let disY = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                let x = e.pageX - disX;
                let y = e.pageY - disY;
                let maxX = parseInt(window.getComputedStyle(el.parentNode).width) - parseInt(window.getComputedStyle(el).width);
                let maxY = parseInt(window.getComputedStyle(el.parentNode).height) - parseInt(window.getComputedStyle(el).height);
                if (x < 0) {
                        x = 0;
                } else if (x > maxX) {
                        x = maxX;
                }

                if (y < 0) {
                        y = 0;
                } else if (y > maxY) {
                        y = maxY;
                }
                el.style.left = x + "px";
                el.style.top = y + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            };
        };
    }
};

使用：只需在DOM节点上绑定v-draggable即可。

<template>
    <div class="content-box">
        <span class="text">拖拽指令</span>
        <div v-draggable class="drag-box flx-center text">我可以拖拽哦~</div>
    </div>
</template>

<style scoped lang="scss">
.content-box {
   height: 500px;
   width: 1200px;
   position: relative;
    .drag-box {
        position: absolute;
        top: 110px;
        height: 300px;
        width: 300px;
        background: #dfe6e9;
        color: #b2bec3;
        border-radius: 50%;
    }
}
</style>

v-longpress长按指令

功能：通过鼠标长按页DOM节点触发回调执行所需的功能。

  1. 通过监听鼠标的点击事件和移动事件设置定时器，设置几秒内才触发回调函数，如果鼠标长按在时间内则取消事件监听。
**
 * v-longpress
 * 长按指令，长按时触发事件
 */
 import type { Directive, DirectiveBinding } from "vue";

 const directive: Directive = {
     mounted(el: HTMLElement, binding: DirectiveBinding) {
         if (typeof binding.value !== "function") {
             throw "callback must be a function";
         }
         // 定义变量
         let pressTimer: any = null;
         // 创建计时器（ 2秒后执行函数 ）
         const start = (e: any) => {
             if (e.button) {
                 if (e.type === "click" && e.button !== 0) {
                     return;
                 }
             }
             if (pressTimer === null) {
                 pressTimer = setTimeout(() => {
                     handler(e);
                 }, 1000);
             }
         };
         // 取消计时器
         const cancel = () => {
             if (pressTimer !== null) {
                 clearTimeout(pressTimer);
                 pressTimer = null;
             }
         };
         // 运行函数
         const handler = (e: MouseEvent | TouchEvent) => {
             binding.value(e);
         };
         // 添加事件监听器
         el.addEventListener("mousedown", start);
         el.addEventListener("touchstart", start);
         // 取消计时器
         el.addEventListener("click", cancel);
         el.addEventListener("mouseout", cancel);
         el.addEventListener("touchend", cancel);
         el.addEventListener("touchcancel", cancel);
     }
 };
 
 export default directive;

使用：只需在DOM节点上绑定v-longpress及回调函数即可

<template>
  <div class="content-box">
    <span class="text">长按指令</span>
    <el-button type="primary" v-longpress="longpress" >长按2秒触发事件</el-button>
  </div>
</template>

<script setup lang="ts" name="longpressDirect">
import { ElMessage } from 'element-plus'
const longpress = () => {
  ElMessage.success('长按事件触发成功')
}
</script>

v-throttle节流指令

功能：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。

  1. 第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮。
  2. 将需要触发的方法绑定在指令上。
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
    __handleClick__: () => any;
    disabled: boolean;
}
const throttle: Directive = {
    mounted(el: ElType, binding: DirectiveBinding) {
        if (typeof binding.value !== "function") {
            throw "callback must be a function";
        }
        let timer: NodeJS.Timeout | null = null;
        el.__handleClick__ = function () {
            if (timer) {
                clearTimeout(timer);
            }
            if (!el.disabled) {
                el.disabled = true;
                binding.value();
                timer = setTimeout(() => {
                        el.disabled = false;
                }, 1000);
            }
        };
        el.addEventListener("click", el.__handleClick__);
    },
    beforeUnmount(el: ElType) {
        el.removeEventListener("click", el.__handleClick__);
    }
};

export default throttle;

使用：给 Dom 加上 v-throttle 及回调函数即可。

<template>
  <div class="content-box">
    <span class="text">节流指令 🍇🍇🍇🍓🍓🍓</span>
    <el-button type="primary" v-throttle="throttleClick">节流按钮 (每隔1S秒后执行)</el-button>
  </div>
</template>

<script setup lang="ts" name="throttleDirect">
import { ElMessage } from 'element-plus'
const throttleClick = () => {
  ElMessage.success('我是节流按钮触发的事件 🍍🍓🍌')
}
</script>

v-waterMarker水印指令

功能：给页面添加背景水印。

  1. 使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
  2. 将其设置为背景图片，从而实现页面或组件水印效果
import type { Directive, DirectiveBinding } from "vue";
const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
    // 水印文字，父元素，字体，文字颜色
    let can: HTMLCanvasElement = document.createElement("canvas");
    parentNode.appendChild(can);
    can.width = 200;
    can.height = 150;
    can.style.display = "none";
    let cans = can.getContext("2d") as CanvasRenderingContext2D;
    cans.rotate((-20 * Math.PI) / 180);
    cans.font = font || "16px Microsoft JhengHei";
    cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
    cans.textAlign = "left";
    cans.textBaseline = "Middle" as CanvasTextBaseline;
    cans.fillText(str, can.width / 10, can.height / 2);
    parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
};

const waterMarker = {
    mounted(el: DirectiveBinding, binding: DirectiveBinding) {
        addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
    }
};

export default waterMarker;

使用：设置水印文案，颜色，字体大小即可。

<template>
  <div
    class="content-box"
    v-waterMarker="{
      text: 'Watermark Direct',
      textColor: 'rgba(180, 180, 180, 0.6)'
    }"
  >
    <span class="text">水印指令</span>
  </div>
</template>

<script setup lang="ts" name="watermarkDirect"></script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 600px;
}
</style>

通过这些常用的指令结合需求可以独立封装符合自己功能的自定义指令，所有代码都不是万能，唯有结合实际才能解决万万不能的需求，希望此文章对浏览者有所启发！！！

天天一码
关注
  • 7
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue3+Typescript日历组件
07-29
首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...
基于Vue3和TypeScript的日历日程组件设计源码
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
vue3 + ts + vite,自定义指令，使用权限全局控制按钮显示隐藏
m0_67624022的博客
03-28 1348
1. 创建自定义指令 在 index.ts 文件中创建自定义指令。这个指令将根据用户权限控制按钮的显示和隐藏。 2. 在main.ts中全局注册指令 在 main.ts 文件中全局注册自定义指令。 3. 在其他页面使用指令 在其他页面的模板中，使用 v-hasPermi 指令来控制按钮的显示和隐藏。例如：
Vue + TS 封装全局自定义指令
三拾的博客
07-03 873
在 Vue 中，我们可以使用方法来创建一个自定义指令。该方法接受两个参数：指令名称和一个包含指令选项的对象。// 指令绑定时的操作 } , inserted(el , binding , vnode) {// 指令插入到 DOM 时的操作 } , update(el , binding , vnode , oldVnode) {// 指令所在组件的 VNode 更新时的操作 } , componentUpdated(el , binding , vnode , oldVnode) {
vue3 实现自定义指令封装 --- 通俗易懂
weixin_48420104的博客
06-04 915
1.1 在<script setup>定义组件内的指令，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。
vue超好用的自定义指令封装
余白x的博客
11-22 533
vue自定义指令 自定义防抖指令 自定义节流指令 自定义复制指令 自定义长按指令 自定义拖拽指令 自定义水印指令 自定义旋转指令
vue+typeScript 自定义指令
m0_38125257的博客
01-13 281
vue+typeScript+自定义指令 以div拖住移动为例
VUE3 自定义标签/v-if 按钮权限控制
qq_41834408的博客
04-18 3064
1、自定义标签 使用了：vue3directive 把数据放在store中，在切换路由时（单点嵌入），也可以在登陆时加载Store数据； 加载数据JS如下 export function getUserBtnInfo() { let createUser= ""; if (window.parent.getUserName) { createUser=window.parent.getUserName(); } return new Promise((resol
vue 自定义指令 自己实现 v-if 和 v-show
^_^
08-01 4331
通过自定义指令实现v-if 和 v-show ，v-show 就是把当前元素 设置display:none / block 来控制显隐，而 v-if 来把当前页面元素是否删除
最新完整Vite+Vue3+TypeScript项目实战.zip
05-10
最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新...
基于Vue3+TypeScript+Vite警情监测系统源码.zip
03-07
基于Vue3+TypeScript+Vite警情监测系统源码.zip下载即用基于Vue3+TypeScript+Vite警情监测系统源码.zip下载即用基于Vue3+TypeScript+Vite警情监测系统源码.zip下载即用基于Vue3+TypeScript+Vite警情监测系统源码.zip...
【Vue3】自定义指令
m0_55333789的博客
10-13 595
【Vue3】自定义指令
vue typescript 发送倒计时指令、vue自定义指令封装
博客简介
07-15 3688
main.ts注册全局指令： //main.ts import * as directives from '@/directives/directives'; // 注册全局指令 Object.keys(directives).forEach(key => { Vue.directive(key, (directives as { [key: string]: Dire...
Vue 3 中 v-if 和 v-show 指令实现的原理（源码分析）
热门推荐
五柳
01-17 1万+
前言 又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。 所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～ v-if 在之前 【Vue3 源码解读】从编译过程，理解静态节点提升 一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这
在Vue 3中使用TypeScript一些高级用法示例
最新发布
极客神殿
06-26 568
使用TypeScript定义自定义指令时，可以确保指令参数和值的类型安全。el.focus();},
vue3+ts 自定义hook函数
yyh231366的博客
06-03 756
首先在src下建立一个文件夹,命名:userhookhandle在文件夹下面建立usermousehandles.tsimport { onBeforeUnmount, onMounted, ref } from 'vue'export default function () { const x = ref(1) const y = ref(1) const clickhandler = (event:MouseEvent) => { x.value = event.pageX y.val
Vue3+TypeScript从入门到精通系列之：TypeScript函数类型
zhengzaifeidelushang的博客
02-10 834
Vue3+TypeScript从入门到精通系列之：Typescript函数类型一、TypeScript函数类型二、TypeScript函数类型转为js三、查看js输出 一、TypeScript函数类型 函数类型.ts //为了使用接口表示函数类型，需要给接口定义一个调用签名 //像是一个只有参数列表和返回值类型的函数定义 //参数列表里的每个参数都需要名字和类型 (()=>{ //函数类型：通过接口的方式作为函数的类型来使用 //定义一个接口，用来作为某个函数的类型使用 interface ISea
3.《VUE之V-html指令》
qq_44864082的博客
04-01 1524
写作声明：上面的文章主要讲述了V-text指令以及与插值表达式的区别，这篇博客主要讲述V-html指令的使用！ 首先我们要明白一点：什么V-html指令？ 对于这个问题，简单的来说就是，我们用v-text以及插值表达式所显示的内容原本定义的是什么，就原模原样的显示什么，而通过V-html指令我们就可以实现显示定义的html的标签中的内容，下面我们使用一个简单的例子： <!DOCTYPE ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值