@whitesev/pops 2.2.4 → 2.2.6

package/src/css/animation.css

@@ -62,21 +62,21 @@
 @keyframes searchSelectFalIn {
 	from {
 		opacity: 0;
-		display:none;
+		display: none;
 	}
 	to {
-		display:block;
+		display: block;
 		opacity: 1;
 	}
 }
 @keyframes searchSelectFalOut {
 	from {
-		display:block;
+		display: block;
 		opacity: 1;
 	}
 	to {
 		opacity: 0;
-		display:none;
+		display: none;
 	}
 }
 
@@ -1915,24 +1915,7 @@
 	}
 	0% {
 		opacity: 1;
-		transform: matrix3d(
-			1,
-			0,
-			0,
-			0,
-			0,
-			1,
-			0,
-			0,
-			0,
-			0,
-			1,
-			0,
-			0,
-			0,
-			0type=close,
-			1
-		);
+		transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 	}
 }
 @keyframes pops-anim-roll-reverse {

package/src/css/button.css

@@ -358,188 +358,184 @@
 .pops-panel-button-no-icon .pops-panel-button_inner i {
 	display: none;
 }
-.pops-panel-button-right-icon {
-}
 .pops-panel-button-right-icon .pops-panel-button_inner {
 	flex-direction: row-reverse;
 }
-.pops-panel-button-right-icon .pops-panel-button_inner i {
-}
 .pops-panel-button .pops-panel-button_inner i:has(svg),
 .pops-panel-button-right-icon .pops-panel-button-text {
 	margin-right: 6px;
 }
 
-.pops button[type="default"] {
+.pops button[data-type="default"] {
 	--button-color: var(--button-default-color);
 	--button-bd-color: var(--button-default-bd-color);
 	--button-bg-color: var(--button-default-bg-color);
 }
-.pops button[type="default"]:active {
+.pops button[data-type="default"]:active {
 	--button-color: var(--button-default-active-color);
 	--button-bd-color: var(--button-default-active-bd-color);
 	--button-bg-color: var(--button-default-active-bg-color);
 }
-.pops button[type="default"]:hover {
+.pops button[data-type="default"]:hover {
 	--button-color: var(--button-default-hover-color);
 	--button-bd-color: var(--button-default-hover-bd-color);
 	--button-bg-color: var(--button-default-hover-bg-color);
 }
-.pops button[type="default"]:focus-visible {
+.pops button[data-type="default"]:focus-visible {
 	outline: var(--button-default-focus-visible-outline);
 	outline-offset: var(--button-default-focus-visible-outline-offset);
 }
-.pops button[type="default"]:disabled {
+.pops button[data-type="default"]:disabled {
 	--button-color: var(--button-default-disabled-color);
 	--button-bd-color: var(--button-default-disabled-bd-color);
 	--button-bg-color: var(--button-default-disabled-bg-color);
 }
 
-.pops button[type="primary"] {
+.pops button[data-type="primary"] {
 	--button-color: var(--button-primary-color);
 	--button-bd-color: var(--button-primary-bd-color);
 	--button-bg-color: var(--button-primary-bg-color);
 }
-.pops button[type="primary"]:active {
+.pops button[data-type="primary"]:active {
 	--button-color: var(--button-primary-active-color);
 	--button-bd-color: var(--button-primary-active-bd-color);
 	--button-bg-color: var(--button-primary-active-bg-color);
 }
-.pops button[type="primary"]:hover {
+.pops button[data-type="primary"]:hover {
 	--button-color: var(--button-primary-hover-color);
 	--button-bd-color: var(--button-primary-hover-bd-color);
 	--button-bg-color: var(--button-primary-hover-bg-color);
 }
-.pops button[type="primary"]:focus-visible {
+.pops button[data-type="primary"]:focus-visible {
 	outline: var(--button-primary-focus-visible-outline);
 	outline-offset: var(--button-primary-focus-visible-outline-offset);
 }
-.pops button[type="primary"]:disabled {
+.pops button[data-type="primary"]:disabled {
 	--button-color: var(--button-primary-disabled-color);
 	--button-bd-color: var(--button-primary-disabled-bd-color);
 	--button-bg-color: var(--button-primary-disabled-bg-color);
 }
 
-.pops button[type="success"] {
+.pops button[data-type="success"] {
 	--button-color: var(--button-success-color);
 	--button-bd-color: var(--button-success-bd-color);
 	--button-bg-color: var(--button-success-bg-color);
 }
-.pops button[type="success"]:active {
+.pops button[data-type="success"]:active {
 	--button-color: var(--button-success-active-color);
 	--button-bd-color: var(--button-success-active-bd-color);
 	--button-bg-color: var(--button-success-active-bg-color);
 }
-.pops button[type="success"]:hover {
+.pops button[data-type="success"]:hover {
 	--button-color: var(--button-success-hover-color);
 	--button-bd-color: var(--button-success-hover-bd-color);
 	--button-bg-color: var(--button-success-hover-bg-color);
 }
-.pops button[type="success"]:focus-visible {
+.pops button[data-type="success"]:focus-visible {
 	outline: var(--button-success-focus-visible-outline);
 	outline-offset: var(--button-success-focus-visible-outline-offset);
 }
-.pops button[type="success"]:disabled {
+.pops button[data-type="success"]:disabled {
 	--button-color: var(--button-success-disabled-color);
 	--button-bd-color: var(--button-success-disabled-bd-color);
 	--button-bg-color: var(--button-success-disabled-bg-color);
 }
 
-.pops button[type="info"] {
+.pops button[data-type="info"] {
 	--button-color: var(--button-info-color);
 	--button-bd-color: var(--button-info-bd-color);
 	--button-bg-color: var(--button-info-bg-color);
 }
-.pops button[type="info"]:active {
+.pops button[data-type="info"]:active {
 	--button-color: var(--button-info-active-color);
 	--button-bd-color: var(--button-info-active-bd-color);
 	--button-bg-color: var(--button-info-active-bg-color);
 }
-.pops button[type="info"]:hover {
+.pops button[data-type="info"]:hover {
 	--button-color: var(--button-info-hover-color);
 	--button-bd-color: var(--button-info-hover-bd-color);
 	--button-bg-color: var(--button-info-hover-bg-color);
 }
-.pops button[type="info"]:focus-visible {
+.pops button[data-type="info"]:focus-visible {
 	outline: var(--button-info-focus-visible-outline);
 	outline-offset: var(--button-info-focus-visible-outline-offset);
 }
-.pops button[type="info"]:disabled {
+.pops button[data-type="info"]:disabled {
 	--button-color: var(--button-success-disabled-color);
 	--button-bd-color: var(--button-success-disabled-bd-color);
 	--button-bg-color: var(--button-success-disabled-bg-color);
 }
 
-.pops button[type="warning"] {
+.pops button[data-type="warning"] {
 	--button-color: var(--button-warning-color);
 	--button-bd-color: var(--button-warning-bd-color);
 	--button-bg-color: var(--button-warning-bg-color);
 }
-.pops button[type="warning"]:active {
+.pops button[data-type="warning"]:active {
 	--button-color: var(--button-warning-active-color);
 	--button-bd-color: var(--button-warning-active-bd-color);
 	--button-bg-color: var(--button-warning-active-bg-color);
 }
-.pops button[type="warning"]:hover {
+.pops button[data-type="warning"]:hover {
 	--button-color: var(--button-warning-hover-color);
 	--button-bd-color: var(--button-warning-hover-bd-color);
 	--button-bg-color: var(--button-warning-hover-bg-color);
 }
-.pops button[type="warning"]:focus-visible {
+.pops button[data-type="warning"]:focus-visible {
 	outline: var(--button-warning-focus-visible-outline);
 	outline-offset: var(--button-warning-focus-visible-outline-offset);
 }
-.pops button[type="warning"]:disabled {
+.pops button[data-type="warning"]:disabled {
 	--button-color: var(--button-success-disabled-color);
 	--button-bd-color: var(--button-success-disabled-bd-color);
 	--button-bg-color: var(--button-success-disabled-bg-color);
 }
 
-.pops button[type="danger"] {
+.pops button[data-type="danger"] {
 	--button-color: var(--button-danger-color);
 	--button-bd-color: var(--button-danger-bd-color);
 	--button-bg-color: var(--button-danger-bg-color);
 }
-.pops button[type="danger"]:active {
+.pops button[data-type="danger"]:active {
 	--button-color: var(--button-danger-active-color);
 	--button-bd-color: var(--button-danger-active-bd-color);
 	--button-bg-color: var(--button-danger-active-bg-color);
 }
-.pops button[type="danger"]:hover {
+.pops button[data-type="danger"]:hover {
 	--button-color: var(--button-danger-hover-color);
 	--button-bd-color: var(--button-danger-hover-bd-color);
 	--button-bg-color: var(--button-danger-hover-bg-color);
 }
-.pops button[type="danger"]:focus-visible {
+.pops button[data-type="danger"]:focus-visible {
 	outline: var(--button-danger-focus-visible-outline);
 	outline-offset: var(--button-danger-focus-visible-outline-offset);
 }
-.pops button[type="danger"]:disabled {
+.pops button[data-type="danger"]:disabled {
 	--button-color: var(--button-success-disabled-color);
 	--button-bd-color: var(--button-success-disabled-bd-color);
 	--button-bg-color: var(--button-success-disabled-bg-color);
 }
 
-.pops button[type="xiaomi-primary"] {
+.pops button[data-type="xiaomi-primary"] {
 	--button-color: var(--button-xiaomi-primary-color);
 	--button-bd-color: var(--button-xiaomi-primary-bd-color);
 	--button-bg-color: var(--button-xiaomi-primary-bg-color);
 }
-.pops button[type="xiaomi-primary"]:active {
+.pops button[data-type="xiaomi-primary"]:active {
 	--button-color: var(--button-xiaomi-primary-active-color);
 	--button-bd-color: var(--button-xiaomi-primary-active-bd-color);
 	--button-bg-color: var(--button-xiaomi-primary-active-bg-color);
 }
-.pops button[type="xiaomi-primary"]:hover {
+.pops button[data-type="xiaomi-primary"]:hover {
 	--button-color: var(--button-xiaomi-primary-hover-color);
 	--button-bd-color: var(--button-xiaomi-primary-hover-bd-color);
 	--button-bg-color: var(--button-xiaomi-primary-hover-bg-color);
 }
-.pops button[type="xiaomi-primary"]:focus-visible {
+.pops button[data-type="xiaomi-primary"]:focus-visible {
 	outline: var(--button-xiaomi-primary-focus-visible-outline);
 	outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);
 }
-.pops button[type="xiaomi-primary"]:disabled {
+.pops button[data-type="xiaomi-primary"]:disabled {
 	--button-color: var(--button-success-disabled-color);
 	--button-bd-color: var(--button-success-disabled-bd-color);
 	--button-bg-color: var(--button-success-disabled-bg-color);

package/src/css/index.css

@@ -18,14 +18,11 @@
 	--pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));
 	--pops-box-shadow-color: rgba(0, 0, 0, 0.12);
 	--pops-title-color: #000000;
-	--pops-title-border-color: rgb(229, 229, 229, var(--pops-bd-opacity));
+	--pops-title-border-color: var(--pops-bd-color);
 	--pops-content-color: #000000;
-	--pops-bottom-btn-controls-border-color: rgb(
-		229,
-		229,
-		229,
-		var(--pops-bd-opacity)
-	);
+	--pops-bottom-btn-controls-border-color: var(--pops-bd-color);
+	--pops-components-is-disabled-text-color: #a8abb2;
+	--pops-components-is-disabled-bg-color: #f5f7fa;
 }
 @media (prefers-color-scheme: dark) {
 	.pops {
@@ -35,8 +32,10 @@
 		--pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));
 		--pops-box-shadow-color: rgba(81, 81, 81, 0.12);
 		--pops-title-color: #e8e8e8;
-		--pops-title-border-color: rgb(229, 229, 229, var(--pops-bd-opacity));
+		--pops-title-border-color: var(--pops-bd-color);
 		--pops-content-color: #e5e5e5;
+		--pops-components-is-disabled-text-color: #a8abb2;
+		--pops-components-is-disabled-bg-color: #262727;
 	}
 }
 .pops {
@@ -118,9 +117,9 @@
 	color: #888;
 	cursor: pointer;
 }
-.pops-header-controls button.pops-header-control[type="max"],
-.pops-header-controls button.pops-header-control[type="mise"],
-.pops-header-controls button.pops-header-control[type="min"] {
+.pops-header-controls button.pops-header-control[data-type="max"],
+.pops-header-controls button.pops-header-control[data-type="mise"],
+.pops-header-controls button.pops-header-control[data-type="min"] {
 	outline: 0 !important;
 	border: 0;
 	border-color: rgb(136, 136, 136, var(--pops-bd-opacity));

package/src/handler/PopsElementHandler.ts

@@ -22,7 +22,7 @@ export const PopsElementHandler = {
 	 * @param zIndex z-index
 	 * @param style
 	 */
-	getMaskHTML(guid: string, zIndex: number = 101, style = ""): string {
+	createMask(guid: string, zIndex: number = 101, style = ""): string {
 		zIndex = zIndex - 100;
 		if (style.startsWith(";")) {
 			style = style.replace(";", "");
@@ -38,7 +38,7 @@ export const PopsElementHandler = {
 	 * @param bottomBtnHTML
 	 * @param zIndex
 	 */
-	getAnimHTML(
+	createAnim(
 		guid: string,
 		type: PopsSupportAnimDetailsType,
 		config: PopsSupportAnimDetails[keyof PopsSupportAnimDetails],
@@ -79,38 +79,40 @@ export const PopsElementHandler = {
 	 * @param type
 	 * @param config
 	 */
-	getHeaderBtnHTML(
+	createHeader(
 		type: PopsSupportHeaderTitleDetailsType,
 		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
 	): string {
 		if (!config.btn) {
 			return "";
 		}
-		let __config_confirm = config as PopsConfirmDetails;
-		if (type !== "iframe" && !__config_confirm.btn?.close?.enable) {
+		let confirm_config = config as PopsConfirmDetails;
+		if (type !== "iframe" && !confirm_config.btn?.close?.enable) {
 			return "";
 		}
 		let resultHTML = "";
 		// let btnStyle = "";
 		let closeHTML = "";
-		let __config_iframe = config as PopsIframeDetails;
-		if (type === "iframe" && __config_iframe.topRightButton?.trim() !== "") {
+		let iframe_config = config as PopsIframeDetails;
+		if (type === "iframe" && iframe_config.topRightButton?.trim() !== "") {
 			/* iframe的 */
 			let topRightButtonHTML = "";
-			__config_iframe.topRightButton.split("|").forEach((item: string) => {
+			iframe_config.topRightButton.split("|").forEach((item: string) => {
+				// 最小化、最大化、窗口化、关闭按钮
 				item = item.toLowerCase();
 				topRightButtonHTML += /*html*/ `
-                <button class="pops-header-control" type="${item}">
+                <button class="pops-header-control" type="button" data-type="${item}">
                     <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
                 </button>`;
 			});
 			resultHTML = /*html*/ `
             <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
 		} else {
-			if (__config_confirm.btn?.close?.enable) {
+			if (confirm_config.btn?.close?.enable) {
+				// 关闭按钮
 				closeHTML = /*html*/ `
                 <div class="pops-header-controls">
-                    <button class="pops-header-control" type="close" data-header>
+                    <button class="pops-header-control" type="button" data-type="close" data-header>
                     	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
                     </button>
                 </div>`;
@@ -120,25 +122,42 @@ export const PopsElementHandler = {
 
 		return resultHTML;
 	},
+	/**
+	 * 获取标题style
+	 * @param type 弹窗类型
+	 * @param config 弹窗配置
+	 */
+	createHeaderStyle(
+		type: PopsSupportHeaderTitleDetailsType,
+		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
+	) {
+		return {
+			headerStyle: config?.title?.html ? config?.title?.style || "" : "",
+			headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
+		};
+	},
 	/**
 	 * 获取底部按钮层HTML
 	 * @param type
 	 * @param config
 	 */
-	getBottomBtnHTML(
+	createBottom(
 		type: PopsSupportBottomBtnDetailsType,
-		config: Omit<PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails], "content">
+		config: Omit<
+			PopsSupportBottomBtnDetails[keyof PopsSupportBottomBtnDetails],
+			"content"
+		>
 	): string {
-		if (!config.btn) {
+		if (config.btn == null) {
 			// 未设置btn参数
 			return "";
 		}
-		let __config_confirm = config as Required<PopsConfirmDetails>;
+		let confirm_config = config as Required<PopsConfirmDetails>;
 		if (
 			!(
 				config.btn?.ok?.enable ||
-				__config_confirm.btn?.cancel?.enable ||
-				__config_confirm.btn?.other?.enable
+				confirm_config.btn?.cancel?.enable ||
+				confirm_config.btn?.other?.enable
 			)
 		) {
 			// 确定、取消、其它按钮都未启用直接返回
@@ -154,7 +173,7 @@ export const PopsElementHandler = {
 			btnStyle += `justify-content: ${config.btn.position};`;
 		}
 
-		if (__config_confirm.btn.reverse) {
+		if (confirm_config.btn.reverse) {
 			btnStyle += "flex-direction: row-reverse;";
 		}
 		if (config.btn?.ok?.enable) {
@@ -166,7 +185,7 @@ export const PopsElementHandler = {
 				okButtonSizeClassName = "pops-button-" + config.btn.ok.size;
 			}
 			let okIconHTML = "";
-			let okIcon = __config_confirm.btn.ok!.icon! as PopsIconType | string;
+			let okIcon = confirm_config.btn.ok!.icon! as PopsIconType | string;
 			if (okIcon !== "") {
 				// 判断图标是否是svg库内的
 				let iconHTML = "";
@@ -180,29 +199,28 @@ export const PopsElementHandler = {
 			}
 			okHTML = /*html*/ `
             <button 
-                    class="pops-${type}-btn-ok ${okButtonSizeClassName}"
-                    type="${__config_confirm.btn.ok?.type}"
-					data-has-icon="${(__config_confirm.btn.ok!.icon || "") !== ""}"
-                    data-rightIcon="${__config_confirm.btn.ok?.rightIcon}"
+				class="pops-${type}-btn-ok ${okButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.ok?.type}"
+				data-has-icon="${(confirm_config.btn.ok!.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
             >${okIconHTML}<span>${config.btn.ok.text}</span>
             </button>`;
 		}
 
-		if (__config_confirm.btn?.cancel?.enable) {
+		if (confirm_config.btn?.cancel?.enable) {
 			/* 处理取消按钮的尺寸问题 */
 			let cancelButtonSizeClassName = "";
 
-			if (__config_confirm.btn.cancel.size === "large") {
+			if (confirm_config.btn.cancel.size === "large") {
 				cancelButtonSizeClassName =
-					"pops-button-" + __config_confirm.btn.cancel.size;
-			} else if (__config_confirm.btn.cancel.size === "small") {
+					"pops-button-" + confirm_config.btn.cancel.size;
+			} else if (confirm_config.btn.cancel.size === "small") {
 				cancelButtonSizeClassName =
-					"pops-button-" + __config_confirm.btn.cancel.size;
+					"pops-button-" + confirm_config.btn.cancel.size;
 			}
 			let cancelIconHTML = "";
-			let cancelIcon = __config_confirm.btn.cancel!.icon as
-				| PopsIconType
-				| string;
+			let cancelIcon = confirm_config.btn.cancel!.icon as PopsIconType | string;
 			if (cancelIcon !== "") {
 				let iconHTML = "";
 				// 判断图标是否是svg库内的
@@ -212,31 +230,32 @@ export const PopsElementHandler = {
 					iconHTML = cancelIcon;
 				}
 				iconHTML = iconHTML || "";
-				cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
+				cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
 			}
 			cancelHTML = /*html*/ `
             <button
-                    class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
-                    type="${__config_confirm.btn.cancel.type}"
-					data-has-icon="${(__config_confirm.btn.cancel.icon || "") !== ""}"
-                    data-rightIcon="${__config_confirm.btn.cancel.rightIcon}"
-            >${cancelIconHTML}<span>${__config_confirm.btn.cancel.text}</span>
+				class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.cancel.type}"
+				data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
+            >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
             </button>`;
 		}
 
-		if (__config_confirm.btn?.other?.enable) {
+		if (confirm_config.btn?.other?.enable) {
 			/* 处理其它按钮的尺寸问题 */
 			let otherButtonSizeClassName = "";
 
-			if (__config_confirm.btn.other.size === "large") {
+			if (confirm_config.btn.other.size === "large") {
 				otherButtonSizeClassName =
-					"pops-button-" + __config_confirm.btn.other.size;
-			} else if (__config_confirm.btn.other.size === "small") {
+					"pops-button-" + confirm_config.btn.other.size;
+			} else if (confirm_config.btn.other.size === "small") {
 				otherButtonSizeClassName =
-					"pops-button-" + __config_confirm.btn.other.size;
+					"pops-button-" + confirm_config.btn.other.size;
 			}
 			let otherIconHTML = "";
-			let otherIcon = __config_confirm.btn.other!.icon as PopsIconType | string;
+			let otherIcon = confirm_config.btn.other!.icon as PopsIconType | string;
 			if (otherIcon !== "") {
 				let iconHTML = "";
 				// 判断图标是否是svg库内的
@@ -246,21 +265,22 @@ export const PopsElementHandler = {
 					otherIcon;
 				}
 				iconHTML = iconHTML || "";
-				otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${__config_confirm.btn.other.iconIsLoading}">${iconHTML}</i>`;
+				otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
 			}
 			ohterHTML = /*html*/ `
             <button
-                    class="pops-${type}-btn-other ${otherButtonSizeClassName}"
-                    type="${__config_confirm.btn.other.type}"
-					data-has-icon="${(__config_confirm.btn.other.icon || "") !== ""}"
-                    data-rightIcon="${__config_confirm.btn.other.rightIcon}"
-            >${otherIconHTML}<span>${__config_confirm.btn.other.text}</span>
+				class="pops-${type}-btn-other ${otherButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.other.type}"
+				data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.other.rightIcon}"
+            >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
             </button>`;
 		}
 
-		if (__config_confirm.btn.merge) {
+		if (confirm_config.btn.merge) {
 			let flexStyle = "display: flex;";
-			if (__config_confirm.btn.mergeReverse) {
+			if (confirm_config.btn.mergeReverse) {
 				flexStyle += "flex-direction: row-reverse;";
 			} else {
 				flexStyle += "flex-direction: row;";
@@ -276,27 +296,12 @@ export const PopsElementHandler = {
 		}
 		return resultHTML;
 	},
-	/**
-	 * 获取标题style
-	 * @param type 弹窗类型
-	 * @param config 弹窗配置
-	 */
-	getHeaderStyle(
-		type: PopsSupportHeaderTitleDetailsType,
-		config: PopsSupportHeaderTitleDetails[keyof PopsSupportHeaderTitleDetails]
-	) {
-		return {
-			headerStyle: config?.title?.html ? config?.title?.style || "" : "",
-
-			headerPStyle: config?.title?.html ? "" : config?.title?.style || "",
-		};
-	},
 	/**
 	 * 获取内容style
 	 * @param type 弹窗类型
 	 * @param config 弹窗配置
 	 */
-	getContentStyle(
+	createContentStyle(
 		type: PopsSupportContentDetailsType,
 		config: PopsSupportContentDetails[keyof PopsSupportContentDetails]
 	) {

package/src/handler/PopsHandler.ts

@@ -324,25 +324,25 @@ export const PopsHandler = {
 			 * 顶部缩小按钮
 			 */
 			headerMinBtnElement: animElement.querySelector<HTMLDivElement>(
-				".pops-header-control[type='min']"
+				".pops-header-control[data-type='min']"
 			)!,
 			/**
 			 * 顶部放大按钮
 			 */
 			headerMaxBtnElement: animElement.querySelector<HTMLDivElement>(
-				".pops-header-control[type='max']"
+				".pops-header-control[data-type='max']"
 			)!,
 			/**
 			 * 顶部恢复原样按钮
 			 */
 			headerMiseBtnElement: animElement.querySelector<HTMLDivElement>(
-				".pops-header-control[type='mise']"
+				".pops-header-control[data-type='mise']"
 			)!,
 			/**
 			 * 顶部关闭按钮
 			 */
 			headerCloseBtnElement: animElement.querySelector<HTMLDivElement>(
-				".pops-header-control[type='close']"
+				".pops-header-control[data-type='close']"
 			)!,
 			/**
 			 * 文件夹列表元素