Directives ​

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

安装 ​

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