@whitesev/pops 2.0.10 → 2.0.12

package/src/PopsIcon.ts

@@ -0,0 +1,93 @@
+import type { PopsIconType } from "./types/icon";
+import SVG_min from "./svg/min.svg";
+import SVG_mise from "./svg/mise.svg";
+import SVG_max from "./svg/max.svg";
+import SVG_close from "./svg/close.svg";
+import SVG_edit from "./svg/edit.svg";
+import SVG_share from "./svg/share.svg";
+import SVG_delete from "./svg/delete.svg";
+import SVG_search from "./svg/search.svg";
+import SVG_upload from "./svg/upload.svg";
+import SVG_loading from "./svg/loading.svg";
+import SVG_next from "./svg/next.svg";
+import SVG_prev from "./svg/prev.svg";
+import SVG_eleme from "./svg/eleme.svg";
+import SVG_elemePlus from "./svg/elemePlus.svg";
+import SVG_chromeFilled from "./svg/chromeFilled.svg";
+import SVG_cpu from "./svg/cpu.svg";
+import SVG_videoPlay from "./svg/videoPlay.svg";
+import SVG_videoPause from "./svg/videoPause.svg";
+import SVG_headset from "./svg/headset.svg";
+import SVG_monitor from "./svg/monitor.svg";
+import SVG_documentCopy from "./svg/documentCopy.svg";
+import SVG_picture from "./svg/picture.svg";
+import SVG_circleClose from "./svg/circleClose.svg";
+import SVG_view from "./svg/view.svg";
+import SVG_hide from "./svg/hide.svg";
+import SVG_keyboard from "./svg/keyboard.svg";
+import SVG_arrowRight from "./svg/arrowRight.svg";
+import SVG_arrowLeft from "./svg/arrowLeft.svg";
+
+export const PopsIcon = {
+	$data: {
+		min: SVG_min,
+		mise: SVG_mise,
+		max: SVG_max,
+		close: SVG_close,
+		edit: SVG_edit,
+		share: SVG_share,
+		delete: SVG_delete,
+		search: SVG_search,
+		upload: SVG_upload,
+		loading: SVG_loading,
+		next: SVG_next,
+		prev: SVG_prev,
+		eleme: SVG_eleme,
+		elemePlus: SVG_elemePlus,
+		chromeFilled: SVG_chromeFilled,
+		cpu: SVG_cpu,
+		videoPlay: SVG_videoPlay,
+		videoPause: SVG_videoPause,
+		headset: SVG_headset,
+		monitor: SVG_monitor,
+		documentCopy: SVG_documentCopy,
+		picture: SVG_picture,
+		circleClose: SVG_circleClose,
+		view: SVG_view,
+		hide: SVG_hide,
+		keyboard: SVG_keyboard,
+		arrowRight: SVG_arrowRight,
+		arrowLeft: SVG_arrowLeft,
+	} as {
+		[key in PopsIconType]: string;
+	},
+	/**
+	 * 判断是否存在某个icon
+	 * @param iconName 图标名
+	 */
+	hasIcon(iconName: string) {
+		return Object.keys(PopsIcon.$data).includes(iconName);
+	},
+	/**
+	 * 获取icon
+	 * @param iconName 图标名
+	 */
+	getIcon(iconName: string): string | null {
+		return PopsIcon.$data[iconName as keyof typeof this.$data];
+	},
+	/**
+	 * 删除图标
+	 * @param iconName 图标名
+	 */
+	deleteIcon(iconName: string) {
+		return Reflect.deleteProperty(PopsIcon.$data, iconName);
+	},
+	/**
+	 * 设置图标
+	 * @param iconName 图标名
+	 * @param iconHTML 图标html
+	 */
+	setIcon(iconName: string, iconHTML: string) {
+		Reflect.set(PopsIcon.$data, iconName, iconHTML);
+	},
+};

package/src/PopsLayer.ts

@@ -0,0 +1,17 @@
+import type { PopsLayerCommonConfig } from "./types/layer";
+import type { PopsLayerMode } from "./types/main";
+
+export const PopsLayer = {
+	alert: [],
+	confirm: [],
+	prompt: [],
+	loading: [],
+	iframe: [],
+	tooltip: [],
+	drawer: [],
+	folder: [],
+	panel: [],
+	rightClickMenu: [],
+} as {
+	[key in PopsLayerMode]: PopsLayerCommonConfig[];
+};

