Directives ​

@qxs-bns/directives 提供一组 Vue 3 自定义指令，用于复制、防抖、懒加载、波纹效果和富文本安全渲染等场景。

全局注册指令 ​

指令库最常见的接入方式是在应用入口统一注册。
这样页面里只需要写 v-copy、v-debounce 这类模板语法，不用每个组件单独重复声明。

内容渲染指令 ​

如果你的项目会接外部 HTML、Markdown 或富文本输出，再继续看安全渲染类指令。
这类能力更适合在确认全局注册方式以后再接入具体业务内容。

安装 ​

pnpm add @qxs-bns/directives

导入 ​

import { createApp } from 'vue'
import { vCopy, vDebounce } from '@qxs-bns/directives'

const app = createApp(App)
app.directive('copy', vCopy)
app.directive('debounce', vDebounce)

推荐在应用入口处进行全局注册；也可以在单个组件中局部引入后使用。注册完成后，模板里使用的是 v-copy、v-debounce 这类 kebab-case 形式。

可用能力 ​

常见场景 ​

• 需要统一处理复制、防重复点击、波纹效果的按钮类交互。
• 需要安全渲染 HTML 或实现富文本截断的内容场景。
• 需要图片懒加载、元素入场动画等 DOM 增强能力的 Vue 项目。

注意事项 ​

• 指令库适合在应用入口统一注册，避免页面内重复声明。
• 涉及 DOM 交互和第三方库的指令，建议先在真实业务页面里确认 SSR 或异步渲染行为。
• 如果你还需要配套 UI 组件，可搭配 @qxs-bns/components 一起使用。

下一步 ​

• v-copy
• v-debounce
• v-safe-html
• Components