hirsun-vuepress-theme-hope-plus
Version:
A light vuepress theme with tons of features and typewriter effect
67 lines • 2.24 kB
JavaScript
import { defineComponent, h, onMounted, ref } from "vue";
export default defineComponent({
name: "TypeWriter",
props: {
texts: {
type: Array,
required: true,
},
typeSpeed: {
type: Number,
default: 150,
},
deleteSpeed: {
type: Number,
default: 50,
},
pauseTime: {
type: Number,
default: 2000,
},
},
setup(props) {
const displayText = ref("");
const currentTextIndex = ref(0);
const isDeleting = ref(false);
const type = () => {
const currentText = props.texts[currentTextIndex.value];
const currentLength = displayText.value.length;
if (isDeleting.value) {
// 正在删除
displayText.value = currentText.substring(0, currentLength - 1);
if (displayText.value === "") {
isDeleting.value = false;
// 移至下一个文本
currentTextIndex.value = (currentTextIndex.value + 1) % props.texts.length;
// 短暂暂停后开始打字
setTimeout(type, 500);
}
else {
setTimeout(type, props.deleteSpeed);
}
}
else {
// 正在打字
displayText.value = currentText.substring(0, currentLength + 1);
if (displayText.value === currentText) {
// 文本完成，暂停然后开始删除
isDeleting.value = true;
setTimeout(type, props.pauseTime);
}
else {
setTimeout(type, props.typeSpeed);
}
}
};
onMounted(() => {
if (props.texts.length > 0) {
setTimeout(type, 1000);
}
});
return () => h("div", { class: "type-writer" }, h("p", { class: "type-writer-content" }, [
displayText.value,
h("span", { class: "type-writer-cursor" })
]));
},
});
//# sourceMappingURL=TypeWriter.js.map