回溯rrweb
npm install rrweb -s
使用(适用于vue main.js 或 某个页面)
import * as rrweb from 'rrweb'
let events = []
rrweb.record({
emit(event) {
events.push(event)
if(events.length === 100) {
events = []
}
}
})
const replayer = new rrweb.Replayer(events)
replayer.play()
html使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<style>
.rrweb-item{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
</style>
</head>
<body>
<div class="rrweb-item">
<div>姓名</div>
<input type="text"/>
</div>
<div class="rrweb-item">
<div>手机号</div>
<input type="tel"/>
</div>
<div class="rrweb-item">
<div>密码</div>
<input type="password"/>
</div>
<div class="rrweb-item">
<div>上传文件</div>
<input type="file"/>
</div>
</body>
</html>
<script>
let events = []
rrweb.record({
emit(event) {
events.push(event)
if(events.length == 100) {
sessionStorage.setItem('rrweb', JSON.stringify(events))
events = []
}
},
sampling: {
mousemove: false,
mouseInteraction: {
MouseUp: false,
MouseDown: false,
Click: true,
ContextMenu: false,
DblClick: false,
Focus: false,
Blur: false,
TouchStart: false,
TouchEnd: false,
},
scroll: 150
media: 800
}
})
</script>