TODO：directives #21
Description
TodoList
这是一个用于管理待完成指令的issue。如果你有什么想法（想做什么指令），可以在此添加一个子issue，并@自己，再完成之后关闭子issue，管理员看到后，会把你的issue的指令添加到这里，以便于开发者知道已经有了那些指令且是谁在开发。
待完成指令列表：
- highlight 文本高亮 @minorcell
- watermarker: 图片水印 @minorcell
- countup: 数字滚动 @minorcell
- focus: 自动聚焦 @minorcell
- copy: 点击复制文本 @minorcell
- hotkey：点击单个按键或者多个按键出发事件 @minorcell
- tooltip：悬浮提示，支持方向、主题 @minorcell
- debounce：防抖指令 @minorcell
- throttle：节流指令 @minorcell
- longpress：长按出发，支持时间 @minorcell
- doubleclick: 双击触发 @minorcell
- threeclick： 三击触发 @minorcell
- darg: 拖拽、范围、排序 @minorcell @neverbiasu
- infinitscroll: 无限滚动 @512465
- backtop：回到当前页面顶部 @hot777zzz
- clickout：点击外部触发回掉函数，一般用于弹窗 @hot777zzz
- scrollto: 点击滚定到指定位置，默认到最上方 @minorcell
- trim：表单自动格式化 @minorcell
- mousefollow: 鼠标跟随 @hot777zzz
- lazyload： 懒加载 @minorcell
- spare： 图片加载失败的占位图 @minorcell
- emoji：禁止输入表情包 @minorcell
- clearable： 给input添加清除按钮 @minorcell
- pwdvisible: input[type="password"]时是否可见密码 @minorcell
- ellispis：文本省略 @minorcell
- rippre： 水波纹效果 @minorcell
- fitfont: 自动调整字体大小 @KindSeven
- autobox：自动调整容器大小适配内容 @512465
- boxresize: 自动调整box大小 @512465
- desaturate: 网页灰色素调效果 @minorcell
- verify：表单校验指令，传入对象，支持整个表单校验 @512465
- dragablesort：拖拽排序 @512465
- preload: a 标签进入视图如果是页面则预加载页面，也可以是其他关键资源。 @hot777zzz
- formatter：常见的格式化：时间、百分比、字节格式化 @lozinz
- marquee：文本滚动：一行显示，支持x，y滚动、滚动速度，滚动开始、滚动中、滚动完回掉函数、支持循环滚动。 @512465
- forevertop：确保元素永远存在于最高的z-Index（自动管理z-Index的一种 @minorcell
- audiopectrum：根据音频动态渲染频谱 @KindSeven
- closetab：点击关闭当前窗口的标签页
- loading: 异步加载内容时，loading占位符效果 @lozinz
- header：header栏和鼠标滚轮的交互，支持组定义options @KindSeven
- invertcolors：用在字体类元素上，实现字体颜色和背景反转色 @KindSeven
- pinchzoom：移动端双指缩放元素（图片/地图交互增强）
- swipe：移动端滑动识别（支持左/右/上/下滑动回调）
- sticky：元素吸顶/吸底效果（滚动时固定位置，支持偏移量）
- currency：货币实时格式化（自动根据语言加符号与千分位）
- resizeobserver：元素尺寸变化监听（替代ResizeObserver兼容方案）
- permission：权限控制显示/隐藏元素（结合角色系统）
- typing：模拟打字机逐字显示效果（支持速度控制、开始打字、打字中和完成打字的回掉）@hot777zzz
- particle：元素点击粒子爆炸效果（可配置颜色/数量) @512465
- toggleanimation：元素显隐切换动画（支持Slide/Fade等过渡效果）
- responsive：根据屏幕尺寸动态切换元素属性（如隐藏/显示不同内容）
- priorityhover：在移动端将 hover 转换为 tap 事件，解决触摸设备悬停失效问题，如：按钮悬浮态在手机端点击后保持激活
- skeleton：在异步数据加载时显示骨架动画，支持自定义占位区块（可以理解为suspense的指令化
- magnet：元素磁性吸附，拖拽元素靠近目标区域时自动吸附对齐
- persist：将元素状态自动保存到 localStorage/sessionStorage，比如输入框内容关闭页面后仍保留，下次打开直接添入
- offline：离线状态降级，比如：检测网络状态并显示备用内容（如离线时隐藏视频播放器）
- outview：元素离开视图时触发回掉函数
- gradient：动态渐变动画，为元素背景添加渐变色流动效果，支持方向/速度控制
- appleblur：ios毛玻璃效果 @hot777zzz
- webshare：自动格式化页面标题/URL 为分享内容（支持文件分享），比如：
<button v-webshare="{ title: '看看这个！' }">分享</button> - priceanimate: 价格变动浮动效果,数字变化时添加上涨（红色↑）/下跌（绿色↓）动画，比如：
<div v-price-animate>¥{{ price }}</div> - dragdrop: 将元素拖放到一个位置或者元素后触发回掉。
- ai-contentmask：文本处理类别，屏蔽正则匹配或者字符匹配的内容。支持屏蔽效果设置
- ai-caption：支持AI调用，webllm或者支持配置api
- ai-rewrite：智能文本润色，输入框失焦时自动调用 AI 优化文本（语法/语气修正）。
- ai-moderation：实时内容合规检测，传图片/视频时自动识别违规内容（NSFW/暴力等）。
- ai-mock：【开发工具类】智能模拟数据生成，根据组件 Props 类型自动生成合理 mock 数据。
- lazy-resource：资源延迟加载，扩展 v-lazyload，支持 iframe/video/3D模型 等重型资源
- fetch-on-visible：视口内数据预加载，元素进入视口时触发 API 请求，替代全局分页加载
- offscreen-canvas：离屏 Canvas 渲染加速，将复杂 Canvas 绘制移至 Worker 或隐藏层
- render-freeze：不可见区域渲染暂停，当元素离开视口时暂停内部动画/轮询
- cleanup：自动资源回收，元素销毁时自动移除事件监听器/清理 WebGL 上下文
- connection-aware：网络状态自适应，根据用户网络质量切换资源版本（如 4G 加载高清图）
- confetti: 节日庆祝，全屏五彩纸屑效果 @minorcell
- magnet：磁铁，同性相斥，异性相吸，铁都吸
- conversionImage： from 'aaa' to 'bbb', compression： 'oto' | 'lts' | 'stl' , 图片格式转换，从什么格式转换成什么格式，压缩比是多少？oto不压缩空间大小, lts 大压缩到小空间， stl 小压缩到大空间