theaterjs使用

import theaterJS from "theaterjs";
interface ITheaterOptions {
	autoplay?: boolean;
	minSpeed?: {
		type: number;
		erase: number;
	};
	maxSpeed?: {
		type: number;
		erase: number;
	};
}
export default function useTheater(id: string, options: ITheaterOptions, addSceneOptions: any[]) {
	//1,初始化一个theaterJS对象
	const theater = theaterJS(options);
	//2,将演员添加到选角中。
	theater.addActor(id, { speed: 0.8, accuracy: 0.6 });
	//3,将场景添加到场景中，options.autoplay为true，则播放场景。
	addSceneOptions.forEach(item => {
		theater.addScene(item);
	});
	theater.addScene(theater.replay.bind(theater));
	//4，添加在发出事件时执行的回调( ( 当场景开始/结束时、) )。
	//效果是当打字（type）和删除（erase）开始时，显示光标
	//当打字（type）和删除（erase）结束时，移除光标。
	//当vader打字（type）时，
	theater
		.on("type:start, erase:start", function () {
			theater.getCurrentActor().$element?.classList!.add("actor__content--typing");
		})
		.on("type:end, erase:end", function () {
			theater.getCurrentActor().$element?.classList!.remove("actor__content--typing");
		});
	// 	.on("type:start, erase:start", function () {
	// 		if (theater.getCurrentActor().name === id) {
	// 			document.body.classList.add("dark");
	// 		} else {
	// 			document.body.classList.remove("dark");
	// 		}
	// 	});
	return { theater };
}

<div class="actor">
				<div class="actor__prefix" @click="handleOnFocus">Search for your domain name...</div>
				<div v-show="!isClick" id="vader" type="text" class="actor__content" data-focus-visible="" @click="handleOnFocus"></div>
				<a-input
					v-show="isClick"
					id="vader-input"
					ref="searchContentRef"
					v-model="searchContent"
					class="actor__input"
					allow-clear
					@blur="handleOnBlur"
				/>
				<a-button type="primary" class="w-98px" @click="handleSearch">Search</a-button>
			</div>

const addScenes = [
	["vader:Start typing...", 800],
	[
		"vader:youridea.com",
		800,
		-8,
		"circle.net",
		800,
		-10,
		"version.org",
		800,
		-11,
		"brandnew.site",
		800,
		-13,
		"world.online",
		800,
		-12,
		"business.ca",
		1000
	]
];
const isClick = ref(false);
const searchContentRef = ref();
const searchContent = ref("");
const handleOnFocus = () => {
	isClick.value = true;
	nextTick(() => {
		searchContentRef.value.focus();
	});
};
const handleOnBlur = () => {
	if (searchContent.value === "") {
		isClick.value = false;
	}
};
const handleSearch = () => {
	console.log("searchContent", searchContent.value);
};
watch(searchContent, val => {
	if (val.length <= 0) {
		isClick.value = false;
		searchContent.value = "";
	} else {
		isClick.value = true;
	}
});
useTheater("vader", { autoplay: true }, addScenes);

.actor {
			@apply absolute left-0 px-5vw flex flex-col;
			top: 40%;
			&__prefix {
				@apply text-[#919091];
			}
			&__input {
				@apply border-none bg-transparent h-69px   pl-0;
				:deep(.arco-input) {
					color: #fff;
					font-size: 3rem;
					@apply font-700;
					&:focus {
						outline: none;
					}
				}
			}
			&__content {
				font-size: 3rem;
				@apply font-700 bg-transparent  text-color-placeholder-1;
			}
			.actor__content--typing::after {
				//添加打字和删除时的光标
				content: "|";
				animation: blink 500ms infinite;
			}
		}