feat: 1. 更新音乐插件 2. 组件注册插件增加单插件模式

src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts

@@ -0,0 +1,42 @@
+import { createApp, Reactive } from "vue";
+import aplayerListNew from "../src/aplayerListNew.vue";
+import apType from "../types/ap";
+
+/**
+ * 对aplayer进行一些自定义的风格优化
+ */
+const useAplayerMiao = (ap: Reactive<apType>) => {
+	const container = ap.container as HTMLDivElement;
+
+	// 隐藏旧版歌单
+	const old_listDom = container.querySelector(".aplayer-list") as HTMLDivElement;
+	old_listDom.style.display = "none";
+
+	// 新版歌单
+	const new_list_dom = document.createElement("div");
+	new_list_dom.classList.add("aplayer-list");
+	new_list_dom.style.maxHeight = ap.options.listMaxHeight;
+
+	ap.on("listadd", () => {
+		ap.list.audios.forEach(v => {
+			!v.id && (v.id = Math.random());
+		});
+	});
+	ap.on("listshow", () => {
+		new_list_dom.classList.remove("aplayer-list-hide");
+	});
+	ap.on("listhide", () => {
+		new_list_dom.classList.add("aplayer-list-hide");
+	});
+
+	container.appendChild(new_list_dom);
+	const app = createApp(aplayerListNew, { ap });
+	app.mount(new_list_dom);
+
+	ap.on("destroy", () => {
+		app.unmount();
+	});
+	return app;
+};
+
+export default useAplayerMiao;