assignment_late
为什么捐赠
travel_explore
API 浏览器
widgets
Vue 组件
Ajax Bar Ajax 进度条
Avatar 头像
Badge 徽标
Banner 横幅
Bar 工具栏
Breadcrumbs 面包屑
Card 卡片
Carousel 轮播
Chat Message 聊天消息
Chip 纸片
Circular Progress 环形进度条
Color Picker 颜色选择器
Dialog 对话框
Editor WYSIWYG 编辑器
Expansion Item 展开项
Floating Action Button 浮动操作按钮
Icon 图标
Img 图片
Infinite Scroll 无限滚动
Inner Loading 内部加载
Intersection 交叉观察
Knob 旋钮
Linear Progress 线性进度条
List & List Items 列表与列表项
Markup Table 标记表格
Menu 菜单
No SSR
Observers 观察者
Pagination 分页
Parallax 视差
Popup Edit 弹出编辑
Popup Proxy 弹出代理
Pull to Refresh 下拉刷新
Rating 评分
Responsive 响应式
Scroll Area 滚动区域
Separator 分隔线
Skeleton 骨架屏
Slide Item 滑动项
Slide Transition 滑动过渡
Space 间隔
Spinners 加载动画
Splitter 分割面板
Stepper 步骤条
Table 表格
Tabs 标签页
Tab Panels 标签面板
Timeline 时间线
Toolbar 工具栏
Tooltip 提示框
Tree 树形控件
Uploader 上传器
Video 视频
Virtual Scroll 虚拟滚动
alternate_email
联系站长
“Mutation” 是 Quasar 提供的一个指令,它可以监听 DOM 树的变化,并在变化发生时调用指定的方法。
底层使用了 Mutation Observer API。
正在加载 Mutation API...
用法
建议先阅读 Mutation Observer API 文档,有助于理解本指令的工作原理。
处理函数接收一个参数,类型为 MutationRecord 数组。
捕获所有变化
如果不指定任何修饰符(“once” 除外),Mutation 指令会默认启用所有监听选项。
Catch everything
拖拽示例
下面的示例仅在桌面浏览器中有效,因为它依赖于浏览器的拖拽 API。将带颜色的方块拖到另一个位置,即可查看 Mutation Observer 的监听结果。
Drag and Drop (desktop only)
撤销/恢复示例
Mutation Observer 的一个典型应用场景是在应用中实现撤销/恢复功能。您可以根据过滤需求监听数据的添加和删除,将变化记录到一个堆栈中,然后利用该堆栈实现撤销操作。撤销过程中产生的变化数据可以存入恢复堆栈。别忘了在常规数据写入撤销堆栈时清空恢复堆栈。
Undo/Redo
发现错误?在浏览器中编辑此页
1. Introduction
2. Mutation API
3. 用法
3.1. 捕获所有变化
3.2. 拖拽示例
3.3. 撤销/恢复示例