@whitesev/pops 2.2.3 → 2.2.5

package/src/components/panel/handlerComponents.ts

@@ -27,6 +27,7 @@ import type { PopsPanelSelectDetails } from "./types/components-select";
 import type { PopsPanelSliderDetails } from "./types/components-slider";
 import type { PopsPanelSwitchDetails } from "./types/components-switch";
 import type { PopsPanelTextAreaDetails } from "./types/components-textarea";
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
 
 /**
  * 处理组件（把组件配置转为组件元素）
@@ -316,6 +317,9 @@ export const PanelHandlerComponents = () => {
 					value: Boolean(formConfig.getValue()),
 				},
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					switch: $li.querySelector<HTMLDivElement>(".pops-panel-switch")!,
 					input: $li.querySelector<HTMLInputElement>(
 						".pops-panel-switch__input"
@@ -333,9 +337,12 @@ export const PanelHandlerComponents = () => {
 					}
 					this.setClickEvent();
 				},
+				/**
+				 * 设置点击事件
+				 */
 				setClickEvent() {
 					let that = this;
-					popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
+					popsDOMUtils.on(this.$ele.core, "click", function (event) {
 						if (
 							that.$ele.input.disabled ||
 							that.$ele.switch.hasAttribute("data-disabled")
@@ -388,13 +395,21 @@ export const PanelHandlerComponents = () => {
 				disable() {
 					this.$ele.input.disabled = true;
 					this.$ele.switch.setAttribute("data-disabled", "true");
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
-				 * 启用复选框
+				 * 取消禁用复选框
 				 */
 				notDisable() {
 					this.$ele.input.disabled = false;
 					this.$ele.switch.removeAttribute("data-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 			};
 
@@ -575,6 +590,9 @@ export const PanelHandlerComponents = () => {
 					tooltip: null as any as ReturnType<typeof PopsTooltip.init>,
 				},
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					slider: $li.querySelector<HTMLElement>(".pops-slider")!,
 					runAway: $li.querySelector<HTMLElement>(".pops-slider__runway")!,
 					bar: $li.querySelector<HTMLElement>(".pops-slider__bar")!,
@@ -840,19 +858,34 @@ export const PanelHandlerComponents = () => {
 				 * 禁止拖拽
 				 */
 				disableDrag() {
-					this.$ele.runAway.classList.add("pops-slider-is-disabled");
+					popsDOMUtils.addClassName(
+						this.$ele.runAway,
+						"pops-slider-is-disabled"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.runAway,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 允许拖拽
 				 */
 				allowDrag() {
-					this.$ele.runAway.classList.remove("pops-slider-is-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.runAway,
+						"pops-slider-is-disabled"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.runAway,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断当前滑块是否被禁用
 				 */
 				isDisabledDrag() {
-					return this.$ele.runAway.classList.contains(
+					return popsDOMUtils.containsClassName(
+						this.$ele.runAway,
 						"pops-slider-is-disabled"
 					);
 				},
@@ -860,14 +893,11 @@ export const PanelHandlerComponents = () => {
 				 * 判断当前滑块是否被禁用（配置中判断）
 				 */
 				isFormConfigDisabledDrag() {
-					if (
-						typeof formConfig.disabled === "function" ||
-						typeof formConfig.disabled === "boolean"
-					) {
-						let isDisabled =
-							typeof formConfig.disabled === "function"
-								? formConfig.disabled()
-								: formConfig.disabled;
+					let isDisabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (typeof isDisabled === "boolean") {
 						return isDisabled;
 					} else {
 						return false;
@@ -880,7 +910,6 @@ export const PanelHandlerComponents = () => {
 					popsDOMUtils.on<PointerEvent | MouseEvent>(
 						this.$ele.runAway,
 						"click",
-						void 0,
 						(event) => {
 							if (
 								event.target !== this.$ele.runAway &&
@@ -889,7 +918,10 @@ export const PanelHandlerComponents = () => {
 								return;
 							}
 							let clickX = parseFloat(event.offsetX.toString());
-							this.dragStartCallBack();
+							let dragStartResult = this.dragStartCallBack();
+							if (!dragStartResult) {
+								return;
+							}
 							this.dragMoveCallBack(event, clickX, this.value);
 							this.dragEndCallBack(clickX);
 						},
@@ -902,17 +934,18 @@ export const PanelHandlerComponents = () => {
 				 * 拖拽开始的回调，如果返回false，禁止拖拽
 				 */
 				dragStartCallBack() {
+					if (this.isFormConfigDisabledDrag()) {
+						// 禁止
+						this.disableDrag();
+						return false;
+					}
 					if (!this.$data.isMove) {
-						if (this.isFormConfigDisabledDrag()) {
-							// 禁止
-							this.disableDrag();
-							return false;
-						} else {
+						// 非移动中
+						if (this.isDisabledDrag()) {
 							// 允许
-							if (this.isDisabledDrag()) {
-								this.allowDrag();
-							}
+							this.allowDrag();
 						}
+
 						this.$data.isMove = true;
 					}
 					return true;
@@ -1116,7 +1149,7 @@ export const PanelHandlerComponents = () => {
 					<p class="pops-panel-item-left-main-text">${
 						formConfig.text
 					}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-input pops-user-select-none">
+				<div class="pops-panel-input">
 					<input type="${inputType}" placeholder="${formConfig.placeholder ?? ""}">
 				</div>
 				`
@@ -1124,6 +1157,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelInput = {
 				[Symbol.toStringTag]: "PopsPanelInput",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelInput: $li.querySelector<HTMLDivElement>(".pops-panel-input")!,
 					input: $li.querySelector<HTMLInputElement>("input")!,
 					inputSpanIcon: document.createElement("span"),
@@ -1187,20 +1223,38 @@ export const PanelHandlerComponents = () => {
 						this.$ele.inputSpanIcon.querySelector<HTMLElement>(
 							".pops-panel-icon"
 						)!;
+					popsDOMUtils.addClassName(
+						this.$ele.panelInput,
+						PopsCommonCSSClassName.userSelectNone
+					);
 				},
 				/**
 				 * 禁用
 				 */
 				disable() {
 					this.$ele.input.disabled = true;
-					this.$ele.panelInput.classList.add("pops-input-disabled");
+					popsDOMUtils.addClassName(
+						this.$ele.panelInput,
+						"pops-input-disabled"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 取消禁用
 				 */
 				notDisable() {
 					this.$ele.input.disabled = false;
-					this.$ele.panelInput.classList.remove("pops-input-disabled");
+					popsDOMUtils.removeClassName(
+						this.$ele.panelInput,
+						"pops-input-disabled"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断是否已被禁用
@@ -1346,6 +1400,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelTextArea = {
 				[Symbol.toStringTag]: "PopsPanelTextArea",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelTextarea: $li.querySelector<HTMLDivElement>(
 						".pops-panel-textarea"
 					)!,
@@ -1369,18 +1426,31 @@ export const PanelHandlerComponents = () => {
 				},
 				disable() {
 					this.$ele.textarea.setAttribute("disabled", "true");
-					this.$ele.panelTextarea.classList.add("pops-panel-textarea-disable");
+					popsDOMUtils.addClassName(
+						this.$ele.panelTextarea,
+						"pops-panel-textarea-disable"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				notDisable() {
 					this.$ele.textarea.removeAttribute("disabled");
-					this.$ele.panelTextarea.classList.remove(
+					popsDOMUtils.removeClassName(
+						this.$ele.panelTextarea,
 						"pops-panel-textarea-disable"
 					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				isDisabled() {
 					return (
 						this.$ele.textarea.hasAttribute("disabled") ||
-						this.$ele.panelTextarea.classList.contains(
+						popsDOMUtils.containsClassName(
+							this.$ele.panelTextarea,
 							"pops-panel-textarea-disable"
 						)
 					);
@@ -1395,7 +1465,6 @@ export const PanelHandlerComponents = () => {
 					popsDOMUtils.on<InputEvent>(
 						this.$ele.textarea,
 						["input", "propertychange"],
-						void 0,
 						(event) => {
 							let value = this.$ele.textarea.value;
 							this.$data.value = value;
@@ -1439,7 +1508,7 @@ export const PanelHandlerComponents = () => {
 				/*html*/ `
 				<div class="pops-panel-item-left-text">
 					<p class="pops-panel-item-left-main-text">${formConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-select pops-user-select-none">
+				<div class="pops-panel-select">
 					<select></select>
 				</div>
 				`
@@ -1448,6 +1517,9 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelSelect = {
 				[Symbol.toStringTag]: "PopsPanelSelect",
 				$ele: {
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					panelSelect: $li.querySelector<HTMLDivElement>(".pops-panel-select")!,
 					select: $li.querySelector<HTMLSelectElement>(
 						".pops-panel-select select"
@@ -1462,6 +1534,10 @@ export const PanelHandlerComponents = () => {
 					defaultValue: formConfig.getValue(),
 				},
 				init() {
+					popsDOMUtils.addClassName(
+						this.$ele.panelSelect,
+						PopsCommonCSSClassName.userSelectNone
+					);
 					this.initOption();
 					this.setChangeEvent();
 					this.setClickEvent();
@@ -1496,14 +1572,28 @@ export const PanelHandlerComponents = () => {
 				 */
 				disable() {
 					this.$ele.select.setAttribute("disabled", "true");
-					this.$ele.panelSelect.classList.add("pops-panel-select-disable");
+					popsDOMUtils.addClassName(
+						this.$ele.panelSelect,
+						"pops-panel-select-disable"
+					);
+					popsDOMUtils.addClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 取消禁用
 				 */
 				notDisable() {
 					this.$ele.select.removeAttribute("disabled");
-					this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
+					popsDOMUtils.removeClassName(
+						this.$ele.panelSelect,
+						"pops-panel-select-disable"
+					);
+					popsDOMUtils.removeClassName(
+						this.$ele.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
 				},
 				/**
 				 * 判断是否禁用
@@ -1511,7 +1601,8 @@ export const PanelHandlerComponents = () => {
 				isDisabled() {
 					return (
 						this.$ele.select.hasAttribute("disabled") ||
-						this.$ele.panelSelect.classList.contains(
+						popsDOMUtils.containsClassName(
+							this.$ele.panelSelect,
 							"pops-panel-select-disable"
 						)
 					);
@@ -1703,6 +1794,10 @@ export const PanelHandlerComponents = () => {
 			const PopsPanelSelectMultiple = {
 				[Symbol.toStringTag]: "PopsPanelSelectMultiple",
 				$el: {
+					/** 左侧文本容器 */
+					itemLeftTextContainer: $li.querySelector<HTMLElement>(
+						".pops-panel-item-left-text"
+					),
 					/** 容器 */
 					$container: void 0 as any as HTMLElement,
 					/** 包括的容器 */
@@ -1732,6 +1827,14 @@ export const PanelHandlerComponents = () => {
 					this.initPlaceHolder();
 					this.initTagElement();
 					this.setSelectContainerClickEvent();
+
+					let disabled =
+						typeof formConfig.disabled === "function"
+							? formConfig.disabled()
+							: formConfig.disabled;
+					if (disabled) {
+						this.disable();
+					}
 				},
 				/** 初始化默认值 */
 				initDefault() {
@@ -2161,6 +2264,9 @@ export const PanelHandlerComponents = () => {
 				setSelectContainerClickEvent() {
 					const that = this;
 					popsDOMUtils.on(this.$el.$container, "click", (event) => {
+						if (this.isDisabled()) {
+							return;
+						}
 						/** 弹窗的选中的值 */
 						let selectedInfo = that.$data.selectInfo;
 						let { style, ...userConfirmDetails } =
@@ -2311,6 +2417,9 @@ export const PanelHandlerComponents = () => {
 						"click",
 						(event) => {
 							popsDOMUtils.preventEvent(event);
+							if (this.isDisabled()) {
+								return;
+							}
 							if (typeof formConfig.closeIconClickCallBack === "function") {
 								let result = formConfig.closeIconClickCallBack(event, {
 									$tag: data.$tag,
@@ -2400,6 +2509,41 @@ export const PanelHandlerComponents = () => {
 				removeSectionIsNear() {
 					this.$el.$section.classList.remove("is-near");
 				},
+				/**
+				 * 禁用标签
+				 */
+				disable() {
+					popsDOMUtils.addClassName(
+						this.$el.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
+					popsDOMUtils.addClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
+				/**
+				 * 判断是否被禁用
+				 */
+				isDisabled() {
+					return popsDOMUtils.containsClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
+				/**
+				 * 取消禁用标签
+				 */
+				cancleDisable() {
+					popsDOMUtils.removeClassName(
+						this.$el.itemLeftTextContainer,
+						PopsCommonCSSClassName.textIsDisabled
+					);
+					popsDOMUtils.removeClassName(
+						this.$el.$container,
+						"pops-panel-select-multiple-disable"
+					);
+				},
 			};
 
 			PopsPanelSelectMultiple.init();
@@ -2672,12 +2816,19 @@ export const PanelHandlerComponents = () => {
 									formContainerListElement.setAttribute("data-fold-enable", "");
 								}
 							});
-							formHeaderDivElement.classList.add(
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
 								"pops-panel-forms-fold-container"
 							);
-							formHeaderDivElement.classList.add("pops-user-select-none");
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
+								PopsCommonCSSClassName.userSelectNone
+							);
 							formContainerListElement.setAttribute("data-fold-enable", "");
-							formContainerListElement.classList.add("pops-panel-forms-fold");
+							popsDOMUtils.addClassName(
+								formHeaderDivElement,
+								"pops-panel-forms-fold"
+							);
 							formContainerListElement.appendChild(formHeaderDivElement);
 						} else {
 							/* 加进容器内 */
@@ -2938,10 +3089,19 @@ export const PanelHandlerComponents = () => {
 							formContainerListElement.setAttribute("data-fold-enable", "");
 						}
 					});
-					formHeaderDivElement.classList.add("pops-panel-forms-fold-container");
-					formHeaderDivElement.classList.add("pops-user-select-none");
+					popsDOMUtils.addClassName(
+						formHeaderDivElement,
+						"pops-panel-forms-fold-container"
+					);
+					popsDOMUtils.addClassName(
+						formHeaderDivElement,
+						PopsCommonCSSClassName.userSelectNone
+					);
 					formContainerListElement.setAttribute("data-fold-enable", "");
-					formContainerListElement.classList.add("pops-panel-forms-fold");
+					popsDOMUtils.addClassName(
+						formContainerListElement,
+						"pops-panel-forms-fold"
+					);
 					formContainerListElement.appendChild(formHeaderDivElement);
 				} else {
 					/* 加进容器内 */

package/src/components/panel/index.css

@@ -24,12 +24,7 @@
 	--pops-panel-forms-container-item-margin-left-right: var(
 		--pops-panel-forms-margin-left-right
 	);
-	--pops-panel-forms-container-li-border-color: rgb(
-		229,
-		229,
-		229,
-		var(--pops-bd-opacity)
-	);
+	--pops-panel-forms-container-li-border-color: var(--pops-bd-color);
 	--pops-panel-forms-container-li-padding-top-bottom: 12px;
 	--pops-panel-forms-container-li-padding-left-right: 16px;
 }
@@ -82,7 +77,7 @@ section.pops-panel-container {
 }
 section.pops-panel-container .pops-panel-container-header-ul,
 section.pops-panel-container .pops-panel-deepMenu-container-header-ul {
-	border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));
+	border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));
 	flex: 0 auto;
 }
 section.pops-panel-container .pops-panel-container-header-ul li,
@@ -139,6 +134,7 @@ section.pops-panel-container .pops-panel-forms-container-item-header-text {
 	color: var(--pops-panel-forms-container-item-title-color);
 }
 section.pops-panel-container li.pops-panel-forms-container-item {
+	/* 去除<li>左侧的圆点 */
 	display: block;
 }
 section.pops-panel-container
@@ -194,7 +190,6 @@ section.pops-panel-container .pops-panel-item-left-desc-text {
 }
 
 /* 折叠面板 */
-
 section.pops-panel-container .pops-panel-forms-fold {
 	border-radius: var(--pops-panel-forms-container-item-border-radius);
 	background: var(--pops-panel-forms-container-item-bg-color);
@@ -226,11 +221,18 @@ section.pops-panel-container
 	transform: rotate(-90deg);
 	transition: transform 0.3s;
 }
+/* 折叠状态 */
 section.pops-panel-container
 	.pops-panel-forms-fold[data-fold-enable]
 	.pops-panel-forms-container-item-formlist {
 	height: 0;
 }
+/* 非折叠状态 */
+section.pops-panel-container
+	.pops-panel-forms-fold
+	ul.pops-panel-forms-container-item-formlist {
+	margin: 0;
+}
 section.pops-panel-container
 	.pops-panel-forms-fold
 	.pops-panel-forms-container-item-formlist {
@@ -239,7 +241,6 @@ section.pops-panel-container
 	border-radius: unset;
 	background: unset;
 	margin: 0;
-	height: auto;
 	height: calc-size(auto, size);
 }
 /* 折叠面板 */
@@ -771,10 +772,7 @@ section.pops-panel-container
 }
 
 .pops-input-disabled {
-	background-color: var(--el-disabled-bg-color);
-}
-.pops-panel-input.pops-input-disabled {
-	border: none;
+	background-color: var(--pops-components-is-disabled-bg-color);
 }
 .pops-panel-input.pops-input-disabled:hover {
 	--pops-panel-components-input-hover-bd-color: var(
@@ -833,8 +831,16 @@ section.pops-panel-container
 		--pops-panel-components-textarea-bd-color
 	);
 }
-.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {
-	box-shadow: none;
+.pops-panel-textarea-disable {
+	--pops-panel-components-textarea-text-bg-color: var(
+		--pops-components-is-disabled-bg-color
+	) !important;
+	--pops-panel-components-textarea-text-color: var(
+		--pops-components-is-disabled-text-color
+	);
+}
+.pops-panel-textarea-disable textarea {
+	cursor: not-allowed;
 }
 .pops-panel-textarea textarea:focus {
 	outline: 0;
@@ -851,13 +857,18 @@ section.pops-panel-container
 		184,
 		var(--pops-bd-opacity)
 	);
+	--pops-panel-components-select-hover-bd-color: rgb(
+		184,
+		184,
+		184,
+		var(--pops-bd-opacity)
+	);
 	--pops-panel-components-select-bg-color: rgb(
 		255,
 		255,
 		255,
 		var(--pops-bg-opacity)
 	);
-	--pops-panel-components-select-hover-bd-color: #c0c4cc;
 }
 .pops-panel-select {
 	border: 0;
@@ -876,12 +887,24 @@ section.pops-panel-container
 	box-shadow: none;
 }
 .pops-panel-select select:hover {
-	--pops-panel-components-select-bd-color: var(
-		--pops-panel-components-select-hover-bd-color
+	border: 1px solid var(--pops-panel-components-select-hover-bd-color);
+}
+.pops-panel-select-disable {
+	--pops-panel-components-select-text-color: var(
+		--pops-components-is-disabled-text-color
+	);
+	--pops-panel-components-select-bg-color: var(
+		--pops-components-is-disabled-bg-color
 	);
 }
-.pops-panel-select-disable .pops-panel-select select:hover {
+.pops-panel-select-disable select {
+	cursor: not-allowed;
+}
+.pops-panel-select-disable select:hover {
 	box-shadow: none;
+	--pops-panel-components-select-hover-bd-color: var(
+		--pops-panel-components-select-bd-color
+	);
 }
 .pops-panel-select select:focus {
 	border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));
@@ -894,7 +917,7 @@ section.pops-panel-container
 	--el-border-radius-base: 4px;
 	--el-fill-color-blank: #ffffff;
 	--el-transition-duration: 0.3s;
-	--el-border-color: #dcdfe6;
+	--el-border-color: #cbcbcb;
 	--el-text-color-placeholder: #a8abb2;
 	--color: inherit;
 	--el-select-input-color: #a8abb2;
@@ -926,10 +949,10 @@ section.pops-panel-container
 	background-color: var(--el-fill-color-blank);
 	transition: var(--el-transition-duration);
 	transform: translateZ(0);
-	box-shadow: 0 0 0 1px var(--el-border-color) inset;
+	border: 1px solid var(--el-border-color);
 }
 .pops-panel-select-multiple .el-select__wrapper.is-focused {
-	box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+	--el-border-color: var(--el-color-primary);
 }
 .pops-panel-select-multiple .el-select__selection {
 	position: relative;
@@ -1078,6 +1101,21 @@ section.pops-panel-container
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+.pops-panel-select-multiple-disable {
+	--el-fill-color-blank: #f5f7fa;
+	--color: #a8abb2;
+	--el-border-color: #cbcbcb;
+}
+.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+	--el-tag-bg-color: #e7e7e7;
+	--el-tag-text-color: var(--pops-components-is-disabled-text-color);
+}
+.pops-panel-select-multiple-disable .el-select__selection .el-tag,
+.pops-panel-select-multiple-disable .el-tag .el-tag__close:hover,
+.pops-panel-select-multiple-disable .el-select__wrapper,
+.pops-panel-select-multiple-disable .el-select__caret {
+	cursor: not-allowed;
+}
 /* select-multiple的CSS*/
 
 /* deepMenu的css */
@@ -1208,10 +1246,16 @@ section.pops-panel-deepMenu-container
 		--el-color-primary: #409eff;
 		--el-color-white: #ffffff;
 	}
-	/* select-multiple的CSS*/
 	.pops-panel-select-multiple .el-tag {
 		--el-color-info-light-9: #202121;
 	}
+	.pops-panel-select-multiple-disable {
+		--el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));
+	}
+	.pops-panel-select-multiple-disable .el-tag.el-tag--info {
+		--el-tag-bg-color: #2f2f2f;
+	}
+	/* select-multiple的CSS*/
 	/* slider的CSS */
 	.pops-slider {
 		--pops-slider-border-color-light: #414243;
@@ -1233,4 +1277,16 @@ section.pops-panel-deepMenu-container
 		--pops-panel-components-textarea-hover-bd-color: #6f7175;
 		--pops-panel-components-textarea-focus-bd-color: #409eff;
 	}
+	.pops-panel-textarea-disable {
+		--pops-panel-components-textarea-text-color: var(
+			--pops-components-is-disabled-text-color
+		);
+		--pops-panel-components-textarea-text-bg-color: var(
+			--pops-components-is-disabled-bg-color
+		);
+	}
+	/* slider */
+	.pops-slider {
+		--pops-slider-text-color-placeholder: #8d9095;
+	}
 }