指令
介绍
Teek 内置一些通用的自定义指令,指令在 src/common/directives
目录下。
v-copy
:复制某个值至剪贴板v-auth
:认证权限v-role
:角色权限v-waves
:用于按钮使用,点击按钮时触发波纹效果v-debounce
:按钮防抖指令v-draggable
:拖拽指令,可在父元素区域任意拖拽元素v-longPress
:长按指令,长按时触发事件v-throttle
:防止按钮在短时间内被多次点击,使用节流函数限制规定时间内只能点击一次v-waterMarker
:给整个页面添加背景水印
这些指令都有对应的 Demo 组件使用,在 src/views/directives
目录下可以看到所有的自定义指令使用 Demo。
如何注册?
如果你自己写了一个指令,并想注册到 Teek 里,步骤非常简单:
- 在
src/common/directives/modules
创建自己的指令文件或文件夹,并写好自己的指令代码 - 在
src/common/directives/index.ts
引入自己的指令并注册到 Teek:
ts
import yourDirective from "./modules/your-directive";
const directivesList: Record<string, any> = {
// ... 其他指令
yourDirective,
};
这样你的指令就全局注册到 Teek 里。
如果你不想全局注册到 Teek 里,而是按需在组件里 import
引入使用:
vue
<script setup lang="ts" name="Xxx">
import yourDirective from "@/directives/modules/your-directive";
</script>
<template>
<div v-yourDirective></div>
</template>