效果演示 使用的API和类库 Transition、router-view 可选：keep-alive、pinia等 关键代码 <template> <router-view v-slot="{ Component }"> <transition :name="transitionName…

对于想要简单触发波纹动画效果的按钮等dom元素，直接在其上绑定@pointerdown="ripplet"即可。 对于类似安卓系统设置中的菜单项，pointerdown会触发背景色动画的同时，如果pointerdown后续紧跟滑动动作的话，背景色动画会快速结束。类似的，对于pointerdown触发的波纹动画效果，如果用户的动作…

事件名 说明 回调签名 onChoose 元素被选中 ((event: DraggableEvent) => void) onUnchoose 元素取消选中 ((event: DraggableEvent) => void) onStart 元素开始拖拽 ((event: DraggableEvent) => void) onEn…

对于一个需要校验格式的输入框来说，执行校验的时机一般有两种：change事件触发校验和blur事件触发校验。通常change事件触发校验需要使用防抖，以实现停止输入后再校验。对于防抖500ms来说，从停止输入到执行校验，还需要500ms的等待，如果在这500ms内，用户操作触发了blur，在blur事件触发校验会更加即时。但是这样会触发2次校验，停…

使用127.0.0.1或局域网IP直接访问的页面中，无法使用crypto.randomUUID()。 其根本原因是crypto.randomUUID()调用了crypto.getRandomValues(array)来生成伪随机数，而crypto.getRandomValues有较高的安全要求，必须在 HTTPS / localhost 环境中才可…

效果图： 基础版本（绝对尺寸） 基本要点： 使用svg mask（遮罩）实现形状的裁剪。 使用filter: drop-shadow实现裁剪后图形的阴影。 svg使用绝对定位+不可选中避免影响文档流和防止干扰用户操作。（不能隐藏，隐藏后遮罩失效，包括display:none、visibility: hidden）可以将透明度改为0。 <svg…

https://github.com/Alfred-Skyblue/vue-draggable-plus/issues/189 webpack打包开启代码压缩，且项目中使用vue-draggable-plus并开启reduce_vars时，运行时报错。 需关闭reduce_vars。 module.exports = { ... // 优化配置 o…

将路由参数传递至props 路径参数params 对于路径参数params/users/:id，仅需在路由中定义props: true const routes = [ ... { path: '/user/:id', component: User, props: true } ... ] 在User组件中接收 const p…

已实现功能 预先设置提示词、图片尺寸、出图数量，自动执行跑图任务。切换标签页、最小化不影响任务执行。 通过提示词片段，进行排列、组合，生成完整的提示词。 支持轮训和随机排列、组合，支持超大总体的抽样。 内置tag编辑器。支持导入导出tag为json文件，支持自定义增删tag、tag组。（右键编辑、删除） 任务名称、提示词组标签颜色、提示词组顺序均可…

例如pixiv、twitter等网页，本质是单页面应用，进入不同页面时通过js修改dom实现页面内容的替换，本质上页面没有刷新，油猴脚本也就不会重新加载。想要实现脚本菜单随页面变化进行判断和改变，一种思路是在页面url变化时，执行判断代码。修改页面url而不刷新页面的实现是history.pushState()，在其中添加Event并触发，并添加E…