100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<template>
|
||
<div :style="{ visibility: visibility }">
|
||
<slot></slot>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Writer",
|
||
props: {
|
||
// 间隔时间
|
||
interval: { type: Number, default: 75 },
|
||
// 光标 建议有表格的时候不要使用光标 会导致渲染异常
|
||
cursorStr: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
visibility: "hidden", //
|
||
timer: 0, // 定时器
|
||
initialDom: null, // 记录初始dom
|
||
progress: 0, // 当前文本书写进度
|
||
// writeStatus: "NotStart",// 当前书写状态=> NotStart: 未开始；Processing：书写中；Completed 书写完毕
|
||
};
|
||
},
|
||
mounted() {
|
||
// 拷贝初始所有dom 便于重新开始
|
||
this.initialDom = JSON.parse(JSON.stringify(this.$el.innerHTML));
|
||
this.start();
|
||
},
|
||
methods: {
|
||
// 开始 / 重新开始
|
||
start() {
|
||
this.visibility = "visible";
|
||
this.progress = 0;
|
||
this.$el.innerHTML = "";
|
||
clearInterval(this.timer);
|
||
this.write();
|
||
this.$emit("writeStart");
|
||
},
|
||
// 暂停
|
||
pause() {
|
||
clearInterval(this.timer);
|
||
this.$emit("writePause");
|
||
},
|
||
// 继续
|
||
continueWrite() {
|
||
if(!this.progress || this.progress >= this.initialDom.length){
|
||
return
|
||
}
|
||
clearInterval(this.timer);
|
||
this.write();
|
||
this.$emit("writeContinue");
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.visibility = "hidden";
|
||
this.progress = 0;
|
||
this.$el.innerHTML = "";
|
||
clearInterval(this.timer);
|
||
},
|
||
// 书写
|
||
write() {
|
||
this.timer = setInterval(() => {
|
||
var current = this.initialDom.substr(this.progress, 1);
|
||
// console.log(current);
|
||
// 跳过 标签渲染
|
||
if (current === "<") {
|
||
this.progress = this.initialDom.indexOf(">", this.progress) + 1;
|
||
} else {
|
||
this.progress++;
|
||
}
|
||
// console.log(this.progress & 1, "this.progress");
|
||
// 如果有光标配置 拼接到最新渲染的地方
|
||
if (this.cursorStr) {
|
||
this.$el.innerHTML =
|
||
this.initialDom.substring(0, this.progress) +
|
||
(this.progress < this.initialDom.length && this.progress & 1
|
||
? this.cursorStr
|
||
: "");
|
||
} else {
|
||
this.$el.innerHTML = this.initialDom.substring(0, this.progress);
|
||
}
|
||
// 文本书写进度 大于需要书写的总长度 判断为渲染完成
|
||
if (this.progress >= this.initialDom.length) {
|
||
clearInterval(this.timer);
|
||
this.$emit("writeEnd"); // 打字完成后的回调方法
|
||
}
|
||
this.$emit("writeIsWrite");
|
||
}, this.interval);
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer);
|
||
},
|
||
};
|
||
</script>
|