package/src/components/alert/index.ts

@@ -1,13 +1,13 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsAlertConfig } from "./config";
 import type { PopsMode } from "../../types/main";
 import type { PopsAlertDetails } from "./indexType";
+import { PopsCSS } from "../../PopsCSS";
 
 export const PopsAlert = {
 	init(details: PopsAlertDetails) {
@@ -21,13 +21,13 @@ export const PopsAlert = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.alertCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.alertCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/confirm/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -20,13 +20,13 @@ export const PopsConfirm = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.confirmCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.confirmCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/drawer/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsDrawerConfig } from "./config";
@@ -19,13 +19,13 @@ export const PopsDrawer = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.drawerCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.drawerCSS,
 		]);
 
 		// 先把z-index提取出来

package/src/components/folder/index.ts

@@ -1,11 +1,12 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
+import { PopsLoading } from "../loading";
 import { PopsFolderConfig } from "./config";
 import { Folder_ICON } from "./folderIcon";
 import type { PopsFolderDataConfig, PopsFolderDetails } from "./indexType";
@@ -23,13 +24,13 @@ export const PopsFolder = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.folderCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.folderCSS,
 		]);
 
 		/* 办公几件套 */
@@ -129,7 +130,7 @@ export const PopsFolder = {
 					: `<p pops style="${headerPStyle}">${config.title.text}</p>`
 			}${headerBtnHTML}</div>
 			<div class="pops-folder-content ${
-				pops.isPhone() ? "pops-mobile-folder-content" : ""
+				popsUtils.isPhone() ? "pops-mobile-folder-content" : ""
 			}">
                 <div class="pops-folder-list">
                     <div class="pops-folder-file-list-breadcrumb">
@@ -213,7 +214,7 @@ export const PopsFolder = {
                     <table class="pops-folder-list-table__body">
                         <colgroup>
                         ${
-													pops.isPhone()
+													popsUtils.isPhone()
 														? `<col width="100%">`
 														: `
                             <col width="52%">
@@ -572,9 +573,8 @@ export const PopsFolder = {
 			} else {
 				console.error("获取导航按钮失败");
 			}
-			let loadingMask = pops.loading({
+			let loadingMask = PopsLoading.init({
 				parent: $content,
-
 				content: {
 					text: "获取文件列表中...",
 				},
@@ -600,7 +600,7 @@ export const PopsFolder = {
 			_config_: PopsFolderDataConfig
 		) {
 			clearFolerRow();
-			let loadingMask = pops.loading({
+			let loadingMask = PopsLoading.init({
 				parent: $content,
 
 				content: {
@@ -828,7 +828,7 @@ export const PopsFolder = {
 			sortFolderConfig(_config_, config.sort.name, config.sort.isDesc);
 			_config_.forEach((item) => {
 				if (item["isFolder"]) {
-					let { folderELement, fileNameElement } = pops.isPhone()
+					let { folderELement, fileNameElement } = popsUtils.isPhone()
 						? createMobileFolderRowElement(item["fileName"], "", "", true)
 						: createFolderRowElement(item["fileName"], "", "", true);
 
@@ -842,7 +842,7 @@ export const PopsFolder = {
 
 					folderListBodyElement.appendChild(folderELement);
 				} else {
-					let { folderELement, fileNameElement } = pops.isPhone()
+					let { folderELement, fileNameElement } = popsUtils.isPhone()
 						? createMobileFolderRowElement(
 								item["fileName"],
 								item.latestTime,

package/src/components/iframe/index.ts

@@ -2,7 +2,8 @@ import { PopsCore } from "../../Core";
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
+import { PopsLayer } from "../../PopsLayer";
 import type { PopsEventDetails } from "../../types/event";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
@@ -26,12 +27,12 @@ export const PopsIframe = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.iframeCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.iframeCSS,
 		]);
 
 		let maskExtraStyle =
@@ -304,11 +305,7 @@ export const PopsIframe = {
 			(event) => {
 				event.preventDefault();
 				event.stopPropagation();
-				PopsInstanceUtils.removeInstance(
-					[pops.config.layer.iframe],
-					guid,
-					false
-				);
+				PopsInstanceUtils.removeInstance([PopsLayer.iframe], guid, false);
 				if (typeof config?.btn?.close?.callback === "function") {
 					config.btn.close.callback(eventDetails, event);
 				}

package/src/components/loading/index.ts

@@ -1,7 +1,7 @@
 import { GlobalConfig } from "../../GlobalConfig";
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
+import { PopsCSS } from "../../PopsCSS";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { popsUtils } from "../../utils/PopsUtils";
 import { PopsLoadingConfig } from "./config";
@@ -33,14 +33,14 @@ export const PopsLoading = {
             <div class="pops-loading-content">${
 							config.addIndexCSS
 								? /*html*/ `
-                <style data-model-name="index">${pops.config.cssText.index}</style>
-                <style data-model-name="anim">${pops.config.cssText.anim}</style>
-                <style data-model-name="common">${pops.config.cssText.common}</style>
+                <style data-model-name="index">${PopsCSS.index}</style>
+                <style data-model-name="anim">${PopsCSS.anim}</style>
+                <style data-model-name="common">${PopsCSS.common}</style>
                 `
 								: ""
 						}
                 <style data-model-name="loadingCSS">
-                    ${pops.config.cssText.loadingCSS}
+                    ${PopsCSS.loadingCSS}
                 </style>
             ${config.style != null ? `<style>${config.style}</style>` : ""}
             	<p pops style="${contentPStyle}">${config.content.text}</p>

package/src/components/panel/PanelHandleContentDetails.ts

@@ -1,11 +1,12 @@
-import { pops } from "../../Pops";
+import { PopsIcon } from "../../PopsIcon";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { PopsMathFloatUtils } from "../../utils/PopsMathUtils";
 import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
 import { popsUtils } from "../../utils/PopsUtils";
+import { PopsAlert } from "../alert";
 import type { PopsAlertDetails } from "../alert/indexType";
-import type { PopsTooltip } from "../tooltip";
+import { PopsTooltip } from "../tooltip";
 import type { PopsPanelButtonDetails } from "./buttonType";
 import type { PopsPanelRightAsideContainerOptions } from "./commonType";
 import type { PopsPanelDeepMenuDetails } from "./deepMenuType";
@@ -401,7 +402,7 @@ export const PanelHandleContentDetails = () => {
 					return value as string;
 				}
 			};
-			let tooltip = pops.tooltip({
+			let tooltip = PopsTooltip.init({
 				target: rangeInputElement.parentElement!,
 				content: () => {
 					return getToolTipContent(rangeInputElement.value);
@@ -576,11 +577,11 @@ export const PanelHandleContentDetails = () => {
 					let isSuccess = false;
 					let oldTotalWidth = this.$data.totalWidth;
 					let timer: number | undefined = void 0;
-					let interval = popsUtils.setInterval(() => {
+					let interval = setInterval(() => {
 						if (isSuccess) {
 							this.$interval.isCheck = false;
-							popsUtils.clearTimeout(timer);
-							popsUtils.clearInterval(interval);
+							clearTimeout(timer);
+							clearInterval(interval);
 						} else {
 							this.initTotalWidth();
 							if (this.$data.totalWidth !== 0) {
@@ -598,8 +599,8 @@ export const PanelHandleContentDetails = () => {
 						}
 					}, checkStepTime);
 					/* 最长检测时间是10s */
-					timer = popsUtils.setTimeout(() => {
-						popsUtils.clearInterval(interval);
+					timer = setTimeout(() => {
+						clearInterval(interval);
 					}, maxTime);
 				},
 				/**
@@ -981,16 +982,16 @@ export const PanelHandleContentDetails = () => {
 						return;
 					}
 					this.$data.isCheckingStopDragMove = true;
-					let interval = popsUtils.setInterval(() => {
+					let interval = setInterval(() => {
 						if (!this.$data.isMove) {
 							this.$data.isCheckingStopDragMove = false;
 							this.closeToolTip();
-							popsUtils.clearInterval(interval);
+							clearInterval(interval);
 						}
 					}, 200);
-					popsUtils.setTimeout(() => {
+					setTimeout(() => {
 						this.$data.isCheckingStopDragMove = false;
-						popsUtils.clearInterval(interval);
+						clearInterval(interval);
 					}, 2000);
 				},
 				/**
@@ -1008,7 +1009,7 @@ export const PanelHandleContentDetails = () => {
 						}
 					}
 
-					let tooltip = pops.tooltip({
+					let tooltip = PopsTooltip.init({
 						target: this.$ele.button,
 						content: getToolTipContent,
 						zIndex: () => {
@@ -1105,12 +1106,12 @@ export const PanelHandleContentDetails = () => {
 					this.setInputValue(this.$data.value);
 					/* 如果是密码框，放进图标 */
 					if (formConfig.isPassword) {
-						this.setCircleIcon(pops.config.iconSVG.view);
+						this.setCircleIcon(PopsIcon.getIcon("view")!);
 						this.setCircleIconClickEvent();
 					} else {
 						/* 先判断预设值是否为空，不为空添加清空图标按钮 */
 						if (this.$ele.input.value != "") {
-							this.setCircleIcon(pops.config.iconSVG.circleClose);
+							this.setCircleIcon(PopsIcon.getIcon("circleClose")!);
 							this.setCircleIconClickEvent();
 						}
 					}
@@ -1191,9 +1192,9 @@ export const PanelHandleContentDetails = () => {
 				},
 				/**
 				 * 添加清空图标按钮
-				 * @param [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
+				 * @param [svgHTML=PopsIcon.getIcon("circleClose")] svg图标，默认为清空的图标
 				 */
-				setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
+				setCircleIcon(svgHTML = PopsIcon.getIcon("circleClose")!) {
 					PopsSafeUtils.setSafeHTML(this.$ele.icon, svgHTML);
 				},
 				/**
@@ -1213,13 +1214,13 @@ export const PanelHandleContentDetails = () => {
 								this.$data.isView = false;
 								/* 显示输入框内容，且更换图标为隐藏图标 */
 								this.setInputType("text");
-								this.setCircleIcon(pops.config.iconSVG.hide);
+								this.setCircleIcon(PopsIcon.getIcon("hide")!);
 							} else {
 								/* 当前不可见 => 点击改变为显示 */
 								this.$data.isView = true;
 								/* 隐藏输入框内容，且更换图标为显示图标 */
 								this.setInputType("password");
-								this.setCircleIcon(pops.config.iconSVG.view);
+								this.setCircleIcon(PopsIcon.getIcon("view")!);
 							}
 						} else {
 							/* 普通输入框 */
@@ -1249,7 +1250,7 @@ export const PanelHandleContentDetails = () => {
 									this.$ele.icon.innerHTML === ""
 								) {
 									/* 不为空，显示清空图标 */
-									this.setCircleIcon(pops.config.iconSVG.circleClose);
+									this.setCircleIcon(PopsIcon.getIcon("circleClose")!);
 									this.setCircleIconClickEvent();
 								} else if (this.$ele.input.value === "") {
 									this.removeCircleIcon();
@@ -2211,7 +2212,7 @@ export const PanelHandleContentDetails = () => {
 							} as PopsAlertDetails,
 							userConfirmDetails
 						);
-						let $dialog = pops.alert(confirmDetails);
+						let $dialog = PopsAlert.init(confirmDetails);
 						let $selectContainer =
 							$dialog.$shadowRoot.querySelector<HTMLUListElement>(
 								".select-container"
@@ -2401,8 +2402,8 @@ export const PanelHandleContentDetails = () => {
 						formConfig.buttonIcon.trim() !== ""
 					) {
 						/* 存在icon图标且不为空 */
-						if (formConfig.buttonIcon in pops.config.iconSVG) {
-							this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
+						if (PopsIcon.hasIcon(formConfig.buttonIcon)) {
+							this.setIconSVG(PopsIcon.getIcon(formConfig.buttonIcon)!);
 						} else {
 							this.setIconSVG(formConfig.buttonIcon);
 						}
@@ -2530,7 +2531,9 @@ export const PanelHandleContentDetails = () => {
 					: true;
 			let arrowRightIconHTML = "";
 			if (arrowRightIcon) {
-				arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${pops.config.iconSVG.arrowRight}</i>`;
+				arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${PopsIcon.getIcon(
+					"arrowRight"
+				)}</i>`;
 			}
 			let rightText = "";
 			if (formConfig.rightText) {
@@ -2688,7 +2691,7 @@ export const PanelHandleContentDetails = () => {
 					});
 					let $headerLeftArrow = popsDOMUtils.createElement("i", {
 						className: "pops-panel-deepMenu-container-left-arrow-icon",
-						innerHTML: pops.config.iconSVG.arrowLeft,
+						innerHTML: PopsIcon.getIcon("arrowLeft")!,
 					});
 					popsDOMUtils.on(
 						$headerLeftArrow,

package/src/components/panel/buttonType.ts

@@ -1,6 +1,6 @@
 import type { PopsPanelCommonDetails } from "./commonType";
 import type { PopsButtonStyleType } from "../../types/button";
-import type { PopsIcon } from "../../types/icon";
+import type { PopsIconType } from "../../types/icon";
 /**
  * pops.panel的 button
  */
@@ -48,7 +48,7 @@ export interface PopsPanelButtonDetails extends PopsPanelCommonDetails<PopsPanel
 	/**
 	 * 按钮的图标，已配置的svg请看pops.config.iconSVG，或者自定义的图标svg代码
 	 */
-	buttonIcon?: PopsIcon;
+	buttonIcon?: PopsIconType;
 	/**
 	 * 按钮的图标在右边
 	 */

package/src/components/panel/config.ts

@@ -1,3 +1,4 @@
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import type { PopsPanelDetails } from "./indexType";
 
 export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
@@ -130,6 +131,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "50";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("输入框内容改变：", value);
 						},
 						placeholder: "请输入内容",
@@ -145,6 +147,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "123456";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("密码输入框内容改变：", value);
 						},
 						isPassword: true,
@@ -161,6 +164,7 @@ export const PopsPanelConfig = (): DeepRequired<PopsPanelDetails> => {
 							return "50";
 						},
 						callback(event, value) {
+							popsDOMUtils.preventEvent(event);
 							console.log("textarea输入框内容改变：", value);
 						},
 						placeholder: "请输入内容",

package/src/components/panel/index.css

@@ -1076,3 +1076,36 @@ section.pops-panel-container
 	height: inherit;
 }
 /* deepMenu的css */
+
+/* <code> */
+.pops[type-value="panel"] code {
+	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+	font-size: 0.85em;
+	color: #000;
+	background-color: #f0f0f0;
+	border-radius: 3px;
+	border: 0;
+	padding: 0.2em 0;
+	white-space: normal;
+	background: #f5f5f5;
+	text-wrap: wrap;
+	text-align: left;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.4;
+	-moz-tab-size: 8;
+	-o-tab-size: 8;
+	tab-size: 8;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	direction: ltr;
+}
+
+.pops[type-value="panel"] code::before,
+.pops[type-value="panel"] code::after {
+	letter-spacing: -0.2em;
+	content: "\00a0";
+}

package/src/components/panel/index.ts

@@ -1,6 +1,5 @@
 import { PopsElementHandler } from "../../handler/PopsElementHandler";
 import { PopsHandler } from "../../handler/PopsHandler";
-import { pops } from "../../Pops";
 import { popsDOMUtils } from "../../utils/PopsDOMUtils";
 import { PopsInstanceUtils } from "../../utils/PopsInstanceUtils";
 import { popsUtils } from "../../utils/PopsUtils";
@@ -8,6 +7,7 @@ import type { PopsPanelDetails } from "./indexType";
 import { PopsPanelConfig } from "./config";
 import { PanelHandleContentDetails } from "./PanelHandleContentDetails";
 import { GlobalConfig } from "../../GlobalConfig";
+import { PopsCSS } from "../../PopsCSS";
 
 export const PopsPanel = {
 	init(details: PopsPanelDetails) {
@@ -25,13 +25,13 @@ export const PopsPanel = {
 
 		const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
 		PopsHandler.handleInit($shadowRoot, [
-			pops.config.cssText.index,
-			pops.config.cssText.ninePalaceGridPosition,
-			pops.config.cssText.scrollbar,
-			pops.config.cssText.button,
-			pops.config.cssText.anim,
-			pops.config.cssText.common,
-			pops.config.cssText.panelCSS,
+			PopsCSS.index,
+			PopsCSS.ninePalaceGridPosition,
+			PopsCSS.scrollbar,
+			PopsCSS.button,
+			PopsCSS.anim,
+			PopsCSS.common,
+			PopsCSS.panelCSS,
 		]);
 
 		// 先把z-index提取出来
@@ -81,7 +81,7 @@ export const PopsPanel = {
 			contentAsideElement: $contentAside,
 			contentSectionContainerElement: $contentSectionContainer,
 		} = PopsHandler.handleQueryElement($anim, PopsType);
-		if (config.isMobile || pops.isPhone()) {
+		if (config.isMobile || popsUtils.isPhone()) {
 			popsDOMUtils.addClassName($pops, config.mobileClassName);
 		}
 		/**