@whitesev/pops 1.6.3 → 1.6.4

package/dist/index.umd.js

@@ -7272,2310 +7272,2315 @@
         },
     };
 
-    const PanelHandleContentDetails = {
-        /**
-         * 左侧的ul容器
-         */
-        asideULElement: null,
-        /**
-         * 右侧主内容的顶部文字ul容器
-         */
-        sectionContainerHeaderULElement: null,
-        /**
-         * 右侧主内容的ul容器
-         */
-        sectionContainerULElement: null,
-        $el: {
-            $content: null,
-            $contentAside: null,
-            $contentSectionContainer: null,
-        },
-        init(details) {
-            // @ts-ignore
-            this.$el = null;
-            this.$el = {
-                ...details.$el,
-            };
-            this.asideULElement =
-                this.$el.$contentAside.querySelector("ul");
-            this.sectionContainerHeaderULElement =
-                this.$el.$contentSectionContainer.querySelectorAll("ul")[0];
-            this.sectionContainerULElement =
-                this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
+    const PanelHandleContentDetails = () => {
+        return {
             /**
-             * 默认点击的左侧容器
+             * 左侧的ul容器
              */
-            let asideDefaultItemElement = null;
-            let isScrollToDefaultView = false;
-            details.config.content.forEach((asideItem) => {
-                let asideLiElement = this.getAsideItem(asideItem);
-                this.setAsideItemClickEvent(asideLiElement, asideItem);
-                this.asideULElement.appendChild(asideLiElement);
-                if (asideDefaultItemElement == null) {
-                    let flag = false;
-                    if (typeof asideItem.isDefault === "function") {
-                        flag = Boolean(asideItem.isDefault());
-                    }
-                    else {
-                        flag = Boolean(asideItem.isDefault);
+            asideULElement: null,
+            /**
+             * 右侧主内容的顶部文字ul容器
+             */
+            sectionContainerHeaderULElement: null,
+            /**
+             * 右侧主内容的ul容器
+             */
+            sectionContainerULElement: null,
+            $el: {
+                $content: null,
+                $contentAside: null,
+                $contentSectionContainer: null,
+            },
+            init(details) {
+                // @ts-ignore
+                this.$el = null;
+                this.$el = {
+                    ...details.$el,
+                };
+                this.asideULElement =
+                    this.$el.$contentAside.querySelector("ul");
+                this.sectionContainerHeaderULElement =
+                    this.$el.$contentSectionContainer.querySelectorAll("ul")[0];
+                this.sectionContainerULElement =
+                    this.$el.$contentSectionContainer.querySelectorAll("ul")[1];
+                /**
+                 * 默认点击的左侧容器
+                 */
+                let asideDefaultItemElement = null;
+                let isScrollToDefaultView = false;
+                details.config.content.forEach((asideItem) => {
+                    let asideLiElement = this.getAsideItem(asideItem);
+                    this.setAsideItemClickEvent(asideLiElement, asideItem);
+                    this.asideULElement.appendChild(asideLiElement);
+                    if (asideDefaultItemElement == null) {
+                        let flag = false;
+                        if (typeof asideItem.isDefault === "function") {
+                            flag = Boolean(asideItem.isDefault());
+                        }
+                        else {
+                            flag = Boolean(asideItem.isDefault);
+                        }
+                        if (flag) {
+                            asideDefaultItemElement = asideLiElement;
+                            isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
+                        }
                     }
-                    if (flag) {
-                        asideDefaultItemElement = asideLiElement;
-                        isScrollToDefaultView = Boolean(asideItem.scrollToDefaultView);
+                });
+                /* 点击左侧列表 */
+                if (asideDefaultItemElement == null &&
+                    this.asideULElement.children.length) {
+                    /* 默认第一个 */
+                    asideDefaultItemElement = this.asideULElement
+                        .children[0];
+                }
+                if (asideDefaultItemElement) {
+                    /* 点击选择的那一项 */
+                    asideDefaultItemElement.click();
+                    if (isScrollToDefaultView) {
+                        asideDefaultItemElement?.scrollIntoView();
                     }
                 }
-            });
-            /* 点击左侧列表 */
-            if (asideDefaultItemElement == null &&
-                this.asideULElement.children.length) {
-                /* 默认第一个 */
-                asideDefaultItemElement = this.asideULElement
-                    .children[0];
-            }
-            if (asideDefaultItemElement) {
-                /* 点击选择的那一项 */
-                asideDefaultItemElement.click();
-                if (isScrollToDefaultView) {
-                    asideDefaultItemElement?.scrollIntoView();
+                else {
+                    console.error("pops.panel：左侧容器没有项");
                 }
-            }
-            else {
-                console.error("pops.panel：左侧容器没有项");
-            }
-        },
-        /**
-         * 清空container容器的元素
-         */
-        clearContainer() {
-            this.sectionContainerHeaderULElement.innerHTML = "";
-            this.sectionContainerULElement.innerHTML = "";
-            this.$el.$content
-                ?.querySelectorAll("section.pops-panel-deepMenu-container")
-                .forEach((ele) => ele.remove());
-        },
-        /**
-         * 清空左侧容器已访问记录
-         */
-        clearAsideItemIsVisited() {
-            this.$el.$contentAside
-                .querySelectorAll(".pops-is-visited")
-                .forEach((element) => {
-                popsDOMUtils.removeClassName(element, "pops-is-visited");
-            });
-        },
-        /**
-         * 设置左侧容器已访问记录
-         * @param element
-         */
-        setAsideItemIsVisited(element) {
-            popsDOMUtils.addClassName(element, "pops-is-visited");
-        },
-        /**
-         * 为元素添加自定义属性
-         * @param element
-         * @param attributes
-         */
-        addElementAttributes(element, attributes) {
-            if (attributes == null) {
-                return;
-            }
-            if (Array.isArray(attributes)) {
-                attributes.forEach((attrObject) => {
-                    this.addElementAttributes(element, attrObject);
+            },
+            /**
+             * 清空container容器的元素
+             */
+            clearContainer() {
+                this.sectionContainerHeaderULElement.innerHTML = "";
+                this.sectionContainerULElement.innerHTML = "";
+                this.$el.$content
+                    ?.querySelectorAll("section.pops-panel-deepMenu-container")
+                    .forEach((ele) => ele.remove());
+            },
+            /**
+             * 清空左侧容器已访问记录
+             */
+            clearAsideItemIsVisited() {
+                this.$el.$contentAside
+                    .querySelectorAll(".pops-is-visited")
+                    .forEach((element) => {
+                    popsDOMUtils.removeClassName(element, "pops-is-visited");
                 });
-            }
-            else {
-                Object.keys(attributes).forEach((attributeName) => {
-                    element.setAttribute(attributeName, attributes[attributeName]);
+            },
+            /**
+             * 设置左侧容器已访问记录
+             * @param element
+             */
+            setAsideItemIsVisited(element) {
+                popsDOMUtils.addClassName(element, "pops-is-visited");
+            },
+            /**
+             * 为元素添加自定义属性
+             * @param element
+             * @param attributes
+             */
+            addElementAttributes(element, attributes) {
+                if (attributes == null) {
+                    return;
+                }
+                if (Array.isArray(attributes)) {
+                    attributes.forEach((attrObject) => {
+                        this.addElementAttributes(element, attrObject);
+                    });
+                }
+                else {
+                    Object.keys(attributes).forEach((attributeName) => {
+                        element.setAttribute(attributeName, attributes[attributeName]);
+                    });
+                }
+            },
+            /**
+             * 为元素设置(自定义)属性
+             * @param element
+             * @param props
+             */
+            setElementProps(element, props) {
+                if (props == null) {
+                    return;
+                }
+                Object.keys(props).forEach((propName) => {
+                    element[propName] = props[propName];
                 });
-            }
-        },
-        /**
-         * 为元素设置(自定义)属性
-         * @param element
-         * @param props
-         */
-        setElementProps(element, props) {
-            if (props == null) {
-                return;
-            }
-            Object.keys(props).forEach((propName) => {
-                element[propName] = props[propName];
-            });
-        },
-        /**
-         * 获取左侧容器元素<li>
-         * @param  asideConfig
-         */
-        getAsideItem(asideConfig) {
-            let liElement = document.createElement("li");
-            liElement.id = asideConfig.id;
-            liElement["__forms__"] = asideConfig.forms;
-            liElement.innerHTML = asideConfig.title;
-            this.addElementAttributes(liElement, asideConfig.attributes);
-            this.setElementProps(liElement, asideConfig.props);
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> switch
-         * @param formConfig
-         */
-        getSectionContainerItem_switch(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = /*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-switch">
-            <input class="pops-panel-switch__input" type="checkbox">
-            <span class="pops-panel-switch__core">
-                <div class="pops-panel-switch__action">
-                </div>
-            </span>
-        </div>`;
-            const PopsPanelSwitch = {
-                [Symbol.toStringTag]: "PopsPanelSwitch",
-                $data: {
-                    value: Boolean(formConfig.getValue()),
-                },
-                $ele: {
-                    switch: liElement.querySelector(".pops-panel-switch"),
-                    input: liElement.querySelector(".pops-panel-switch__input"),
-                    core: liElement.querySelector(".pops-panel-switch__core"),
-                },
-                init() {
-                    this.setStatus(this.$data.value);
-                    if (formConfig.disabled) {
-                        this.disable();
-                    }
-                    this.setClickEvent();
-                },
-                setClickEvent() {
-                    let that = this;
-                    popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
-                        if (that.$ele.input.disabled ||
-                            that.$ele.switch.hasAttribute("data-disabled")) {
-                            return;
+            },
+            /**
+             * 获取左侧容器元素<li>
+             * @param  asideConfig
+             */
+            getAsideItem(asideConfig) {
+                let liElement = document.createElement("li");
+                liElement.id = asideConfig.id;
+                liElement["__forms__"] = asideConfig.forms;
+                liElement.innerHTML = asideConfig.title;
+                this.addElementAttributes(liElement, asideConfig.attributes);
+                this.setElementProps(liElement, asideConfig.props);
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> switch
+             * @param formConfig
+             */
+            getSectionContainerItem_switch(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = /*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-switch">
+				<input class="pops-panel-switch__input" type="checkbox">
+				<span class="pops-panel-switch__core">
+					<div class="pops-panel-switch__action">
+					</div>
+				</span>
+			</div>`;
+                const PopsPanelSwitch = {
+                    [Symbol.toStringTag]: "PopsPanelSwitch",
+                    $data: {
+                        value: Boolean(formConfig.getValue()),
+                    },
+                    $ele: {
+                        switch: liElement.querySelector(".pops-panel-switch"),
+                        input: liElement.querySelector(".pops-panel-switch__input"),
+                        core: liElement.querySelector(".pops-panel-switch__core"),
+                    },
+                    init() {
+                        this.setStatus(this.$data.value);
+                        if (formConfig.disabled) {
+                            this.disable();
                         }
-                        that.$data.value = that.getStatus();
-                        that.setStatus(that.$data.value);
-                        if (typeof formConfig.callback === "function") {
-                            formConfig.callback(event, that.$data.value);
+                        this.setClickEvent();
+                    },
+                    setClickEvent() {
+                        let that = this;
+                        popsDOMUtils.on(this.$ele.core, "click", void 0, function (event) {
+                            if (that.$ele.input.disabled ||
+                                that.$ele.switch.hasAttribute("data-disabled")) {
+                                return;
+                            }
+                            that.$data.value = that.getStatus();
+                            that.setStatus(that.$data.value);
+                            if (typeof formConfig.callback === "function") {
+                                formConfig.callback(event, that.$data.value);
+                            }
+                        });
+                    },
+                    /**
+                     * 设置状态
+                     */
+                    setStatus(isChecked = false) {
+                        isChecked = Boolean(isChecked);
+                        this.$ele.input.checked = isChecked;
+                        if (isChecked) {
+                            popsDOMUtils.addClassName(this.$ele.switch, "pops-panel-switch-is-checked");
                         }
-                    });
-                },
+                        else {
+                            popsDOMUtils.removeClassName(this.$ele.switch, "pops-panel-switch-is-checked");
+                        }
+                    },
+                    /**
+                     * 根据className来获取逆反值
+                     */
+                    getStatus() {
+                        let checkedValue = false;
+                        if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
+                            checkedValue = true;
+                        }
+                        return checkedValue;
+                    },
+                    /**
+                     * 禁用复选框
+                     */
+                    disable() {
+                        this.$ele.input.disabled = true;
+                        this.$ele.switch.setAttribute("data-disabled", "true");
+                    },
+                    /**
+                     * 启用复选框
+                     */
+                    notDisable() {
+                        this.$ele.input.disabled = false;
+                        this.$ele.switch.removeAttribute("data-disabled");
+                    },
+                };
+                PopsPanelSwitch.init();
+                liElement["data-switch"] = PopsPanelSwitch;
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> slider
+             * @param formConfig
+             */
+            getSectionContainerItem_slider(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = `
+			<div class="pops-panel-item-left-text">
+				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+			</div>
+			<div class="pops-panel-slider">
+				<input type="range" min="${formConfig.min}" max="${formConfig.max}">
+			</div>`;
+                let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
+                if (formConfig.step) {
+                    rangeInputElement.setAttribute("step", formConfig.step.toString());
+                }
+                rangeInputElement.value = formConfig.getValue().toString();
                 /**
-                 * 设置状态
+                 * 获取提示的内容
+                 * @param value
                  */
-                setStatus(isChecked = false) {
-                    isChecked = Boolean(isChecked);
-                    this.$ele.input.checked = isChecked;
-                    if (isChecked) {
-                        popsDOMUtils.addClassName(this.$ele.switch, "pops-panel-switch-is-checked");
+                let getToolTipContent = function (value) {
+                    if (typeof formConfig.getToolTipContent === "function") {
+                        return formConfig.getToolTipContent(value);
                     }
                     else {
-                        popsDOMUtils.removeClassName(this.$ele.switch, "pops-panel-switch-is-checked");
+                        return value;
                     }
-                },
-                /**
-                 * 根据className来获取逆反值
-                 */
-                getStatus() {
-                    let checkedValue = false;
-                    if (!popsDOMUtils.containsClassName(this.$ele.switch, "pops-panel-switch-is-checked")) {
-                        checkedValue = true;
+                };
+                let tooltip = pops.tooltip({
+                    target: rangeInputElement.parentElement,
+                    content: getToolTipContent(rangeInputElement.value),
+                    zIndex: 1000000,
+                    className: "github-tooltip",
+                    showBeforeCallBack() {
+                        tooltip.toolTipNode.querySelector("div").innerText =
+                            getToolTipContent(rangeInputElement.value);
+                    },
+                    alwaysShow: false,
+                    only: false,
+                    position: "top",
+                    arrowDistance: 10,
+                });
+                popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
+                    tooltip.toolTipNode.querySelector("div").innerText =
+                        getToolTipContent(rangeInputElement.value);
+                    if (typeof formConfig.callback === "function") {
+                        formConfig.callback(event, event.target.value);
                     }
-                    return checkedValue;
-                },
-                /**
-                 * 禁用复选框
-                 */
-                disable() {
-                    this.$ele.input.disabled = true;
-                    this.$ele.switch.setAttribute("data-disabled", "true");
-                },
-                /**
-                 * 启用复选框
-                 */
-                notDisable() {
-                    this.$ele.input.disabled = false;
-                    this.$ele.switch.removeAttribute("data-disabled");
-                },
-            };
-            PopsPanelSwitch.init();
-            liElement["data-switch"] = PopsPanelSwitch;
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> slider
-         * @param formConfig
-         */
-        getSectionContainerItem_slider(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = `
-        <div class="pops-panel-item-left-text">
-            <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-            ${leftDescriptionText}
-        </div>
-        <div class="pops-panel-slider">
-            <input type="range" min="${formConfig.min}" max="${formConfig.max}">
-        </div>`;
-            let rangeInputElement = liElement.querySelector(".pops-panel-slider input[type=range]");
-            if (formConfig.step) {
-                rangeInputElement.setAttribute("step", formConfig.step.toString());
-            }
-            rangeInputElement.value = formConfig.getValue().toString();
+                });
+                return liElement;
+            },
             /**
-             * 获取提示的内容
-             * @param value
+             * 获取中间容器的元素<li>
+             * type ==> slider
+             * @param formConfig
              */
-            let getToolTipContent = function (value) {
-                if (typeof formConfig.getToolTipContent === "function") {
-                    return formConfig.getToolTipContent(value);
-                }
-                else {
-                    return value;
+            getSectionContainerItem_slider_new(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
                 }
-            };
-            let tooltip = pops.tooltip({
-                target: rangeInputElement.parentElement,
-                content: getToolTipContent(rangeInputElement.value),
-                zIndex: 1000000,
-                className: "github-tooltip",
-                showBeforeCallBack() {
-                    tooltip.toolTipNode.querySelector("div").innerText = getToolTipContent(rangeInputElement.value);
-                },
-                alwaysShow: false,
-                only: false,
-                position: "top",
-                arrowDistance: 10,
-            });
-            popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
-                tooltip.toolTipNode.querySelector("div").innerText = getToolTipContent(rangeInputElement.value);
-                if (typeof formConfig.callback === "function") {
-                    formConfig.callback(event, event.target.value);
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
                 }
-            });
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> slider
-         * @param formConfig
-         */
-        getSectionContainerItem_slider_new(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = /*html*/ `
-        <div class="pops-panel-item-left-text" style="flex: 1;">
-            <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-            ${leftDescriptionText}
-        </div>
-        <div class="pops-slider pops-slider-width">
-            <div class="pops-slider__runway">
-                <div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
-                <div class="pops-slider__button-wrapper" style="left: 0%">
-                    <div class="pops-slider__button"></div>
-                </div>
-            </div>
-        </div>`;
-            const PopsPanelSlider = {
-                [Symbol.toStringTag]: "PopsPanelSlider",
-                /**
-                 * 值
-                 */
-                value: formConfig.getValue(),
-                /**
-                 * 最小值
-                 */
-                min: formConfig.min,
-                /**
-                 * 最大值
-                 */
-                max: formConfig.max,
-                /**
-                 * 间隔
-                 */
-                step: formConfig.step || 1,
-                $data: {
+                liElement.innerHTML = /*html*/ `
+			<div class="pops-panel-item-left-text" style="flex: 1;">
+				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+				${leftDescriptionText}
+			</div>
+			<div class="pops-slider pops-slider-width">
+				<div class="pops-slider__runway">
+					<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
+					<div class="pops-slider__button-wrapper" style="left: 0%">
+						<div class="pops-slider__button"></div>
+					</div>
+				</div>
+			</div>`;
+                const PopsPanelSlider = {
+                    [Symbol.toStringTag]: "PopsPanelSlider",
                     /**
-                     * 是否正在移动
+                     * 值
                      */
-                    isMove: false,
+                    value: formConfig.getValue(),
                     /**
-                     * 是否已初始化已拖拽的距离
+                     * 最小值
                      */
-                    isInitDragPosition: false,
+                    min: formConfig.min,
                     /**
-                     * 是否正在检测是否停止拖拽
+                     * 最大值
                      */
-                    isCheckingStopDragMove: false,
+                    max: formConfig.max,
                     /**
-                     * 总宽度（px）
+                     * 间隔
                      */
-                    totalWidth: 0,
+                    step: formConfig.step || 1,
+                    $data: {
+                        /**
+                         * 是否正在移动
+                         */
+                        isMove: false,
+                        /**
+                         * 是否已初始化已拖拽的距离
+                         */
+                        isInitDragPosition: false,
+                        /**
+                         * 是否正在检测是否停止拖拽
+                         */
+                        isCheckingStopDragMove: false,
+                        /**
+                         * 总宽度（px）
+                         */
+                        totalWidth: 0,
+                        /**
+                         * 每一块的间隔（px）
+                         */
+                        stepPx: 0,
+                        /**
+                         * 已拖拽的距离（px）
+                         */
+                        dragWidth: 0,
+                        /**
+                         * 已拖拽的百分比
+                         */
+                        dragPercent: 0,
+                        /**
+                         * 每一次块的信息
+                         * 例如：当最小值是2，最大值是10，step为2
+                         * 那么生成[2,4,6,8,10] 共计5个
+                         * 又获取到当前滑块总长度是200px
+                         * 那么生成映射
+                         * 2 => 0px~40px
+                         * 4 => 40px~80px
+                         * 6 => 80px~120px
+                         * 8 => 120px~160px
+                         * 10 => 160px~200px
+                         */
+                        stepBlockMap: new Map(),
+                    },
+                    $ele: {
+                        slider: liElement.querySelector(".pops-slider"),
+                        runAway: liElement.querySelector(".pops-slider__runway"),
+                        bar: liElement.querySelector(".pops-slider__bar"),
+                        buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
+                        button: liElement.querySelector(".pops-slider__button"),
+                        tooltip: null,
+                    },
+                    $interval: {
+                        isCheck: false,
+                    },
+                    $tooltip: null,
+                    init() {
+                        this.initEleData();
+                        this.setToolTipEvent();
+                        this.setPanEvent();
+                        this.setRunAwayClickEvent();
+                        this.intervalInit();
+                        if (formConfig.disabled) {
+                            this.disableDrag();
+                        }
+                    },
                     /**
-                     * 每一块的间隔（px）
+                     * 10s内循环获取slider的宽度等信息
+                     * 获取到了就可以初始化left的值
+                     * @param {number} [checkStepTime=200] 每次检测的间隔时间
+                     * @param {number} [maxTime=10000] 最大的检测时间
                      */
-                    stepPx: 0,
+                    intervalInit(checkStepTime = 200, maxTime = 10000) {
+                        if (this.$interval.isCheck) {
+                            return;
+                        }
+                        this.$interval.isCheck = true;
+                        let isSuccess = false;
+                        let oldTotalWidth = this.$data.totalWidth;
+                        let timer = void 0;
+                        let interval = setInterval(() => {
+                            if (isSuccess) {
+                                this.$interval.isCheck = false;
+                                clearTimeout(timer);
+                                clearInterval(interval);
+                            }
+                            else {
+                                this.initTotalWidth();
+                                if (this.$data.totalWidth !== 0) {
+                                    isSuccess = true;
+                                    if (this.$data.totalWidth !== oldTotalWidth) {
+                                        /* slider的总宽度改变了 */
+                                        if (PopsMathFloatUtils.isFloat(this.step)) {
+                                            this.initFloatStepMap();
+                                        }
+                                        else {
+                                            this.initStepMap();
+                                        }
+                                        this.initSliderPosition();
+                                    }
+                                }
+                            }
+                        }, checkStepTime);
+                        /* 最长检测时间是10s */
+                        timer = setTimeout(() => {
+                            clearInterval(interval);
+                        }, maxTime);
+                    },
                     /**
-                     * 已拖拽的距离（px）
+                     * 把数据添加到元素上
                      */
-                    dragWidth: 0,
+                    initEleData() {
+                        this.$ele.slider.setAttribute("data-min", this.min.toString());
+                        this.$ele.slider.setAttribute("data-max", this.max.toString());
+                        this.$ele.slider.setAttribute("data-value", this.value.toString());
+                        this.$ele.slider.setAttribute("data-step", this.step.toString());
+                        this.$ele.slider["data-min"] = this.min;
+                        this.$ele.slider["data-max"] = this.max;
+                        this.$ele.slider["data-value"] = this.value;
+                        this.$ele.slider["data-step"] = this.step;
+                    },
                     /**
-                     * 已拖拽的百分比
+                     * 初始化滑块的总长度的数据(px)
                      */
-                    dragPercent: 0,
+                    initTotalWidth() {
+                        this.$data.totalWidth = popsDOMUtils.width(this.$ele.runAway);
+                    },
                     /**
-                     * 每一次块的信息
-                     * 例如：当最小值是2，最大值是10，step为2
-                     * 那么生成[2,4,6,8,10] 共计5个
-                     * 又获取到当前滑块总长度是200px
-                     * 那么生成映射
-                     * 2 => 0px~40px
-                     * 4 => 40px~80px
-                     * 6 => 80px~120px
-                     * 8 => 120px~160px
-                     * 10 => 160px~200px
+                     * 初始化每一个块的具体数据信息
                      */
-                    stepBlockMap: new Map(),
-                },
-                $ele: {
-                    slider: liElement.querySelector(".pops-slider"),
-                    runAway: liElement.querySelector(".pops-slider__runway"),
-                    bar: liElement.querySelector(".pops-slider__bar"),
-                    buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
-                    button: liElement.querySelector(".pops-slider__button"),
-                    tooltip: null,
-                },
-                $interval: {
-                    isCheck: false,
-                },
-                $tooltip: null,
-                init() {
-                    this.initEleData();
-                    this.setToolTipEvent();
-                    this.setPanEvent();
-                    this.setRunAwayClickEvent();
-                    this.intervalInit();
-                    if (formConfig.disabled) {
-                        this.disableDrag();
-                    }
-                },
-                /**
-                 * 10s内循环获取slider的宽度等信息
-                 * 获取到了就可以初始化left的值
-                 * @param {number} [checkStepTime=200] 每次检测的间隔时间
-                 * @param {number} [maxTime=10000] 最大的检测时间
-                 */
-                intervalInit(checkStepTime = 200, maxTime = 10000) {
-                    if (this.$interval.isCheck) {
-                        return;
-                    }
-                    this.$interval.isCheck = true;
-                    let isSuccess = false;
-                    let oldTotalWidth = this.$data.totalWidth;
-                    let timer = void 0;
-                    let interval = setInterval(() => {
-                        if (isSuccess) {
-                            this.$interval.isCheck = false;
-                            clearTimeout(timer);
-                            clearInterval(interval);
+                    initStepMap() {
+                        let index = 0;
+                        // 计算出份数
+                        let blockNums = (this.max - this.min) / this.step;
+                        // 计算出每一份占据的px
+                        this.$data.stepPx = this.$data.totalWidth / blockNums;
+                        let widthPx = 0;
+                        for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
+                            let value = this.formatValue(stepValue);
+                            let info = {};
+                            if (value === this.min) {
+                                /* 起始 */
+                                info = {
+                                    value: value,
+                                    px: 0,
+                                    pxLeft: 0,
+                                    pxRight: this.$data.stepPx / 2,
+                                    percent: 0,
+                                };
+                            }
+                            else {
+                                info = {
+                                    value: value,
+                                    px: widthPx,
+                                    pxLeft: widthPx - this.$data.stepPx / 2,
+                                    pxRight: widthPx + this.$data.stepPx / 2,
+                                    percent: widthPx / this.$data.totalWidth,
+                                };
+                                //if (value === this.max) {
+                                //  info["pxLeft"] = this.$data.stepBlockMap.get(
+                                //    index - 1
+                                //  ).pxRight;
+                                //  info["pxRight"] = this.$data.totalWidth;
+                                //}
+                            }
+                            this.$data.stepBlockMap.set(index, info);
+                            index++;
+                            widthPx += this.$data.stepPx;
                         }
-                        else {
-                            this.initTotalWidth();
-                            if (this.$data.totalWidth !== 0) {
-                                isSuccess = true;
-                                if (this.$data.totalWidth !== oldTotalWidth) {
-                                    /* slider的总宽度改变了 */
-                                    if (PopsMathFloatUtils.isFloat(this.step)) {
-                                        this.initFloatStepMap();
-                                    }
-                                    else {
-                                        this.initStepMap();
-                                    }
-                                    this.initSliderPosition();
-                                }
+                    },
+                    /**
+                     * 初始化每一个块的具体数据信息（浮点）
+                     */
+                    initFloatStepMap() {
+                        let index = 0;
+                        // 计算出份数
+                        let blockNums = (this.max - this.min) / this.step;
+                        // 计算出每一份占据的px
+                        this.$data.stepPx = this.$data.totalWidth / blockNums;
+                        let widthPx = 0;
+                        for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
+                            let value = this.formatValue(stepValue);
+                            let info = {};
+                            if (value === this.min) {
+                                /* 起始 */
+                                info = {
+                                    value: value,
+                                    px: 0,
+                                    pxLeft: 0,
+                                    pxRight: this.$data.stepPx / 2,
+                                    percent: 0,
+                                };
+                            }
+                            else {
+                                info = {
+                                    value: value,
+                                    px: widthPx,
+                                    pxLeft: widthPx - this.$data.stepPx / 2,
+                                    pxRight: widthPx + this.$data.stepPx / 2,
+                                    percent: widthPx / this.$data.totalWidth,
+                                };
+                                //if (value === this.max) {
+                                //  info["pxLeft"] = this.$data.stepBlockMap.get(
+                                //    index - 1
+                                //  ).pxRight;
+                                //  info["pxRight"] = this.$data.totalWidth;
+                                //}
                             }
+                            this.$data.stepBlockMap.set(index, info);
+                            index++;
+                            widthPx += this.$data.stepPx;
                         }
-                    }, checkStepTime);
-                    /* 最长检测时间是10s */
-                    timer = setTimeout(() => {
-                        clearInterval(interval);
-                    }, maxTime);
-                },
-                /**
-                 * 把数据添加到元素上
-                 */
-                initEleData() {
-                    this.$ele.slider.setAttribute("data-min", this.min.toString());
-                    this.$ele.slider.setAttribute("data-max", this.max.toString());
-                    this.$ele.slider.setAttribute("data-value", this.value.toString());
-                    this.$ele.slider.setAttribute("data-step", this.step.toString());
-                    this.$ele.slider["data-min"] = this.min;
-                    this.$ele.slider["data-max"] = this.max;
-                    this.$ele.slider["data-value"] = this.value;
-                    this.$ele.slider["data-step"] = this.step;
-                },
-                /**
-                 * 初始化滑块的总长度的数据(px)
-                 */
-                initTotalWidth() {
-                    this.$data.totalWidth = popsDOMUtils.width(this.$ele.runAway);
-                },
-                /**
-                 * 初始化每一个块的具体数据信息
-                 */
-                initStepMap() {
-                    let index = 0;
-                    // 计算出份数
-                    let blockNums = (this.max - this.min) / this.step;
-                    // 计算出每一份占据的px
-                    this.$data.stepPx = this.$data.totalWidth / blockNums;
-                    let widthPx = 0;
-                    for (let stepValue = this.min; stepValue <= this.max; stepValue += this.step) {
-                        let value = this.formatValue(stepValue);
-                        let info = {};
-                        if (value === this.min) {
-                            /* 起始 */
-                            info = {
-                                value: value,
-                                px: 0,
-                                pxLeft: 0,
-                                pxRight: this.$data.stepPx / 2,
-                                percent: 0,
-                            };
+                    },
+                    /**
+                     * 初始化slider的默认起始left的百分比值
+                     */
+                    initSliderPosition() {
+                        /* 设置起始默认style的left值 */
+                        let percent = 0;
+                        for (const [, stepBlockInfo] of this.$data.stepBlockMap.entries()) {
+                            /* 判断值是否和区域内的值相等 */
+                            if (stepBlockInfo.value == this.value) {
+                                percent = stepBlockInfo.percent;
+                                this.$data.dragWidth = stepBlockInfo.px;
+                                break;
+                            }
                         }
-                        else {
-                            info = {
-                                value: value,
-                                px: widthPx,
-                                pxLeft: widthPx - this.$data.stepPx / 2,
-                                pxRight: widthPx + this.$data.stepPx / 2,
-                                percent: widthPx / this.$data.totalWidth,
-                            };
-                            //if (value === this.max) {
-                            //  info["pxLeft"] = this.$data.stepBlockMap.get(
-                            //    index - 1
-                            //  ).pxRight;
-                            //  info["pxRight"] = this.$data.totalWidth;
-                            //}
+                        percent = this.formatValue(percent * 100);
+                        this.setSliderPosition(percent);
+                    },
+                    /**
+                     * 判断数字是否是浮点数
+                     * @param num
+                     * @returns
+                     */
+                    isFloat(num) {
+                        return Number(num) === num && num % 1 !== 0;
+                    },
+                    /**
+                     * 值改变的回调
+                     * @param event
+                     * @param value
+                     */
+                    valueChangeCallBack(event, value) {
+                        if (typeof formConfig.callback === "function") {
+                            formConfig.callback(event, value);
                         }
-                        this.$data.stepBlockMap.set(index, info);
-                        index++;
-                        widthPx += this.$data.stepPx;
-                    }
-                },
-                /**
-                 * 初始化每一个块的具体数据信息（浮点）
-                 */
-                initFloatStepMap() {
-                    let index = 0;
-                    // 计算出份数
-                    let blockNums = (this.max - this.min) / this.step;
-                    // 计算出每一份占据的px
-                    this.$data.stepPx = this.$data.totalWidth / blockNums;
-                    let widthPx = 0;
-                    for (let stepValue = this.min; stepValue <= this.max; stepValue = PopsMathFloatUtils.add(stepValue, this.step)) {
-                        let value = this.formatValue(stepValue);
-                        let info = {};
-                        if (value === this.min) {
-                            /* 起始 */
-                            info = {
-                                value: value,
-                                px: 0,
-                                pxLeft: 0,
-                                pxRight: this.$data.stepPx / 2,
-                                percent: 0,
-                            };
+                    },
+                    /**
+                     * 根据拖拽距离获取滑块应该在的区间和值
+                     */
+                    getDragInfo(dragX) {
+                        let result = this.$data.stepBlockMap.get(0);
+                        for (const [, stepBlockInfo] of this.$data.stepBlockMap.entries()) {
+                            if (stepBlockInfo.pxLeft <= dragX &&
+                                dragX < stepBlockInfo.pxRight) {
+                                result = stepBlockInfo;
+                                break;
+                            }
                         }
-                        else {
-                            info = {
-                                value: value,
-                                px: widthPx,
-                                pxLeft: widthPx - this.$data.stepPx / 2,
-                                pxRight: widthPx + this.$data.stepPx / 2,
-                                percent: widthPx / this.$data.totalWidth,
-                            };
-                            //if (value === this.max) {
-                            //  info["pxLeft"] = this.$data.stepBlockMap.get(
-                            //    index - 1
-                            //  ).pxRight;
-                            //  info["pxRight"] = this.$data.totalWidth;
-                            //}
+                        return result;
+                    },
+                    /**
+                     * 获取滑块的当前脱拖拽占据的百分比
+                     * @param {number} dragWidth
+                     */
+                    getSliderPositonPercent(dragWidth) {
+                        return dragWidth / this.$data.totalWidth;
+                    },
+                    /**
+                     * 根据step格式化value
+                     * @param num
+                     */
+                    formatValue(num) {
+                        if (PopsMathFloatUtils.isFloat(this.step)) {
+                            num = parseFloat(num.toFixed(2));
                         }
-                        this.$data.stepBlockMap.set(index, info);
-                        index++;
-                        widthPx += this.$data.stepPx;
-                    }
-                },
-                /**
-                 * 初始化slider的默认起始left的百分比值
-                 */
-                initSliderPosition() {
-                    /* 设置起始默认style的left值 */
-                    let percent = 0;
-                    for (const [, stepBlockInfo] of this.$data.stepBlockMap.entries()) {
-                        /* 判断值是否和区域内的值相等 */
-                        if (stepBlockInfo.value == this.value) {
-                            percent = stepBlockInfo.percent;
-                            this.$data.dragWidth = stepBlockInfo.px;
-                            break;
+                        else {
+                            num = parseInt(num.toString());
                         }
-                    }
-                    percent = this.formatValue(percent * 100);
-                    this.setSliderPosition(percent);
-                },
-                /**
-                 * 判断数字是否是浮点数
-                 * @param num
-                 * @returns
-                 */
-                isFloat(num) {
-                    return Number(num) === num && num % 1 !== 0;
-                },
-                /**
-                 * 值改变的回调
-                 * @param event
-                 * @param value
-                 */
-                valueChangeCallBack(event, value) {
-                    if (typeof formConfig.callback === "function") {
-                        formConfig.callback(event, value);
-                    }
-                },
-                /**
-                 * 根据拖拽距离获取滑块应该在的区间和值
-                 */
-                getDragInfo(dragX) {
-                    let result = this.$data.stepBlockMap.get(0);
-                    for (const [, stepBlockInfo] of this.$data.stepBlockMap.entries()) {
-                        if (stepBlockInfo.pxLeft <= dragX && dragX < stepBlockInfo.pxRight) {
-                            result = stepBlockInfo;
-                            break;
+                        return num;
+                    },
+                    /**
+                     * 设置滑块的位置偏移（left）
+                     * @param percent 百分比
+                     */
+                    setSliderPosition(percent) {
+                        if (parseInt(percent.toString()) === 1) {
+                            percent = 1;
                         }
-                    }
-                    return result;
-                },
-                /**
-                 * 获取滑块的当前脱拖拽占据的百分比
-                 * @param {number} dragWidth
-                 */
-                getSliderPositonPercent(dragWidth) {
-                    return dragWidth / this.$data.totalWidth;
-                },
-                /**
-                 * 根据step格式化value
-                 * @param num
-                 */
-                formatValue(num) {
-                    if (PopsMathFloatUtils.isFloat(this.step)) {
-                        num = parseFloat(num.toFixed(2));
-                    }
-                    else {
-                        num = parseInt(num.toString());
-                    }
-                    return num;
-                },
-                /**
-                 * 设置滑块的位置偏移（left）
-                 * @param percent 百分比
-                 */
-                setSliderPosition(percent) {
-                    if (parseInt(percent.toString()) === 1) {
-                        percent = 1;
-                    }
-                    if (percent > 1) {
-                        percent = percent / 100;
-                    }
-                    /* 滑块按钮的偏移 */
-                    this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
-                    /* 滑块进度的宽度 */
-                    this.$ele.bar.style.width = `${percent * 100}%`;
-                },
-                /**
-                 * 禁止拖拽
-                 */
-                disableDrag() {
-                    this.$ele.runAway.classList.add("pops-slider-is-disabled");
-                },
-                /**
-                 * 允许拖拽
-                 */
-                allowDrag() {
-                    this.$ele.runAway.classList.remove("pops-slider-is-disabled");
-                },
-                /**
-                 * 判断当前滑块是否被禁用
-                 */
-                isDisabledDrag() {
-                    return this.$ele.runAway.classList.contains("pops-slider-is-disabled");
-                },
-                /**
-                 * 设置进度条点击定位的事件
-                 */
-                setRunAwayClickEvent() {
-                    popsDOMUtils.on(this.$ele.runAway, "click", void 0, (event) => {
-                        if (event.target !== this.$ele.runAway &&
-                            event.target !== this.$ele.bar) {
-                            return;
+                        if (percent > 1) {
+                            percent = percent / 100;
                         }
-                        let clickX = parseFloat(event.offsetX);
-                        this.dragStartCallBack();
-                        this.dragMoveCallBack(event, clickX, this.value);
-                        this.dragEndCallBack(clickX);
-                    }, {
-                        capture: false,
-                    });
-                },
-                /**
-                 * 拖拽开始的回调，如果返回false，禁止拖拽
-                 */
-                dragStartCallBack() {
-                    if (!this.$data.isMove) {
-                        if (this.isDisabledDrag()) {
-                            return false;
+                        /* 滑块按钮的偏移 */
+                        this.$ele.buttonWrapper.style.left = `${percent * 100}%`;
+                        /* 滑块进度的宽度 */
+                        this.$ele.bar.style.width = `${percent * 100}%`;
+                    },
+                    /**
+                     * 禁止拖拽
+                     */
+                    disableDrag() {
+                        this.$ele.runAway.classList.add("pops-slider-is-disabled");
+                    },
+                    /**
+                     * 允许拖拽
+                     */
+                    allowDrag() {
+                        this.$ele.runAway.classList.remove("pops-slider-is-disabled");
+                    },
+                    /**
+                     * 判断当前滑块是否被禁用
+                     */
+                    isDisabledDrag() {
+                        return this.$ele.runAway.classList.contains("pops-slider-is-disabled");
+                    },
+                    /**
+                     * 设置进度条点击定位的事件
+                     */
+                    setRunAwayClickEvent() {
+                        popsDOMUtils.on(this.$ele.runAway, "click", void 0, (event) => {
+                            if (event.target !== this.$ele.runAway &&
+                                event.target !== this.$ele.bar) {
+                                return;
+                            }
+                            let clickX = parseFloat(event.offsetX);
+                            this.dragStartCallBack();
+                            this.dragMoveCallBack(event, clickX, this.value);
+                            this.dragEndCallBack(clickX);
+                        }, {
+                            capture: false,
+                        });
+                    },
+                    /**
+                     * 拖拽开始的回调，如果返回false，禁止拖拽
+                     */
+                    dragStartCallBack() {
+                        if (!this.$data.isMove) {
+                            if (this.isDisabledDrag()) {
+                                return false;
+                            }
+                            this.$data.isMove = true;
                         }
-                        this.$data.isMove = true;
-                    }
-                    return true;
-                },
-                /**
-                 * 拖拽中的回调
-                 * @param event 事件
-                 * @param dragX 当前拖拽的距离
-                 * @param oldValue 旧的值
-                 */
-                dragMoveCallBack(event, dragX, oldValue) {
-                    let dragPercent = 0;
-                    if (dragX <= 0) {
-                        dragPercent = 0;
-                        this.value = this.min;
-                    }
-                    else if (dragX >= this.$data.totalWidth) {
-                        dragPercent = 1;
-                        this.value = this.max;
-                    }
-                    else {
-                        const dragInfo = this.getDragInfo(dragX);
-                        dragPercent = dragInfo.percent;
-                        this.value = this.formatValue(dragInfo.value);
-                    }
-                    this.$data.dragPercent = dragPercent;
-                    this.setSliderPosition(this.$data.dragPercent);
-                    this.showToolTip();
-                    if (oldValue !== this.value) {
-                        this.valueChangeCallBack(event, this.value);
-                    }
-                },
-                /**
-                 * 拖拽结束的回调
-                 */
-                dragEndCallBack(dragX) {
-                    this.$data.isMove = false;
-                    if (dragX <= 0) {
-                        this.$data.dragWidth = 0;
-                    }
-                    else if (dragX >= this.$data.totalWidth) {
-                        this.$data.dragWidth = this.$data.totalWidth;
-                    }
-                    else {
-                        this.$data.dragWidth = dragX;
-                    }
-                    this.closeToolTip();
-                },
-                /**
-                 * 设置点击拖拽事件
-                 */
-                setPanEvent() {
-                    const AnyTouch = popsUtils.AnyTouch();
-                    this.$tooltip = new AnyTouch(this.$ele.button, {
-                        preventEvent() {
-                            return false;
-                        },
-                    });
+                        return true;
+                    },
                     /**
-                     * 当前的拖拽的距离px
+                     * 拖拽中的回调
+                     * @param event 事件
+                     * @param dragX 当前拖拽的距离
+                     * @param oldValue 旧的值
                      */
-                    let currentDragX = 0;
-                    /* 监听拖拽 */
-                    this.$tooltip.on("at:move", (event) => {
-                        if (!this.dragStartCallBack()) {
-                            return;
+                    dragMoveCallBack(event, dragX, oldValue) {
+                        let dragPercent = 0;
+                        if (dragX <= 0) {
+                            dragPercent = 0;
+                            this.value = this.min;
                         }
-                        let oldValue = this.value;
-                        const runAwayRect = this.$ele.runAway.getBoundingClientRect();
-                        let displacementX = event.x - (runAwayRect.left + globalThis.screenX);
-                        if (displacementX <= 0) {
-                            displacementX = 0;
+                        else if (dragX >= this.$data.totalWidth) {
+                            dragPercent = 1;
+                            this.value = this.max;
                         }
-                        else if (displacementX >= runAwayRect.width) {
-                            displacementX = runAwayRect.width;
+                        else {
+                            const dragInfo = this.getDragInfo(dragX);
+                            dragPercent = dragInfo.percent;
+                            this.value = this.formatValue(dragInfo.value);
                         }
-                        currentDragX = displacementX;
-                        /* 拖拽移动 */
-                        this.dragMoveCallBack(event, currentDragX, oldValue);
-                    });
-                    /* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
-                    this.$tooltip.on("at:end", (event) => {
-                        this.dragEndCallBack(currentDragX);
-                    });
-                },
-                /**
-                 * 显示悬浮的
-                 */
-                showToolTip() {
-                    this.$ele.tooltip.show();
-                },
-                /**
-                 * 关闭悬浮的
-                 */
-                closeToolTip() {
-                    this.$ele.tooltip.close();
-                },
-                /**
-                 * 检测在1000ms内，是否停止了拖拽
-                 */
-                checkStopDragMove() {
-                    if (this.$data.isCheckingStopDragMove) {
-                        return;
-                    }
-                    this.$data.isCheckingStopDragMove = true;
-                    let interval = setInterval(() => {
-                        if (!this.$data.isMove) {
-                            this.$data.isCheckingStopDragMove = false;
-                            this.closeToolTip();
-                            clearInterval(interval);
+                        this.$data.dragPercent = dragPercent;
+                        this.setSliderPosition(this.$data.dragPercent);
+                        this.showToolTip();
+                        if (oldValue !== this.value) {
+                            this.valueChangeCallBack(event, this.value);
                         }
-                    }, 200);
-                    setTimeout(() => {
-                        this.$data.isCheckingStopDragMove = false;
-                        clearInterval(interval);
-                    }, 2000);
-                },
-                /**
-                 * 设置拖拽按钮的悬浮事件
-                 */
-                setToolTipEvent() {
+                    },
                     /**
-                     * 获取提示的内容
+                     * 拖拽结束的回调
                      */
-                    function getToolTipContent() {
-                        if (typeof formConfig.getToolTipContent === "function") {
-                            return formConfig.getToolTipContent(PopsPanelSlider.value);
+                    dragEndCallBack(dragX) {
+                        this.$data.isMove = false;
+                        if (dragX <= 0) {
+                            this.$data.dragWidth = 0;
+                        }
+                        else if (dragX >= this.$data.totalWidth) {
+                            this.$data.dragWidth = this.$data.totalWidth;
                         }
                         else {
-                            return PopsPanelSlider.value;
+                            this.$data.dragWidth = dragX;
                         }
-                    }
-                    let tooltipContent = null;
-                    this.$ele.tooltip = pops.tooltip({
-                        target: this.$ele.button,
-                        content: getToolTipContent,
-                        zIndex: 1000000,
-                        className: "github-tooltip",
-                        only: false,
-                        eventOption: {
-                            capture: true,
-                            passive: true,
-                        },
-                        showBeforeCallBack: () => {
-                            this.intervalInit();
-                        },
-                        showAfterCallBack: (toolTipNode) => {
-                            tooltipContent.innerText = getToolTipContent();
-                        },
-                        closeBeforeCallBack: () => {
-                            if (this.$data.isMove) {
-                                this.checkStopDragMove();
+                        this.closeToolTip();
+                    },
+                    /**
+                     * 设置点击拖拽事件
+                     */
+                    setPanEvent() {
+                        const AnyTouch = popsUtils.AnyTouch();
+                        this.$tooltip = new AnyTouch(this.$ele.button, {
+                            preventEvent() {
                                 return false;
+                            },
+                        });
+                        /**
+                         * 当前的拖拽的距离px
+                         */
+                        let currentDragX = 0;
+                        /* 监听拖拽 */
+                        this.$tooltip.on("at:move", (event) => {
+                            if (!this.dragStartCallBack()) {
+                                return;
                             }
-                        },
-                        alwaysShow: false,
-                        // only: false,
-                        position: "top",
-                        arrowDistance: 10,
-                    });
-                    tooltipContent =
-                        this.$ele.tooltip.toolTipNode.querySelector("div");
-                },
-            };
-            PopsPanelSlider.init();
-            liElement["data-slider"] = PopsPanelSlider;
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> input
-         * @param formConfig
-         */
-        getSectionContainerItem_input(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            let inputType = "text";
-            if (formConfig.isPassword) {
-                inputType = "password";
-            }
-            else if (formConfig.isNumber) {
-                inputType = "number";
-            }
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = `
-        <div class="pops-panel-item-left-text">
-            <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-        ${leftDescriptionText}
-        </div>
-        <div class="pops-panel-input">
-            <input type="${inputType}" placeholder="${formConfig.placeholder}">
-        </div>
-        `;
-            const PopsPanelInput = {
-                [Symbol.toStringTag]: "PopsPanelInput",
-                $ele: {
-                    panelInput: liElement.querySelector(".pops-panel-input"),
-                    input: liElement.querySelector("input"),
-                    inputSpanIcon: document.createElement("span"),
-                    inputSpanIconInner: null,
-                    icon: null,
-                },
-                $data: {
-                    value: formConfig.getValue(),
-                    isView: false,
-                },
-                init() {
-                    this.initEle();
-                    this.setInputValue(this.$data.value);
-                    /* 如果是密码框，放进图标 */
-                    if (formConfig.isPassword) {
-                        this.setCircleIcon(pops.config.iconSVG.view);
-                        this.setCircleIconClickEvent();
-                    }
-                    else {
-                        /* 先判断预设值是否为空，不为空添加清空图标按钮 */
-                        if (this.$ele.input.value != "") {
-                            this.setCircleIcon(pops.config.iconSVG.circleClose);
-                            this.setCircleIconClickEvent();
-                        }
-                    }
-                    this.setInputChangeEvent();
-                    if (formConfig.disabled) {
-                        this.disable();
-                    }
-                    if (typeof formConfig.handlerCallBack === "function") {
-                        formConfig.handlerCallBack(liElement, this.$ele.input);
-                    }
-                },
-                /**
-                 * 初始化$ele的配置
-                 */
-                initEle() {
-                    this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
-                    this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
-                    this.$ele.inputSpanIcon.innerHTML = `
-                <span class="pops-panel-input__suffix-inner">
-                    <i class="pops-panel-icon"></i>
-                </span>
-                `;
-                    this.$ele.inputSpanIconInner =
-                        this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
-                    this.$ele.icon =
-                        this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
-                },
-                /**
-                 * 禁用
-                 */
-                disable() {
-                    this.$ele.input.disabled = true;
-                    this.$ele.panelInput.classList.add("pops-input-disabled");
-                },
-                /**
-                 * 取消禁用
-                 */
-                notDisable() {
-                    this.$ele.input.disabled = false;
-                    this.$ele.panelInput.classList.remove("pops-input-disabled");
-                },
-                /**
-                 * 判断是否已被禁用
-                 */
-                isDisabled() {
-                    return this.$ele.input.disabled;
-                },
-                /**
-                 * 设置输入框内容
-                 * @param {string} [value=""] 值
-                 */
-                setInputValue(value = "") {
-                    this.$ele.input.value = value;
-                },
-                /**
-                 * 设置input元素的type
-                 * @param {string} [typeValue="text"] type值
-                 */
-                setInputType(typeValue = "text") {
-                    this.$ele.input.setAttribute("type", typeValue);
-                },
-                /**
-                 * 删除图标按钮
-                 */
-                removeCircleIcon() {
-                    this.$ele.icon.innerHTML = "";
-                },
-                /**
-                 * 添加清空图标按钮
-                 * @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
-                 */
-                setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
-                    this.$ele.icon.innerHTML = svgHTML;
-                },
-                /**
-                 * 添加图标按钮的点击事件
-                 */
-                setCircleIconClickEvent() {
-                    popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
-                        if (this.isDisabled()) {
-                            return;
-                        }
-                        /* 删除图标 */
-                        this.removeCircleIcon();
-                        if (formConfig.isPassword) {
-                            /* 密码输入框 */
-                            if (this.$data.isView) {
-                                /* 当前可见 => 点击改变为隐藏 */
-                                this.$data.isView = false;
-                                /* 显示输入框内容，且更换图标为隐藏图标 */
-                                this.setInputType("text");
-                                this.setCircleIcon(pops.config.iconSVG.hide);
+                            let oldValue = this.value;
+                            const runAwayRect = this.$ele.runAway.getBoundingClientRect();
+                            let displacementX = event.x - (runAwayRect.left + globalThis.screenX);
+                            if (displacementX <= 0) {
+                                displacementX = 0;
                             }
-                            else {
-                                /* 当前不可见 => 点击改变为显示 */
-                                this.$data.isView = true;
-                                /* 隐藏输入框内容，且更换图标为显示图标 */
-                                this.setInputType("password");
-                                this.setCircleIcon(pops.config.iconSVG.view);
+                            else if (displacementX >= runAwayRect.width) {
+                                displacementX = runAwayRect.width;
                             }
+                            currentDragX = displacementX;
+                            /* 拖拽移动 */
+                            this.dragMoveCallBack(event, currentDragX, oldValue);
+                        });
+                        /* 监听触点离开，处理某些情况下，拖拽松开，但是未触发pan事件，可以通过设置这个来关闭tooltip */
+                        this.$tooltip.on("at:end", (event) => {
+                            this.dragEndCallBack(currentDragX);
+                        });
+                    },
+                    /**
+                     * 显示悬浮的
+                     */
+                    showToolTip() {
+                        this.$ele.tooltip.show();
+                    },
+                    /**
+                     * 关闭悬浮的
+                     */
+                    closeToolTip() {
+                        this.$ele.tooltip.close();
+                    },
+                    /**
+                     * 检测在1000ms内，是否停止了拖拽
+                     */
+                    checkStopDragMove() {
+                        if (this.$data.isCheckingStopDragMove) {
+                            return;
                         }
-                        else {
-                            /* 普通输入框 */
-                            /* 清空内容 */
-                            this.setInputValue("");
-                            /* 获取焦点 */
-                            this.$ele.input.focus();
-                            /* 触发内容改变事件 */
-                            this.$ele.input.dispatchEvent(new Event("input"));
-                        }
-                    });
-                },
-                /**
-                 * 监听输入框内容改变
-                 */
-                setInputChangeEvent() {
-                    popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
-                        this.$data.value = this.$ele.input.value;
-                        if (!formConfig.isPassword) {
-                            /* 不是密码框 */
-                            if (this.$ele.input.value !== "" &&
-                                this.$ele.icon.innerHTML === "") {
-                                /* 不为空，显示清空图标 */
-                                this.setCircleIcon(pops.config.iconSVG.circleClose);
-                                this.setCircleIconClickEvent();
+                        this.$data.isCheckingStopDragMove = true;
+                        let interval = setInterval(() => {
+                            if (!this.$data.isMove) {
+                                this.$data.isCheckingStopDragMove = false;
+                                this.closeToolTip();
+                                clearInterval(interval);
                             }
-                            else if (this.$ele.input.value === "") {
-                                this.removeCircleIcon();
-                            }
-                        }
-                        if (typeof formConfig.callback === "function") {
-                            if (formConfig.isNumber) {
-                                formConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
+                        }, 200);
+                        setTimeout(() => {
+                            this.$data.isCheckingStopDragMove = false;
+                            clearInterval(interval);
+                        }, 2000);
+                    },
+                    /**
+                     * 设置拖拽按钮的悬浮事件
+                     */
+                    setToolTipEvent() {
+                        /**
+                         * 获取提示的内容
+                         */
+                        function getToolTipContent() {
+                            if (typeof formConfig.getToolTipContent === "function") {
+                                return formConfig.getToolTipContent(PopsPanelSlider.value);
                             }
                             else {
-                                formConfig.callback(event, this.$ele.input.value);
+                                return PopsPanelSlider.value;
                             }
                         }
-                    });
-                },
-            };
-            PopsPanelInput.init();
-            liElement["data-input"] = PopsPanelInput;
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> textarea
-         * @param formConfig
-         */
-        getSectionContainerItem_textarea(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = `
-        <div class="pops-panel-item-left-text">
-            <p class="pops-panel-item-left-main-text">${formConfig.text}</p>
-        ${leftDescriptionText}
-        </div>
-        <div class="pops-panel-textarea">
-            <textarea placeholder="${formConfig.placeholder ?? ""}">
-        </textarea>
-        </div>
-        `;
-            const PopsPanelTextArea = {
-                [Symbol.toStringTag]: "PopsPanelTextArea",
-                $ele: {
-                    panelTextarea: liElement.querySelector(".pops-panel-textarea"),
-                    textarea: liElement.querySelector(".pops-panel-textarea textarea"),
-                },
-                $data: {
-                    value: formConfig.getValue(),
-                },
-                init() {
-                    this.setValue(this.$data.value);
-                    this.setChangeEvent();
-                    if (formConfig.disabled) {
-                        this.disable();
-                    }
-                },
-                disable() {
-                    this.$ele.textarea.setAttribute("disabled", "true");
-                    this.$ele.panelTextarea.classList.add("pops-panel-textarea-disable");
-                },
-                notDisable() {
-                    this.$ele.textarea.removeAttribute("disabled");
-                    this.$ele.panelTextarea.classList.remove("pops-panel-textarea-disable");
-                },
-                isDisabled() {
-                    return (this.$ele.textarea.hasAttribute("disabled") ||
-                        this.$ele.panelTextarea.classList.contains("pops-panel-textarea-disable"));
-                },
-                setValue(value) {
-                    this.$ele.textarea.value = value;
-                },
-                /**
-                 * 监听选择内容改变
-                 */
-                setChangeEvent() {
-                    popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
-                        this.$data.value = event.target.value;
-                        if (typeof formConfig.callback === "function") {
-                            formConfig.callback(event, event.target.value);
+                        let tooltipContent = null;
+                        this.$ele.tooltip = pops.tooltip({
+                            target: this.$ele.button,
+                            content: getToolTipContent,
+                            zIndex: 1000000,
+                            className: "github-tooltip",
+                            only: false,
+                            eventOption: {
+                                capture: true,
+                                passive: true,
+                            },
+                            showBeforeCallBack: () => {
+                                this.intervalInit();
+                            },
+                            showAfterCallBack: (toolTipNode) => {
+                                tooltipContent.innerText = getToolTipContent();
+                            },
+                            closeBeforeCallBack: () => {
+                                if (this.$data.isMove) {
+                                    this.checkStopDragMove();
+                                    return false;
+                                }
+                            },
+                            alwaysShow: false,
+                            // only: false,
+                            position: "top",
+                            arrowDistance: 10,
+                        });
+                        tooltipContent =
+                            this.$ele.tooltip.toolTipNode.querySelector("div");
+                    },
+                };
+                PopsPanelSlider.init();
+                liElement["data-slider"] = PopsPanelSlider;
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> input
+             * @param formConfig
+             */
+            getSectionContainerItem_input(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                let inputType = "text";
+                if (formConfig.isPassword) {
+                    inputType = "password";
+                }
+                else if (formConfig.isNumber) {
+                    inputType = "number";
+                }
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = `
+			<div class="pops-panel-item-left-text">
+				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+			${leftDescriptionText}
+			</div>
+			<div class="pops-panel-input">
+				<input type="${inputType}" placeholder="${formConfig.placeholder}">
+			</div>
+			`;
+                const PopsPanelInput = {
+                    [Symbol.toStringTag]: "PopsPanelInput",
+                    $ele: {
+                        panelInput: liElement.querySelector(".pops-panel-input"),
+                        input: liElement.querySelector("input"),
+                        inputSpanIcon: document.createElement("span"),
+                        inputSpanIconInner: null,
+                        icon: null,
+                    },
+                    $data: {
+                        value: formConfig.getValue(),
+                        isView: false,
+                    },
+                    init() {
+                        this.initEle();
+                        this.setInputValue(this.$data.value);
+                        /* 如果是密码框，放进图标 */
+                        if (formConfig.isPassword) {
+                            this.setCircleIcon(pops.config.iconSVG.view);
+                            this.setCircleIconClickEvent();
                         }
-                    });
-                },
-            };
-            PopsPanelTextArea.init();
-            liElement["data-textarea"] = PopsPanelTextArea;
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> select
-         * @param formConfig
-         */
-        getSectionContainerItem_select(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = /*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">
-            <select></select>
-        </div>
-        `;
-            const PopsPanelSelect = {
-                [Symbol.toStringTag]: "PopsPanelSelect",
-                $ele: {
-                    panelSelect: liElement.querySelector(".pops-panel-select"),
-                    select: liElement.querySelector(".pops-panel-select select"),
-                },
-                $eleKey: {
-                    disable: "__disable__",
-                    value: "__value__",
-                },
-                $data: {
-                    defaultValue: formConfig.getValue(),
-                },
-                init() {
-                    this.initOption();
-                    this.setChangeEvent();
-                    this.setClickEvent();
-                    if (formConfig.disabled) {
-                        this.disable();
-                    }
-                },
-                /**
-                 * 给option元素设置属性
-                 * @param $ele
-                 * @param key
-                 * @param value
-                 */
-                setNodeValue($ele, key, value) {
-                    Reflect.set($ele, key, value);
-                },
-                /**
-                 * 获取option元素上设置的属性
-                 * @param $ele
-                 * @param value
-                 * @param key
-                 */
-                getNodeValue($ele, key) {
-                    return Reflect.get($ele, key);
-                },
-                disable() {
-                    this.$ele.select.setAttribute("disabled", "true");
-                    this.$ele.panelSelect.classList.add("pops-panel-select-disable");
-                },
-                notDisable() {
-                    this.$ele.select.removeAttribute("disabled");
-                    this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
-                },
-                isDisabled() {
-                    return (this.$ele.select.hasAttribute("disabled") ||
-                        this.$ele.panelSelect.classList.contains("pops-panel-select-disable"));
-                },
-                initOption() {
-                    formConfig.data.forEach((dataItem) => {
-                        // 初始化默认选中
-                        let optionElement = document.createElement("option");
-                        this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
-                        this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
-                        if (dataItem.value === this.$data.defaultValue) {
-                            optionElement.setAttribute("selected", "true");
+                        else {
+                            /* 先判断预设值是否为空，不为空添加清空图标按钮 */
+                            if (this.$ele.input.value != "") {
+                                this.setCircleIcon(pops.config.iconSVG.circleClose);
+                                this.setCircleIconClickEvent();
+                            }
                         }
-                        optionElement.innerText = dataItem.text;
-                        this.$ele.select.appendChild(optionElement);
-                    });
-                },
-                /** 检测所有option并设置禁用状态 */
-                setSelectOptionsDisableStatus() {
-                    if (this.$ele.select.options && this.$ele.select.options.length) {
-                        Array.from(this.$ele.select.options).forEach((optionItem) => {
-                            this.setOptionDisableStatus(optionItem);
-                        });
-                    }
-                },
-                /** 设置禁用状态 */
-                setOptionDisableStatus(optionElement) {
-                    let disable = false;
-                    let optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
-                    if (optionDisableAttr === "function") {
-                        let value = this.getNodeValue(optionElement, this.$eleKey.value);
-                        disable = Boolean(optionDisableAttr(value));
-                    }
-                    if (disable) {
-                        optionElement.setAttribute("disabled", "true");
-                    }
-                    else {
-                        optionElement.removeAttribute("disabled");
-                    }
-                },
-                /** 获取option上的信息 */
-                getSelectOptionInfo($option) {
-                    let optionValue = this.getNodeValue($option, this.$eleKey.value);
-                    let optionText = $option.innerText || $option.textContent;
-                    return {
-                        value: optionValue,
-                        text: optionText,
-                        $option: $option,
-                    };
-                },
-                /**
-                 * 监听选择内容改变
-                 */
-                setChangeEvent() {
-                    popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
-                        this.setSelectOptionsDisableStatus();
-                        if (typeof formConfig.callback === "function") {
-                            let $isSelectedElement = event.target[event.target.selectedIndex];
-                            let selectInfo = this.getSelectOptionInfo($isSelectedElement);
-                            formConfig.callback(event, selectInfo.value, selectInfo.text);
+                        this.setInputChangeEvent();
+                        if (formConfig.disabled) {
+                            this.disable();
                         }
-                    });
-                },
-                /**
-                 * 监听点击事件
-                 */
-                setClickEvent() {
-                    popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
-                        this.setSelectOptionsDisableStatus();
-                        if (typeof formConfig.clickCallBack === "function") {
-                            formConfig.clickCallBack(event, this.$ele.select);
+                        if (typeof formConfig.handlerCallBack === "function") {
+                            formConfig.handlerCallBack(liElement, this.$ele.input);
                         }
-                    });
-                },
-            };
-            PopsPanelSelect.init();
-            Reflect.set(liElement, "data-select", PopsPanelSelect);
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> select-multiple
-         * @param formConfig
-         */
-        getSectionContainerItem_select_multiple_new(formConfig) {
-            let liElement = document.createElement("li");
-            Reflect.set(liElement, "__formConfig__", formConfig);
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = /*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-multiple">
-            <div class="el-select__wrapper">
-                <div class="el-select__selection">
-                    <!-- 这个是用于手动输入的，这里暂不适配 -->
-                    <div class="el-select__selected-item el-select__input-wrapper">
-
-                    </div>
-                    <!-- 这个是placeholder -->
-                    <div class="el-select__selected-item el-select__placeholder">
-                    </div>
-                </div>
-                <!-- 下拉箭头 -->
-                <div class="el-select__suffix">
-                    <i class="el-icon el-select__caret el-select__icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                            <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
-                        </svg>
-                    </i>
-                </div>
-            </div>
-        </div>
-        `;
-            const PopsPanelSelectMultiple = {
-                [Symbol.toStringTag]: "PopsPanelSelectMultiple",
-                $el: {
-                    /** 容器 */
-                    $container: void 0,
-                    /** 包括的容器 */
-                    $wrapper: void 0,
-                    /** 内容区域 */
-                    $section: void 0,
-                    /** 手动输入 */
-                    $selectedInputWrapper: void 0,
-                    /** 灰色提示语 */
-                    $selectedPlaceHolderWrapper: void 0,
-                    /** 下拉箭头区域 */
-                    $suffix: void 0,
-                    /** 下拉箭头图标 */
-                    $suffixIcon: void 0,
-                },
-                $data: {
-                    /** 默认值 */
-                    defaultValue: formConfig.getValue(),
-                    selectInfo: [],
-                },
-                /** 初始化 */
-                init() {
-                    this.initDefault();
-                    this.inintEl();
-                    this.initPlaceHolder();
-                    this.updateTagElement();
-                    this.setSelectContainerClickEvent();
-                },
-                /** 初始化默认值 */
-                initDefault() {
-                    formConfig.data.forEach((dataItem) => {
-                        if (this.$data.defaultValue.includes(dataItem.value)) {
-                            // 初始化选中的配置
-                            this.$data.selectInfo.push({
-                                text: dataItem.text,
-                                value: dataItem.value,
-                                isHTML: Boolean(dataItem.isHTML),
-                                disable: dataItem.disable,
-                            });
+                    },
+                    /**
+                     * 初始化$ele的配置
+                     */
+                    initEle() {
+                        this.$ele.input.parentElement.insertBefore(this.$ele.inputSpanIcon, this.$ele.input.nextSibling);
+                        this.$ele.inputSpanIcon.className = "pops-panel-input__suffix";
+                        this.$ele.inputSpanIcon.innerHTML = `
+					<span class="pops-panel-input__suffix-inner">
+						<i class="pops-panel-icon"></i>
+					</span>
+					`;
+                        this.$ele.inputSpanIconInner =
+                            this.$ele.inputSpanIcon.querySelector(".pops-panel-input__suffix-inner");
+                        this.$ele.icon =
+                            this.$ele.inputSpanIcon.querySelector(".pops-panel-icon");
+                    },
+                    /**
+                     * 禁用
+                     */
+                    disable() {
+                        this.$ele.input.disabled = true;
+                        this.$ele.panelInput.classList.add("pops-input-disabled");
+                    },
+                    /**
+                     * 取消禁用
+                     */
+                    notDisable() {
+                        this.$ele.input.disabled = false;
+                        this.$ele.panelInput.classList.remove("pops-input-disabled");
+                    },
+                    /**
+                     * 判断是否已被禁用
+                     */
+                    isDisabled() {
+                        return this.$ele.input.disabled;
+                    },
+                    /**
+                     * 设置输入框内容
+                     * @param {string} [value=""] 值
+                     */
+                    setInputValue(value = "") {
+                        this.$ele.input.value = value;
+                    },
+                    /**
+                     * 设置input元素的type
+                     * @param {string} [typeValue="text"] type值
+                     */
+                    setInputType(typeValue = "text") {
+                        this.$ele.input.setAttribute("type", typeValue);
+                    },
+                    /**
+                     * 删除图标按钮
+                     */
+                    removeCircleIcon() {
+                        this.$ele.icon.innerHTML = "";
+                    },
+                    /**
+                     * 添加清空图标按钮
+                     * @param {string} [svgHTML=pops.config.iconSVG.circleClose] svg图标，默认为清空的图标
+                     */
+                    setCircleIcon(svgHTML = pops.config.iconSVG.circleClose) {
+                        this.$ele.icon.innerHTML = svgHTML;
+                    },
+                    /**
+                     * 添加图标按钮的点击事件
+                     */
+                    setCircleIconClickEvent() {
+                        popsDOMUtils.on(this.$ele.icon, "click", void 0, () => {
+                            if (this.isDisabled()) {
+                                return;
+                            }
+                            /* 删除图标 */
+                            this.removeCircleIcon();
+                            if (formConfig.isPassword) {
+                                /* 密码输入框 */
+                                if (this.$data.isView) {
+                                    /* 当前可见 => 点击改变为隐藏 */
+                                    this.$data.isView = false;
+                                    /* 显示输入框内容，且更换图标为隐藏图标 */
+                                    this.setInputType("text");
+                                    this.setCircleIcon(pops.config.iconSVG.hide);
+                                }
+                                else {
+                                    /* 当前不可见 => 点击改变为显示 */
+                                    this.$data.isView = true;
+                                    /* 隐藏输入框内容，且更换图标为显示图标 */
+                                    this.setInputType("password");
+                                    this.setCircleIcon(pops.config.iconSVG.view);
+                                }
+                            }
+                            else {
+                                /* 普通输入框 */
+                                /* 清空内容 */
+                                this.setInputValue("");
+                                /* 获取焦点 */
+                                this.$ele.input.focus();
+                                /* 触发内容改变事件 */
+                                this.$ele.input.dispatchEvent(new Event("input"));
+                            }
+                        });
+                    },
+                    /**
+                     * 监听输入框内容改变
+                     */
+                    setInputChangeEvent() {
+                        popsDOMUtils.on(this.$ele.input, ["input", "propertychange"], void 0, (event) => {
+                            this.$data.value = this.$ele.input.value;
+                            if (!formConfig.isPassword) {
+                                /* 不是密码框 */
+                                if (this.$ele.input.value !== "" &&
+                                    this.$ele.icon.innerHTML === "") {
+                                    /* 不为空，显示清空图标 */
+                                    this.setCircleIcon(pops.config.iconSVG.circleClose);
+                                    this.setCircleIconClickEvent();
+                                }
+                                else if (this.$ele.input.value === "") {
+                                    this.removeCircleIcon();
+                                }
+                            }
+                            if (typeof formConfig.callback === "function") {
+                                if (formConfig.isNumber) {
+                                    formConfig.callback(event, this.$ele.input.value, this.$ele.input.valueAsNumber);
+                                }
+                                else {
+                                    formConfig.callback(event, this.$ele.input.value);
+                                }
+                            }
+                        });
+                    },
+                };
+                PopsPanelInput.init();
+                liElement["data-input"] = PopsPanelInput;
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> textarea
+             * @param formConfig
+             */
+            getSectionContainerItem_textarea(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = `
+			<div class="pops-panel-item-left-text">
+				<p class="pops-panel-item-left-main-text">${formConfig.text}</p>
+			${leftDescriptionText}
+			</div>
+			<div class="pops-panel-textarea">
+				<textarea placeholder="${formConfig.placeholder ?? ""}">
+			</textarea>
+			</div>
+			`;
+                const PopsPanelTextArea = {
+                    [Symbol.toStringTag]: "PopsPanelTextArea",
+                    $ele: {
+                        panelTextarea: liElement.querySelector(".pops-panel-textarea"),
+                        textarea: liElement.querySelector(".pops-panel-textarea textarea"),
+                    },
+                    $data: {
+                        value: formConfig.getValue(),
+                    },
+                    init() {
+                        this.setValue(this.$data.value);
+                        this.setChangeEvent();
+                        if (formConfig.disabled) {
+                            this.disable();
                         }
-                    });
-                },
-                /** 初始化$el变量 */
-                inintEl() {
-                    this.$el.$container = liElement.querySelector(".pops-panel-select-multiple");
-                    this.$el.$wrapper = liElement.querySelector(".el-select__wrapper");
-                    this.$el.$section = liElement.querySelector(".el-select__selection");
-                    this.$el.$selectedInputWrapper = liElement.querySelector(".el-select__selected-item.el-select__input-wrapper");
-                    this.$el.$selectedPlaceHolderWrapper =
-                        liElement.querySelector(".el-select__selected-item.el-select__placeholder");
-                    this.$el.$suffix =
-                        liElement.querySelector(".el-select__suffix");
-                    this.$el.$suffixIcon = liElement.querySelector(".el-select__suffix .el-icon");
-                    // 先把手动输入框隐藏
-                    this.hideInputWrapper();
-                },
-                /** 初始化提示文字 */
-                initPlaceHolder() {
-                    let placeholder = "";
-                    if (typeof formConfig.placeholder === "string") {
-                        placeholder = formConfig.placeholder;
-                    }
-                    else if (typeof formConfig.placeholder === "function") {
-                        let placeholderResult = formConfig.placeholder();
-                        if (typeof placeholderResult === "string") {
-                            placeholder = placeholderResult;
+                    },
+                    disable() {
+                        this.$ele.textarea.setAttribute("disabled", "true");
+                        this.$ele.panelTextarea.classList.add("pops-panel-textarea-disable");
+                    },
+                    notDisable() {
+                        this.$ele.textarea.removeAttribute("disabled");
+                        this.$ele.panelTextarea.classList.remove("pops-panel-textarea-disable");
+                    },
+                    isDisabled() {
+                        return (this.$ele.textarea.hasAttribute("disabled") ||
+                            this.$ele.panelTextarea.classList.contains("pops-panel-textarea-disable"));
+                    },
+                    setValue(value) {
+                        this.$ele.textarea.value = value;
+                    },
+                    /**
+                     * 监听选择内容改变
+                     */
+                    setChangeEvent() {
+                        popsDOMUtils.on(this.$ele.textarea, ["input", "propertychange"], void 0, (event) => {
+                            this.$data.value = event.target.value;
+                            if (typeof formConfig.callback === "function") {
+                                formConfig.callback(event, event.target.value);
+                            }
+                        });
+                    },
+                };
+                PopsPanelTextArea.init();
+                liElement["data-textarea"] = PopsPanelTextArea;
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> select
+             * @param formConfig
+             */
+            getSectionContainerItem_select(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = /*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">
+				<select></select>
+			</div>
+			`;
+                const PopsPanelSelect = {
+                    [Symbol.toStringTag]: "PopsPanelSelect",
+                    $ele: {
+                        panelSelect: liElement.querySelector(".pops-panel-select"),
+                        select: liElement.querySelector(".pops-panel-select select"),
+                    },
+                    $eleKey: {
+                        disable: "__disable__",
+                        value: "__value__",
+                    },
+                    $data: {
+                        defaultValue: formConfig.getValue(),
+                    },
+                    init() {
+                        this.initOption();
+                        this.setChangeEvent();
+                        this.setClickEvent();
+                        if (formConfig.disabled) {
+                            this.disable();
                         }
-                    }
-                    let $placeholder = popsDOMUtils.createElement("span", {
-                        innerText: placeholder,
-                    });
-                    this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
-                },
-                /** 初始化tag */
-                updateTagElement() {
-                    // 遍历数据，寻找对应的值
-                    formConfig.data.forEach((dataItem) => {
-                        let findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
-                        if (findValue) {
-                            // 选中的值和获取的所有的值相同
-                            let selectedInfo = this.createSelectedItem({
-                                text: dataItem.text,
-                                isHTML: dataItem.isHTML,
-                            });
-                            this.addSelectedItem(selectedInfo.$tag);
-                            this.setSelectedItemCloseIconClickEvent({
-                                $tag: selectedInfo.$tag,
-                                $closeIcon: selectedInfo.$closeIcon,
-                                value: dataItem.value,
-                                text: dataItem.text,
+                    },
+                    /**
+                     * 给option元素设置属性
+                     * @param $ele
+                     * @param key
+                     * @param value
+                     */
+                    setNodeValue($ele, key, value) {
+                        Reflect.set($ele, key, value);
+                    },
+                    /**
+                     * 获取option元素上设置的属性
+                     * @param $ele
+                     * @param value
+                     * @param key
+                     */
+                    getNodeValue($ele, key) {
+                        return Reflect.get($ele, key);
+                    },
+                    disable() {
+                        this.$ele.select.setAttribute("disabled", "true");
+                        this.$ele.panelSelect.classList.add("pops-panel-select-disable");
+                    },
+                    notDisable() {
+                        this.$ele.select.removeAttribute("disabled");
+                        this.$ele.panelSelect.classList.remove("pops-panel-select-disable");
+                    },
+                    isDisabled() {
+                        return (this.$ele.select.hasAttribute("disabled") ||
+                            this.$ele.panelSelect.classList.contains("pops-panel-select-disable"));
+                    },
+                    initOption() {
+                        formConfig.data.forEach((dataItem) => {
+                            // 初始化默认选中
+                            let optionElement = document.createElement("option");
+                            this.setNodeValue(optionElement, this.$eleKey.value, dataItem.value);
+                            this.setNodeValue(optionElement, this.$eleKey.disable, dataItem.disable);
+                            if (dataItem.value === this.$data.defaultValue) {
+                                optionElement.setAttribute("selected", "true");
+                            }
+                            optionElement.innerText = dataItem.text;
+                            this.$ele.select.appendChild(optionElement);
+                        });
+                    },
+                    /** 检测所有option并设置禁用状态 */
+                    setSelectOptionsDisableStatus() {
+                        if (this.$ele.select.options && this.$ele.select.options.length) {
+                            Array.from(this.$ele.select.options).forEach((optionItem) => {
+                                this.setOptionDisableStatus(optionItem);
                             });
                         }
-                    });
-                    this.checkTagEmpty();
-                },
-                /**
-                 * 生成一个tag项
-                 * @param data 配置
-                 */
-                createSelectedItem(data) {
-                    const $selectedItem = popsDOMUtils.createElement("div", {
-                        className: "el-select__selected-item el-select__choose_tag",
-                        innerHTML: /*html*/ `
-                    <span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
-                        <span class="el-tag__content">
-                            <span class="el-select__tags-text"></span>
-                        </span>
-                        <!-- 关闭tag的图标 -->
-                        <i class="el-icon el-tag__close">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                                <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
-                            </svg>
-                        </i>
-                    </span>
-                    `,
-                    });
-                    /** 标签 */
-                    const $tagText = $selectedItem.querySelector(".el-select__tags-text");
-                    /** 关闭图标 */
-                    const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
-                    if (data.isHTML) {
-                        $tagText.innerHTML = data.text;
-                    }
-                    else {
-                        $tagText.innerText = data.text;
-                    }
-                    return {
-                        $tag: $selectedItem,
-                        $tagText: $tagText,
-                        $closeIcon: $closeIcon,
-                    };
-                },
-                /**
-                 * 添加选中项元素
-                 */
-                addSelectedItem($ele) {
-                    // 往前添加
-                    // 去除前面的空白
-                    this.setSectionIsNear();
-                    if (this.$el.$section.contains(this.$el.$selectedInputWrapper)) {
-                        let $prev = this.$el.$selectedInputWrapper.previousElementSibling;
-                        if ($prev) {
-                            // 存在前一个元素，添加到前面的元素的后面
-                            popsDOMUtils.after($prev, $ele);
-                        }
-                        else {
-                            // 不存在前一个元素，添加到最前面
-                            popsDOMUtils.before(this.$el.$selectedInputWrapper, $ele);
+                    },
+                    /** 设置禁用状态 */
+                    setOptionDisableStatus(optionElement) {
+                        let disable = false;
+                        let optionDisableAttr = this.getNodeValue(optionElement, this.$eleKey.disable);
+                        if (optionDisableAttr === "function") {
+                            let value = this.getNodeValue(optionElement, this.$eleKey.value);
+                            disable = Boolean(optionDisableAttr(value));
                         }
-                    }
-                    else if (this.$el.$section.contains(this.$el.$selectedPlaceHolderWrapper)) {
-                        let $prev = this.$el.$selectedPlaceHolderWrapper.previousElementSibling;
-                        if ($prev) {
-                            // 存在前一个元素，添加到前面的元素的后面
-                            popsDOMUtils.after($prev, $ele);
+                        if (disable) {
+                            optionElement.setAttribute("disabled", "true");
                         }
                         else {
-                            // 不存在前一个元素，添加到最前面
-                            popsDOMUtils.before(this.$el.$selectedPlaceHolderWrapper, $ele);
+                            optionElement.removeAttribute("disabled");
                         }
-                    }
-                    else {
-                        this.$el.$section.appendChild($ele);
-                    }
-                    // 隐藏元素
-                    this.hideInputWrapper();
-                    this.hidePlaceHolderWrapper();
-                },
-                /** 更新tag信息 */
-                updateSelectTagItem() {
-                    this.$el.$section
-                        .querySelectorAll(".el-select__choose_tag")
-                        .forEach(($ele) => {
-                        $ele.remove();
-                    });
-                    this.updateTagElement();
-                },
-                /**
-                 * 选中的值改变的回调
-                 * @param currentSelectInfo 当前的选中信息
-                 */
-                selectValueChangeCallBack(currentSelectInfo) {
-                    if (typeof formConfig.callback === "function") {
-                        formConfig.callback(currentSelectInfo || this.$data.selectInfo);
-                    }
-                },
-                /** 设置下拉列表的点击事件 */
-                setSelectContainerClickEvent() {
-                    const that = this;
-                    popsDOMUtils.on(this.$el.$container, "click", (event) => {
-                        /** 弹窗的选中的值 */
-                        let selectedInfo = [];
-                        selectedInfo = selectedInfo.concat(that.$data.selectInfo);
-                        /**
-                         * 设置项选中
-                         * @param $ele
-                         */
-                        function setItemSelected($ele) {
-                            $ele.classList.add("select-item-is-selected");
+                    },
+                    /** 获取option上的信息 */
+                    getSelectOptionInfo($option) {
+                        let optionValue = this.getNodeValue($option, this.$eleKey.value);
+                        let optionText = $option.innerText || $option.textContent;
+                        return {
+                            value: optionValue,
+                            text: optionText,
+                            $option: $option,
+                        };
+                    },
+                    /**
+                     * 监听选择内容改变
+                     */
+                    setChangeEvent() {
+                        popsDOMUtils.on(this.$ele.select, "change", void 0, (event) => {
+                            this.setSelectOptionsDisableStatus();
+                            if (typeof formConfig.callback === "function") {
+                                let $isSelectedElement = event.target[event.target.selectedIndex];
+                                let selectInfo = this.getSelectOptionInfo($isSelectedElement);
+                                formConfig.callback(event, selectInfo.value, selectInfo.text);
+                            }
+                        });
+                    },
+                    /**
+                     * 监听点击事件
+                     */
+                    setClickEvent() {
+                        popsDOMUtils.on(this.$ele.select, "click", void 0, (event) => {
+                            this.setSelectOptionsDisableStatus();
+                            if (typeof formConfig.clickCallBack === "function") {
+                                formConfig.clickCallBack(event, this.$ele.select);
+                            }
+                        });
+                    },
+                };
+                PopsPanelSelect.init();
+                Reflect.set(liElement, "data-select", PopsPanelSelect);
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> select-multiple
+             * @param formConfig
+             */
+            getSectionContainerItem_select_multiple_new(formConfig) {
+                let liElement = document.createElement("li");
+                Reflect.set(liElement, "__formConfig__", formConfig);
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = /*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-multiple">
+				<div class="el-select__wrapper">
+					<div class="el-select__selection">
+						<!-- 这个是用于手动输入的，这里暂不适配 -->
+						<div class="el-select__selected-item el-select__input-wrapper">
+	
+						</div>
+						<!-- 这个是placeholder -->
+						<div class="el-select__selected-item el-select__placeholder">
+						</div>
+					</div>
+					<!-- 下拉箭头 -->
+					<div class="el-select__suffix">
+						<i class="el-icon el-select__caret el-select__icon">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+								<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
+							</svg>
+						</i>
+					</div>
+				</div>
+			</div>
+			`;
+                const PopsPanelSelectMultiple = {
+                    [Symbol.toStringTag]: "PopsPanelSelectMultiple",
+                    $el: {
+                        /** 容器 */
+                        $container: void 0,
+                        /** 包括的容器 */
+                        $wrapper: void 0,
+                        /** 内容区域 */
+                        $section: void 0,
+                        /** 手动输入 */
+                        $selectedInputWrapper: void 0,
+                        /** 灰色提示语 */
+                        $selectedPlaceHolderWrapper: void 0,
+                        /** 下拉箭头区域 */
+                        $suffix: void 0,
+                        /** 下拉箭头图标 */
+                        $suffixIcon: void 0,
+                    },
+                    $data: {
+                        /** 默认值 */
+                        defaultValue: formConfig.getValue(),
+                        selectInfo: [],
+                    },
+                    /** 初始化 */
+                    init() {
+                        this.initDefault();
+                        this.inintEl();
+                        this.initPlaceHolder();
+                        this.updateTagElement();
+                        this.setSelectContainerClickEvent();
+                    },
+                    /** 初始化默认值 */
+                    initDefault() {
+                        formConfig.data.forEach((dataItem) => {
+                            if (this.$data.defaultValue.includes(dataItem.value)) {
+                                // 初始化选中的配置
+                                this.$data.selectInfo.push({
+                                    text: dataItem.text,
+                                    value: dataItem.value,
+                                    isHTML: Boolean(dataItem.isHTML),
+                                    disable: dataItem.disable,
+                                });
+                            }
+                        });
+                    },
+                    /** 初始化$el变量 */
+                    inintEl() {
+                        this.$el.$container = liElement.querySelector(".pops-panel-select-multiple");
+                        this.$el.$wrapper = liElement.querySelector(".el-select__wrapper");
+                        this.$el.$section = liElement.querySelector(".el-select__selection");
+                        this.$el.$selectedInputWrapper = liElement.querySelector(".el-select__selected-item.el-select__input-wrapper");
+                        this.$el.$selectedPlaceHolderWrapper =
+                            liElement.querySelector(".el-select__selected-item.el-select__placeholder");
+                        this.$el.$suffix =
+                            liElement.querySelector(".el-select__suffix");
+                        this.$el.$suffixIcon = liElement.querySelector(".el-select__suffix .el-icon");
+                        // 先把手动输入框隐藏
+                        this.hideInputWrapper();
+                    },
+                    /** 初始化提示文字 */
+                    initPlaceHolder() {
+                        let placeholder = "";
+                        if (typeof formConfig.placeholder === "string") {
+                            placeholder = formConfig.placeholder;
                         }
-                        /**
-                         * 设置项取消选中
-                         * @param $ele
-                         */
-                        function removeItemSelected($ele) {
-                            $ele.classList.remove("select-item-is-selected");
+                        else if (typeof formConfig.placeholder === "function") {
+                            let placeholderResult = formConfig.placeholder();
+                            if (typeof placeholderResult === "string") {
+                                placeholder = placeholderResult;
+                            }
                         }
-                        /**
-                         * 添加选中信息
-                         */
-                        function addSelectedInfo($ele) {
-                            let info = getSelectedInfo($ele);
-                            let findValue = selectedInfo.find((item) => item.value === info.value);
-                            if (!findValue) {
-                                selectedInfo.push({
-                                    value: info.value,
-                                    text: info.text,
-                                    isHTML: Boolean(info.isHTML),
-                                    disable: info.disable,
+                        let $placeholder = popsDOMUtils.createElement("span", {
+                            innerText: placeholder,
+                        });
+                        this.$el.$selectedPlaceHolderWrapper.appendChild($placeholder);
+                    },
+                    /** 初始化tag */
+                    updateTagElement() {
+                        // 遍历数据，寻找对应的值
+                        formConfig.data.forEach((dataItem) => {
+                            let findValue = this.$data.selectInfo.find((item) => item.value === dataItem.value);
+                            if (findValue) {
+                                // 选中的值和获取的所有的值相同
+                                let selectedInfo = this.createSelectedItem({
+                                    text: dataItem.text,
+                                    isHTML: dataItem.isHTML,
+                                });
+                                this.addSelectedItem(selectedInfo.$tag);
+                                this.setSelectedItemCloseIconClickEvent({
+                                    $tag: selectedInfo.$tag,
+                                    $closeIcon: selectedInfo.$closeIcon,
+                                    value: dataItem.value,
+                                    text: dataItem.text,
                                 });
                             }
-                            that.selectValueChangeCallBack(selectedInfo);
+                        });
+                        this.checkTagEmpty();
+                    },
+                    /**
+                     * 生成一个tag项
+                     * @param data 配置
+                     */
+                    createSelectedItem(data) {
+                        const $selectedItem = popsDOMUtils.createElement("div", {
+                            className: "el-select__selected-item el-select__choose_tag",
+                            innerHTML: /*html*/ `
+						<span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
+							<span class="el-tag__content">
+								<span class="el-select__tags-text"></span>
+							</span>
+							<!-- 关闭tag的图标 -->
+							<i class="el-icon el-tag__close">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+									<path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
+								</svg>
+							</i>
+						</span>
+						`,
+                        });
+                        /** 标签 */
+                        const $tagText = $selectedItem.querySelector(".el-select__tags-text");
+                        /** 关闭图标 */
+                        const $closeIcon = $selectedItem.querySelector(".el-icon.el-tag__close");
+                        if (data.isHTML) {
+                            $tagText.innerHTML = data.text;
                         }
-                        /**
-                         * 移除选中信息
-                         */
-                        function removeSelectedInfo($ele) {
-                            let info = getSelectedInfo($ele);
-                            let findIndex = selectedInfo.findIndex((item) => item.value === info.value);
-                            if (findIndex !== -1) {
-                                selectedInfo.splice(findIndex, 1);
-                            }
-                            that.selectValueChangeCallBack(selectedInfo);
+                        else {
+                            $tagText.innerText = data.text;
                         }
-                        /**
-                         * 判断该项是否选中
-                         * @param $ele
-                         */
-                        function isSelected($ele) {
-                            return $ele.classList.contains("select-item-is-selected");
+                        return {
+                            $tag: $selectedItem,
+                            $tagText: $tagText,
+                            $closeIcon: $closeIcon,
+                        };
+                    },
+                    /**
+                     * 添加选中项元素
+                     */
+                    addSelectedItem($ele) {
+                        // 往前添加
+                        // 去除前面的空白
+                        this.setSectionIsNear();
+                        if (this.$el.$section.contains(this.$el.$selectedInputWrapper)) {
+                            let $prev = this.$el.$selectedInputWrapper.previousElementSibling;
+                            if ($prev) {
+                                // 存在前一个元素，添加到前面的元素的后面
+                                popsDOMUtils.after($prev, $ele);
+                            }
+                            else {
+                                // 不存在前一个元素，添加到最前面
+                                popsDOMUtils.before(this.$el.$selectedInputWrapper, $ele);
+                            }
                         }
-                        /**
-                         * 获取选中的项的信息
-                         */
-                        function getSelectedInfo($ele) {
-                            return Reflect.get($ele, "data-info");
+                        else if (this.$el.$section.contains(this.$el.$selectedPlaceHolderWrapper)) {
+                            let $prev = this.$el.$selectedPlaceHolderWrapper.previousElementSibling;
+                            if ($prev) {
+                                // 存在前一个元素，添加到前面的元素的后面
+                                popsDOMUtils.after($prev, $ele);
+                            }
+                            else {
+                                // 不存在前一个元素，添加到最前面
+                                popsDOMUtils.before(this.$el.$selectedPlaceHolderWrapper, $ele);
+                            }
                         }
-                        /**
-                         * 获取所有选中的项的信息
-                         */
-                        function getAllSelectedInfo() {
-                            return Array.from($selectContainer.querySelectorAll(".select-item"))
-                                .map(($ele) => {
-                                if (isSelected($ele)) {
-                                    return getSelectedInfo($ele);
-                                }
-                            })
-                                .filter((item) => {
-                                return item != null;
-                            });
+                        else {
+                            this.$el.$section.appendChild($ele);
                         }
-                        /**
-                         * 创建一个选择项元素
-                         */
-                        function createSelectItemElement(dataInfo) {
-                            let $item = popsDOMUtils.createElement("li", {
-                                className: "select-item",
-                                innerHTML: /*html*/ `
-								<span>${dataInfo.text}</span>
-							`,
-                            });
-                            Reflect.set($item, "data-info", dataInfo);
-                            return $item;
+                        // 隐藏元素
+                        this.hideInputWrapper();
+                        this.hidePlaceHolderWrapper();
+                    },
+                    /** 更新tag信息 */
+                    updateSelectTagItem() {
+                        this.$el.$section
+                            .querySelectorAll(".el-select__choose_tag")
+                            .forEach(($ele) => {
+                            $ele.remove();
+                        });
+                        this.updateTagElement();
+                    },
+                    /**
+                     * 选中的值改变的回调
+                     * @param currentSelectInfo 当前的选中信息
+                     */
+                    selectValueChangeCallBack(currentSelectInfo) {
+                        if (typeof formConfig.callback === "function") {
+                            formConfig.callback(currentSelectInfo || this.$data.selectInfo);
                         }
-                        /**
-                         * 设置选择项的点击事件
-                         */
-                        function setSelectElementClickEvent($ele) {
-                            popsDOMUtils.on($ele, "click", (event) => {
-                                popsDOMUtils.preventEvent(event);
-                                if (typeof formConfig.clickCallBack === "function") {
-                                    let clickResult = formConfig.clickCallBack(event, getAllSelectedInfo());
-                                    if (typeof clickResult === "boolean" && !clickResult) {
-                                        return;
-                                    }
-                                }
-                                // 修改选中状态
-                                if (isSelected($ele)) {
-                                    removeItemSelected($ele);
-                                    removeSelectedInfo($ele);
+                    },
+                    /** 设置下拉列表的点击事件 */
+                    setSelectContainerClickEvent() {
+                        const that = this;
+                        popsDOMUtils.on(this.$el.$container, "click", (event) => {
+                            /** 弹窗的选中的值 */
+                            let selectedInfo = [];
+                            selectedInfo = selectedInfo.concat(that.$data.selectInfo);
+                            /**
+                             * 设置项选中
+                             * @param $ele
+                             */
+                            function setItemSelected($ele) {
+                                $ele.classList.add("select-item-is-selected");
+                            }
+                            /**
+                             * 设置项取消选中
+                             * @param $ele
+                             */
+                            function removeItemSelected($ele) {
+                                $ele.classList.remove("select-item-is-selected");
+                            }
+                            /**
+                             * 添加选中信息
+                             */
+                            function addSelectedInfo($ele) {
+                                let info = getSelectedInfo($ele);
+                                let findValue = selectedInfo.find((item) => item.value === info.value);
+                                if (!findValue) {
+                                    selectedInfo.push({
+                                        value: info.value,
+                                        text: info.text,
+                                        isHTML: Boolean(info.isHTML),
+                                        disable: info.disable,
+                                    });
                                 }
-                                else {
-                                    setItemSelected($ele);
-                                    addSelectedInfo($ele);
+                                that.selectValueChangeCallBack(selectedInfo);
+                            }
+                            /**
+                             * 移除选中信息
+                             */
+                            function removeSelectedInfo($ele) {
+                                let info = getSelectedInfo($ele);
+                                let findIndex = selectedInfo.findIndex((item) => item.value === info.value);
+                                if (findIndex !== -1) {
+                                    selectedInfo.splice(findIndex, 1);
                                 }
-                            });
-                        }
-                        let { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
-                        let confirmDetails = popsUtils.assign({
-                            title: {
-                                text: "请勾选需要选择的选项",
-                                position: "center",
-                            },
-                            content: {
-                                text: /*html*/ `
-								<ul class="select-container"></ul>
+                                that.selectValueChangeCallBack(selectedInfo);
+                            }
+                            /**
+                             * 判断该项是否选中
+                             * @param $ele
+                             */
+                            function isSelected($ele) {
+                                return $ele.classList.contains("select-item-is-selected");
+                            }
+                            /**
+                             * 获取选中的项的信息
+                             */
+                            function getSelectedInfo($ele) {
+                                return Reflect.get($ele, "data-info");
+                            }
+                            /**
+                             * 获取所有选中的项的信息
+                             */
+                            function getAllSelectedInfo() {
+                                return Array.from($selectContainer.querySelectorAll(".select-item"))
+                                    .map(($ele) => {
+                                    if (isSelected($ele)) {
+                                        return getSelectedInfo($ele);
+                                    }
+                                })
+                                    .filter((item) => {
+                                    return item != null;
+                                });
+                            }
+                            /**
+                             * 创建一个选择项元素
+                             */
+                            function createSelectItemElement(dataInfo) {
+                                let $item = popsDOMUtils.createElement("li", {
+                                    className: "select-item",
+                                    innerHTML: /*html*/ `
+									<span>${dataInfo.text}</span>
 								`,
-                                html: true,
-                            },
-                            btn: {
-                                ok: {
-                                    enable: false,
+                                });
+                                Reflect.set($item, "data-info", dataInfo);
+                                return $item;
+                            }
+                            /**
+                             * 设置选择项的点击事件
+                             */
+                            function setSelectElementClickEvent($ele) {
+                                popsDOMUtils.on($ele, "click", (event) => {
+                                    popsDOMUtils.preventEvent(event);
+                                    if (typeof formConfig.clickCallBack === "function") {
+                                        let clickResult = formConfig.clickCallBack(event, getAllSelectedInfo());
+                                        if (typeof clickResult === "boolean" && !clickResult) {
+                                            return;
+                                        }
+                                    }
+                                    // 修改选中状态
+                                    if (isSelected($ele)) {
+                                        removeItemSelected($ele);
+                                        removeSelectedInfo($ele);
+                                    }
+                                    else {
+                                        setItemSelected($ele);
+                                        addSelectedInfo($ele);
+                                    }
+                                });
+                            }
+                            let { style, ...userConfirmDetails } = formConfig.selectConfirmDialogDetails || {};
+                            let confirmDetails = popsUtils.assign({
+                                title: {
+                                    text: "请勾选需要选择的选项",
+                                    position: "center",
+                                },
+                                content: {
+                                    text: /*html*/ `
+									<ul class="select-container"></ul>
+									`,
+                                    html: true,
+                                },
+                                btn: {
+                                    ok: {
+                                        enable: false,
+                                    },
+                                    close: {
+                                        enable: true,
+                                        callback(details, event) {
+                                            that.$data.selectInfo = [...selectedInfo];
+                                            that.updateSelectTagItem();
+                                            details.close();
+                                        },
+                                    },
                                 },
-                                close: {
+                                mask: {
                                     enable: true,
-                                    callback(details, event) {
+                                    clickCallBack(originalRun, config) {
+                                        originalRun();
                                         that.$data.selectInfo = [...selectedInfo];
                                         that.updateSelectTagItem();
-                                        details.close();
+                                    },
+                                    clickEvent: {
+                                        toClose: true,
                                     },
                                 },
-                            },
-                            mask: {
-                                enable: true,
-                                clickCallBack(originalRun, config) {
-                                    originalRun();
-                                    that.$data.selectInfo = [...selectedInfo];
-                                    that.updateSelectTagItem();
-                                },
-                                clickEvent: {
-                                    toClose: true,
-                                },
-                            },
-                            drag: true,
-                            dragLimit: true,
-                            width: "300px",
-                            height: "300px",
-                            style: /*css*/ `
-							.select-container{
-								--el-font-size-base: 14px;
-								--el-text-color-regular: #606266;
-								--el-color-primary: #409eff;
-								--el-fill-color-light: #f5f7fa;
-							}
-							.select-item{
-								cursor: pointer;
-								cursor: pointer;
-								font-size: var(--el-font-size-base);
-								padding: 0 32px 0 20px;
-								position: relative;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								color: var(--el-text-color-regular);
-								height: 34px;
-								line-height: 34px;
-								box-sizing: border-box;
-							}
-							.select-item:hover{
-								background-color: var(--el-fill-color-light);
-							}
-							.select-item.select-item-is-selected{
-								color: var(--el-color-primary);
-								font-weight: 700;
-							}
-							.select-item.select-item-is-selected::after{
-								content: "";
-								position: absolute;
-								top: 50%;
-								right: 20px;
-								border-top: none;
-								border-right: none;
-								background-repeat: no-repeat;
-								background-position: center;
-								background-color: var(--el-color-primary);
-								mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-								mask-size: 100% 100%;
-								-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-								-webkit-mask-size: 100% 100%;
-								transform: translateY(-50%);
-								width: 12px;
-								height: 12px;
-							}
-							${style || ""}
-							`,
-                        }, userConfirmDetails);
-                        let $dialog = pops.alert(confirmDetails);
-                        let $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
-                        // 配置选项元素
-                        formConfig.data.forEach((item) => {
-                            let $select = createSelectItemElement(item);
-                            // 添加到confirm中
-                            $selectContainer.appendChild($select);
-                            // 设置每一项的点击事件
-                            setSelectElementClickEvent($select);
-                            let findValue = selectedInfo.find((value) => value.value === item.value);
-                            if (findValue) {
-                                setItemSelected($select);
+                                drag: true,
+                                dragLimit: true,
+                                width: "300px",
+                                height: "300px",
+                                style: /*css*/ `
+								.select-container{
+									--el-font-size-base: 14px;
+									--el-text-color-regular: #606266;
+									--el-color-primary: #409eff;
+									--el-fill-color-light: #f5f7fa;
+								}
+								.select-item{
+									cursor: pointer;
+									cursor: pointer;
+									font-size: var(--el-font-size-base);
+									padding: 0 32px 0 20px;
+									position: relative;
+									white-space: nowrap;
+									overflow: hidden;
+									text-overflow: ellipsis;
+									color: var(--el-text-color-regular);
+									height: 34px;
+									line-height: 34px;
+									box-sizing: border-box;
+								}
+								.select-item:hover{
+									background-color: var(--el-fill-color-light);
+								}
+								.select-item.select-item-is-selected{
+									color: var(--el-color-primary);
+									font-weight: 700;
+								}
+								.select-item.select-item-is-selected::after{
+									content: "";
+									position: absolute;
+									top: 50%;
+									right: 20px;
+									border-top: none;
+									border-right: none;
+									background-repeat: no-repeat;
+									background-position: center;
+									background-color: var(--el-color-primary);
+									mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
+									mask-size: 100% 100%;
+									-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
+									-webkit-mask-size: 100% 100%;
+									transform: translateY(-50%);
+									width: 12px;
+									height: 12px;
+								}
+								${style || ""}
+								`,
+                            }, userConfirmDetails);
+                            let $dialog = pops.alert(confirmDetails);
+                            let $selectContainer = $dialog.$shadowRoot.querySelector(".select-container");
+                            // 配置选项元素
+                            formConfig.data.forEach((item) => {
+                                let $select = createSelectItemElement(item);
+                                // 添加到confirm中
+                                $selectContainer.appendChild($select);
+                                // 设置每一项的点击事件
+                                setSelectElementClickEvent($select);
+                                let findValue = selectedInfo.find((value) => value.value === item.value);
+                                if (findValue) {
+                                    setItemSelected($select);
+                                }
+                            });
+                        });
+                    },
+                    /** 设置关闭图标的点击事件 */
+                    setSelectedItemCloseIconClickEvent(data) {
+                        popsDOMUtils.on(data.$closeIcon, "click", (event) => {
+                            popsDOMUtils.preventEvent(event);
+                            if (typeof formConfig.closeIconClickCallBack === "function") {
+                                let result = formConfig.closeIconClickCallBack(event, {
+                                    $tag: data.$tag,
+                                    $closeIcon: data.$closeIcon,
+                                    value: data.value,
+                                    text: data.text,
+                                });
+                                if (typeof result === "boolean" && !result) {
+                                    return;
+                                }
+                            }
+                            this.removeSelectedItem(data.$tag);
+                            this.removeSelectedInfo({
+                                value: data.value,
+                                text: data.text,
+                            });
+                        }, {
+                            capture: true,
+                        });
+                    },
+                    /**
+                     * 检测tag是否为空，为空显示placeholder
+                     */
+                    checkTagEmpty() {
+                        if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
+                            // 没有tag了
+                            // this.showInputWrapper();
+                            this.showPlaceHolderWrapper();
+                            this.removeSectionIsNear();
+                        }
+                    },
+                    /** 移除选中项元素 */
+                    removeSelectedItem($ele) {
+                        $ele.remove();
+                        this.checkTagEmpty();
+                    },
+                    /** 移除选中的信息 */
+                    removeSelectedInfo(data) {
+                        for (let index = 0; index < this.$data.selectInfo.length; index++) {
+                            const selectInfo = this.$data.selectInfo[index];
+                            if (selectInfo.value === data.value) {
+                                this.$data.selectInfo.splice(index, 1);
+                                break;
+                            }
+                        }
+                        this.selectValueChangeCallBack();
+                    },
+                    /** 显示输入框 */
+                    showInputWrapper() {
+                        popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
+                    },
+                    /** 隐藏输入框 */
+                    hideInputWrapper() {
+                        popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
+                    },
+                    /** 显示palceholder */
+                    showPlaceHolderWrapper() {
+                        popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
+                    },
+                    /** 隐藏palceholder */
+                    hidePlaceHolderWrapper() {
+                        popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
+                    },
+                    /** 设置隐藏section的前面的空白 */
+                    setSectionIsNear() {
+                        this.$el.$section.classList.add("is-near");
+                    },
+                    /** 取消设置隐藏section的前面的空白 */
+                    removeSectionIsNear() {
+                        this.$el.$section.classList.remove("is-near");
+                    },
+                };
+                PopsPanelSelectMultiple.init();
+                Reflect.set(liElement, "data-select-multiple", PopsPanelSelectMultiple);
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ==> button
+             * @param formConfig
+             */
+            getSectionContainerItem_button(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                this.addElementAttributes(liElement, formConfig.attributes);
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                liElement.innerHTML = /*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-button">
+				<button class="pops-panel-button_inner">
+					<i class="pops-bottom-icon"></i>
+					<span class="pops-panel-button-text"></span>
+				</button>
+			</div>
+			`;
+                const PopsPanelButton = {
+                    [Symbol.toStringTag]: "PopsPanelButton",
+                    $ele: {
+                        panelButton: liElement.querySelector(".pops-panel-button"),
+                        button: liElement.querySelector(".pops-panel-button .pops-panel-button_inner"),
+                        icon: liElement.querySelector(".pops-panel-button .pops-bottom-icon"),
+                        spanText: liElement.querySelector(".pops-panel-button .pops-panel-button-text"),
+                    },
+                    $data: {},
+                    init() {
+                        this.$ele.panelButton.appendChild(this.$ele.button);
+                        this.initButton();
+                        this.setClickEvent();
+                    },
+                    initButton() {
+                        if (typeof formConfig.buttonIcon === "string" &&
+                            formConfig.buttonIcon.trim() !== "") {
+                            /* 存在icon图标且不为空 */
+                            if (formConfig.buttonIcon in pops.config.iconSVG) {
+                                this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
                             }
-                        });
-                    });
-                },
-                /** 设置关闭图标的点击事件 */
-                setSelectedItemCloseIconClickEvent(data) {
-                    popsDOMUtils.on(data.$closeIcon, "click", (event) => {
-                        popsDOMUtils.preventEvent(event);
-                        if (typeof formConfig.closeIconClickCallBack === "function") {
-                            let result = formConfig.closeIconClickCallBack(event, {
-                                $tag: data.$tag,
-                                $closeIcon: data.$closeIcon,
-                                value: data.value,
-                                text: data.text,
-                            });
-                            if (typeof result === "boolean" && !result) {
-                                return;
+                            else {
+                                this.setIconSVG(formConfig.buttonIcon);
                             }
+                            this.showIcon();
                         }
-                        this.removeSelectedItem(data.$tag);
-                        this.removeSelectedInfo({
-                            value: data.value,
-                            text: data.text,
-                        });
-                    }, {
-                        capture: true,
-                    });
-                },
-                /**
-                 * 检测tag是否为空，为空显示placeholder
-                 */
-                checkTagEmpty() {
-                    if (!this.$el.$section.querySelectorAll(".el-select__choose_tag").length) {
-                        // 没有tag了
-                        // this.showInputWrapper();
-                        this.showPlaceHolderWrapper();
-                        this.removeSectionIsNear();
-                    }
-                },
-                /** 移除选中项元素 */
-                removeSelectedItem($ele) {
-                    $ele.remove();
-                    this.checkTagEmpty();
-                },
-                /** 移除选中的信息 */
-                removeSelectedInfo(data) {
-                    for (let index = 0; index < this.$data.selectInfo.length; index++) {
-                        const selectInfo = this.$data.selectInfo[index];
-                        if (selectInfo.value === data.value) {
-                            this.$data.selectInfo.splice(index, 1);
-                            break;
+                        else {
+                            this.hideIcon();
                         }
-                    }
-                    this.selectValueChangeCallBack();
-                },
-                /** 显示输入框 */
-                showInputWrapper() {
-                    popsDOMUtils.cssShow(this.$el.$selectedInputWrapper);
-                },
-                /** 隐藏输入框 */
-                hideInputWrapper() {
-                    popsDOMUtils.cssHide(this.$el.$selectedInputWrapper, true);
-                },
-                /** 显示palceholder */
-                showPlaceHolderWrapper() {
-                    popsDOMUtils.cssShow(this.$el.$selectedPlaceHolderWrapper);
-                },
-                /** 隐藏palceholder */
-                hidePlaceHolderWrapper() {
-                    popsDOMUtils.cssHide(this.$el.$selectedPlaceHolderWrapper, true);
-                },
-                /** 设置隐藏section的前面的空白 */
-                setSectionIsNear() {
-                    this.$el.$section.classList.add("is-near");
-                },
-                /** 取消设置隐藏section的前面的空白 */
-                removeSectionIsNear() {
-                    this.$el.$section.classList.remove("is-near");
-                },
-            };
-            PopsPanelSelectMultiple.init();
-            Reflect.set(liElement, "data-select-multiple", PopsPanelSelectMultiple);
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ==> button
-         * @param formConfig
-         */
-        getSectionContainerItem_button(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            this.addElementAttributes(liElement, formConfig.attributes);
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            liElement.innerHTML = /*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-button">
-            <button class="pops-panel-button_inner">
-                <i class="pops-bottom-icon"></i>
-                <span class="pops-panel-button-text"></span>
-            </button>
-        </div>
-        `;
-            const PopsPanelButton = {
-                [Symbol.toStringTag]: "PopsPanelButton",
-                $ele: {
-                    panelButton: liElement.querySelector(".pops-panel-button"),
-                    button: liElement.querySelector(".pops-panel-button .pops-panel-button_inner"),
-                    icon: liElement.querySelector(".pops-panel-button .pops-bottom-icon"),
-                    spanText: liElement.querySelector(".pops-panel-button .pops-panel-button-text"),
-                },
-                $data: {},
-                init() {
-                    this.$ele.panelButton.appendChild(this.$ele.button);
-                    this.initButton();
-                    this.setClickEvent();
-                },
-                initButton() {
-                    if (typeof formConfig.buttonIcon === "string" &&
-                        formConfig.buttonIcon.trim() !== "") {
-                        /* 存在icon图标且不为空 */
-                        if (formConfig.buttonIcon in pops.config.iconSVG) {
-                            this.setIconSVG(pops.config.iconSVG[formConfig.buttonIcon]);
+                        /* 按钮文字 */
+                        let buttonText = formConfig.buttonText;
+                        if (typeof formConfig.buttonText === "function") {
+                            buttonText = formConfig.buttonText();
+                        }
+                        this.setButtonType(formConfig.buttonType);
+                        if (formConfig.buttonIsRightIcon) {
+                            this.setIconRight();
                         }
                         else {
-                            this.setIconSVG(formConfig.buttonIcon);
+                            this.setIconLeft();
                         }
-                        this.showIcon();
-                    }
-                    else {
-                        this.hideIcon();
-                    }
-                    /* 按钮文字 */
-                    let buttonText = formConfig.buttonText;
-                    if (typeof formConfig.buttonText === "function") {
-                        buttonText = formConfig.buttonText();
-                    }
-                    this.setButtonType(formConfig.buttonType);
-                    if (formConfig.buttonIsRightIcon) {
-                        this.setIconRight();
-                    }
-                    else {
-                        this.setIconLeft();
-                    }
-                    if (formConfig.disable) {
-                        this.disable();
-                    }
-                    this.setButtonText(buttonText);
-                    this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
-                },
-                disable() {
-                    this.$ele.button.setAttribute("disabled", "true");
-                },
-                notDisable() {
-                    this.$ele.button.removeAttribute("disabled");
-                },
-                /**
-                 * 隐藏icon图标
-                 */
-                hideIcon() {
-                    this.$ele.panelButton.classList.add("pops-panel-button-no-icon");
-                },
-                /**
-                 * 显示icon图标
-                 */
-                showIcon() {
-                    this.$ele.panelButton.classList.remove("pops-panel-button-no-icon");
-                },
-                /**
-                 * 设置icon图标的svg
-                 */
-                setIconSVG(svgHTML) {
-                    this.$ele.icon.innerHTML = svgHTML;
-                },
-                /**
-                 * 设置icon图标是否旋转
-                 * @param status
-                 */
-                setIconLoadingStatus(status) {
-                    this.$ele.icon.setAttribute("is-loading", Boolean(status).toString());
-                },
-                /**
-                 * 设置属性上是否存在icon图标
-                 */
-                setHasIcon(value) {
-                    this.$ele.button.setAttribute("data-icon", Boolean(value).toString());
-                },
-                /**
-                 * 设置按钮类型
-                 * @param typeValue
-                 */
-                setButtonType(typeValue) {
-                    this.$ele.button.setAttribute("type", typeValue);
-                },
-                /**
-                 * 添加按钮的图标在右边
-                 */
-                setIconRight() {
-                    this.$ele.button.classList.add("pops-panel-button-right-icon");
-                },
-                /**
-                 * （默认）添加按钮的图标在左边
-                 */
-                setIconLeft() {
-                    this.$ele.button.classList.remove("pops-panel-button-right-icon");
-                },
-                /**
-                 * 设置按钮文本
-                 * @param text
-                 */
-                setButtonText(text) {
-                    this.$ele.spanText.innerHTML = text;
-                },
-                setClickEvent() {
-                    popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
-                        if (typeof formConfig.callback === "function") {
-                            formConfig.callback(event);
+                        if (formConfig.disable) {
+                            this.disable();
                         }
-                    });
-                },
-            };
-            PopsPanelButton.init();
-            liElement["data-button"] = PopsPanelButton;
-            return liElement;
-        },
-        /**
-         * 获取深层容器的元素<li>
-         * @param formConfig
-         */
-        getSectionContainerItem_deepMenu(formConfig) {
-            let that = this;
-            let liElement = document.createElement("li");
-            liElement.classList.add("pops-panel-deepMenu-nav-item");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.classList.add(formConfig.className);
-            }
-            // 设置属性
-            this.addElementAttributes(liElement, formConfig.attributes);
-            // 设置元素上的属性
-            this.setElementProps(liElement, formConfig.props);
-            /* 左边底部的描述的文字 */
-            let leftDescriptionText = "";
-            if (Boolean(formConfig.description)) {
-                // 设置描述
-                leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
-            }
-            // 箭头图标
-            let arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean"
-                ? formConfig.arrowRightIcon
-                : true;
-            let arrowRightIconHTML = "";
-            if (arrowRightIcon) {
-                arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${pops.config.iconSVG.arrowRight}</i>`;
-            }
-            let rightText = "";
-            if (formConfig.rightText) {
-                rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
-            }
-            liElement.innerHTML = /*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-deepMenu">
-            ${rightText}
-            ${arrowRightIconHTML}
-        </div>
-        `;
-            const PopsPanelDeepMenu = {
-                [Symbol.toStringTag]: "PopsPanelDeepMenu",
-                $ele: {
-                    get parentSection() {
-                        return that.$el.$contentSectionContainer;
+                        this.setButtonText(buttonText);
+                        this.setIconLoadingStatus(formConfig.buttonIconIsLoading);
                     },
-                },
-                init() {
-                    this.setLiClickEvent();
-                },
-                /**
-                 * 生成配置每一项的元素
-                 * @param $container
-                 * @param formItemConfig
-                 */
-                initFormItem($container, formItemConfig) {
-                    if (formItemConfig["type"] === "forms") {
-                        let childForms = formItemConfig["forms"];
-                        /* 每一项<li>元素 */
-                        let formContainerListElement = document.createElement("li");
-                        /* 每一项<li>内的子<ul>元素 */
-                        let formContainerULElement = document.createElement("ul");
-                        formContainerListElement.className =
-                            "pops-panel-forms-container-item";
-                        /* 区域头部的文字 */
-                        let formHeaderDivElement = popsDOMUtils.createElement("div", {
-                            className: "pops-panel-forms-container-item-header-text",
+                    disable() {
+                        this.$ele.button.setAttribute("disabled", "true");
+                    },
+                    notDisable() {
+                        this.$ele.button.removeAttribute("disabled");
+                    },
+                    /**
+                     * 隐藏icon图标
+                     */
+                    hideIcon() {
+                        this.$ele.panelButton.classList.add("pops-panel-button-no-icon");
+                    },
+                    /**
+                     * 显示icon图标
+                     */
+                    showIcon() {
+                        this.$ele.panelButton.classList.remove("pops-panel-button-no-icon");
+                    },
+                    /**
+                     * 设置icon图标的svg
+                     */
+                    setIconSVG(svgHTML) {
+                        this.$ele.icon.innerHTML = svgHTML;
+                    },
+                    /**
+                     * 设置icon图标是否旋转
+                     * @param status
+                     */
+                    setIconLoadingStatus(status) {
+                        this.$ele.icon.setAttribute("is-loading", Boolean(status).toString());
+                    },
+                    /**
+                     * 设置属性上是否存在icon图标
+                     */
+                    setHasIcon(value) {
+                        this.$ele.button.setAttribute("data-icon", Boolean(value).toString());
+                    },
+                    /**
+                     * 设置按钮类型
+                     * @param typeValue
+                     */
+                    setButtonType(typeValue) {
+                        this.$ele.button.setAttribute("type", typeValue);
+                    },
+                    /**
+                     * 添加按钮的图标在右边
+                     */
+                    setIconRight() {
+                        this.$ele.button.classList.add("pops-panel-button-right-icon");
+                    },
+                    /**
+                     * （默认）添加按钮的图标在左边
+                     */
+                    setIconLeft() {
+                        this.$ele.button.classList.remove("pops-panel-button-right-icon");
+                    },
+                    /**
+                     * 设置按钮文本
+                     * @param text
+                     */
+                    setButtonText(text) {
+                        this.$ele.spanText.innerHTML = text;
+                    },
+                    setClickEvent() {
+                        popsDOMUtils.on(this.$ele.button, "click", void 0, (event) => {
+                            if (typeof formConfig.callback === "function") {
+                                formConfig.callback(event);
+                            }
                         });
-                        formHeaderDivElement.innerHTML = formItemConfig["text"];
-                        /* 加进容器内 */
-                        formContainerListElement.appendChild(formHeaderDivElement);
-                        if (formItemConfig.className) {
-                            popsDOMUtils.addClassName(formContainerListElement, formItemConfig.className);
+                    },
+                };
+                PopsPanelButton.init();
+                liElement["data-button"] = PopsPanelButton;
+                return liElement;
+            },
+            /**
+             * 获取深层容器的元素<li>
+             * @param formConfig
+             */
+            getSectionContainerItem_deepMenu(formConfig) {
+                let that = this;
+                let liElement = document.createElement("li");
+                liElement.classList.add("pops-panel-deepMenu-nav-item");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.classList.add(formConfig.className);
+                }
+                // 设置属性
+                this.addElementAttributes(liElement, formConfig.attributes);
+                // 设置元素上的属性
+                this.setElementProps(liElement, formConfig.props);
+                /* 左边底部的描述的文字 */
+                let leftDescriptionText = "";
+                if (Boolean(formConfig.description)) {
+                    // 设置描述
+                    leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${formConfig.description}</p>`;
+                }
+                // 箭头图标
+                let arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean"
+                    ? formConfig.arrowRightIcon
+                    : true;
+                let arrowRightIconHTML = "";
+                if (arrowRightIcon) {
+                    arrowRightIconHTML = `<i class="pops-panel-deepMenu-arrowRight-icon">${pops.config.iconSVG.arrowRight}</i>`;
+                }
+                let rightText = "";
+                if (formConfig.rightText) {
+                    rightText = /*html*/ `<p class="pops-panel-item-right-text">${formConfig.rightText}</p>`;
+                }
+                liElement.innerHTML = /*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-deepMenu">
+				${rightText}
+				${arrowRightIconHTML}
+			</div>
+			`;
+                const PopsPanelDeepMenu = {
+                    [Symbol.toStringTag]: "PopsPanelDeepMenu",
+                    $ele: {
+                        get parentSection() {
+                            return that.$el.$contentSectionContainer;
+                        },
+                    },
+                    init() {
+                        this.setLiClickEvent();
+                    },
+                    /**
+                     * 生成配置每一项的元素
+                     * @param $container
+                     * @param formItemConfig
+                     */
+                    initFormItem($container, formItemConfig) {
+                        if (formItemConfig["type"] === "forms") {
+                            let childForms = formItemConfig["forms"];
+                            /* 每一项<li>元素 */
+                            let formContainerListElement = document.createElement("li");
+                            /* 每一项<li>内的子<ul>元素 */
+                            let formContainerULElement = document.createElement("ul");
+                            formContainerListElement.className =
+                                "pops-panel-forms-container-item";
+                            /* 区域头部的文字 */
+                            let formHeaderDivElement = popsDOMUtils.createElement("div", {
+                                className: "pops-panel-forms-container-item-header-text",
+                            });
+                            formHeaderDivElement.innerHTML = formItemConfig["text"];
+                            /* 加进容器内 */
+                            formContainerListElement.appendChild(formHeaderDivElement);
+                            if (formItemConfig.className) {
+                                popsDOMUtils.addClassName(formContainerListElement, formItemConfig.className);
+                            }
+                            that.addElementAttributes(formContainerListElement, formItemConfig.attributes);
+                            that.setElementProps(formContainerListElement, formItemConfig.props);
+                            childForms.forEach((childFormConfig) => {
+                                that.uListContainerAddItem(childFormConfig, {
+                                    ulElement: formContainerULElement,
+                                    sectionContainerULElement: that.sectionContainerULElement,
+                                    formContainerListElement: formContainerListElement,
+                                    formHeaderDivElement: formHeaderDivElement,
+                                });
+                            });
+                            formContainerListElement.appendChild(formContainerULElement);
+                            $container.appendChild(formContainerListElement);
                         }
-                        that.addElementAttributes(formContainerListElement, formItemConfig.attributes);
-                        that.setElementProps(formContainerListElement, formItemConfig.props);
-                        childForms.forEach((childFormConfig) => {
-                            that.uListContainerAddItem(childFormConfig, {
-                                ulElement: formContainerULElement,
-                                sectionContainerULElement: that.sectionContainerULElement,
-                                formContainerListElement: formContainerListElement,
-                                formHeaderDivElement: formHeaderDivElement,
+                        else {
+                            /* 如果成功创建，加入到中间容器中 */
+                            that.uListContainerAddItem(formConfig, {
+                                ulElement: that.sectionContainerULElement,
                             });
+                        }
+                    },
+                    /**
+                     * 前往子菜单
+                     * @param event 点击事件
+                     * @param liElement 当前的<li>元素
+                     */
+                    gotoDeepMenu(event, liElement) {
+                        /** 当前所在的容器 */
+                        let currentSection = liElement.closest("section.pops-panel-container");
+                        if (currentSection) {
+                            popsDOMUtils.cssHide(currentSection);
+                        }
+                        // 子菜单的容器
+                        let $deepMenuContainer = popsDOMUtils.createElement("section", {
+                            className: "pops-panel-container pops-panel-deepMenu-container",
                         });
-                        formContainerListElement.appendChild(formContainerULElement);
-                        $container.appendChild(formContainerListElement);
-                    }
-                    else {
-                        /* 如果成功创建，加入到中间容器中 */
-                        that.uListContainerAddItem(formConfig, {
-                            ulElement: that.sectionContainerULElement,
+                        let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
+                            className: "pops-panel-deepMenu-container-header-ul",
                         });
-                    }
-                },
-                /**
-                 * 前往子菜单
-                 * @param event 点击事件
-                 * @param liElement 当前的<li>元素
-                 */
-                gotoDeepMenu(event, liElement) {
-                    /** 当前所在的容器 */
-                    let currentSection = liElement.closest("section.pops-panel-container");
-                    if (currentSection) {
-                        popsDOMUtils.cssHide(currentSection);
-                    }
-                    // 子菜单的容器
-                    let $deepMenuContainer = popsDOMUtils.createElement("section", {
-                        className: "pops-panel-container pops-panel-deepMenu-container",
-                    });
-                    let $deepMenuHeaderUL = popsDOMUtils.createElement("ul", {
-                        className: "pops-panel-deepMenu-container-header-ul",
+                        let $deepMenuChildMenuUL = popsDOMUtils.createElement("ul");
+                        // 标题文字
+                        let headerTitleText = formConfig.headerTitle ?? formConfig.text;
+                        let $header = popsDOMUtils.createElement("div", {
+                            className: "pops-panel-deepMenu-container-header",
+                            innerHTML: `<p>${headerTitleText}</p>`,
+                        });
+                        let $headerLeftArrow = popsDOMUtils.createElement("i", {
+                            className: "pops-panel-deepMenu-container-left-arrow-icon",
+                            innerHTML: pops.config.iconSVG.arrowLeft,
+                        });
+                        popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
+                            event?.preventDefault();
+                            event?.stopPropagation();
+                            // 返回上一层菜单
+                            let $prev = $deepMenuContainer.previousElementSibling;
+                            popsDOMUtils.cssShow($prev);
+                            $deepMenuContainer.remove();
+                        }, {
+                            once: true,
+                        });
+                        $header.firstElementChild?.insertAdjacentElement("beforebegin", $headerLeftArrow);
+                        $deepMenuHeaderUL.appendChild($header);
+                        $deepMenuContainer.appendChild($deepMenuHeaderUL);
+                        $deepMenuContainer.appendChild($deepMenuChildMenuUL);
+                        if (formConfig.forms && Array.isArray(formConfig.forms)) {
+                            for (let index = 0; index < formConfig.forms.length; index++) {
+                                let formItemConfig = formConfig.forms[index];
+                                this.initFormItem($deepMenuChildMenuUL, formItemConfig);
+                            }
+                        }
+                        that.$el.$content?.appendChild($deepMenuContainer);
+                        /* 根据标题的高度来自适应内容高度，默认开启 */
+                        /* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
+                        let contentContainerOffset = 0;
+                        /* 获取标题的<ul>元素的高度 */
+                        let sectionContainerHeaderULElementHeight = popsDOMUtils.height($deepMenuHeaderUL);
+                        $deepMenuChildMenuUL.style.setProperty("height", `calc( 100% - ${sectionContainerHeaderULElementHeight + contentContainerOffset}px )`);
+                    },
+                    /** 设置项的点击事件 */
+                    setLiClickEvent() {
+                        popsDOMUtils.on(liElement, "click", void 0, async (event) => {
+                            if (typeof formConfig.clickCallBack === "function") {
+                                let result = await formConfig.clickCallBack(event, formConfig);
+                                if (result) {
+                                    return;
+                                }
+                            }
+                            this.gotoDeepMenu(event, liElement);
+                        });
+                    },
+                };
+                PopsPanelDeepMenu.init();
+                liElement["data-deepMenu"] = PopsPanelDeepMenu;
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * type ===> own
+             * @param formConfig
+             */
+            getSectionContainerItem_own(formConfig) {
+                let liElement = document.createElement("li");
+                liElement["__formConfig__"] = formConfig;
+                if (formConfig.className) {
+                    liElement.className = formConfig.className;
+                }
+                liElement = formConfig.getLiElementCallBack(liElement);
+                return liElement;
+            },
+            /**
+             * 获取中间容器的元素<li>
+             * @param formConfig
+             */
+            getSectionContainerItem(formConfig) {
+                /** 配置项的类型 */
+                let formType = formConfig["type"];
+                if (formType === "switch") {
+                    return this.getSectionContainerItem_switch(formConfig);
+                }
+                else if (formType === "slider") {
+                    return this.getSectionContainerItem_slider_new(formConfig);
+                }
+                else if (formType === "input") {
+                    return this.getSectionContainerItem_input(formConfig);
+                }
+                else if (formType === "textarea") {
+                    return this.getSectionContainerItem_textarea(formConfig);
+                }
+                else if (formType === "select") {
+                    return this.getSectionContainerItem_select(formConfig);
+                }
+                else if (formType === "select-multiple") {
+                    return this.getSectionContainerItem_select_multiple_new(formConfig);
+                }
+                else if (formType === "button") {
+                    return this.getSectionContainerItem_button(formConfig);
+                }
+                else if (formType === "deepMenu") {
+                    return this.getSectionContainerItem_deepMenu(formConfig);
+                }
+                else if (formType === "own") {
+                    return this.getSectionContainerItem_own(formConfig);
+                }
+                else {
+                    console.error("尚未实现的type类型", formConfig);
+                }
+            },
+            /**
+             * 生成配置每一项的元素
+             * @param formConfig
+             */
+            initFormItem(formConfig) {
+                let that = this;
+                if (formConfig["type"] === "forms") {
+                    let __formConfig_forms = formConfig;
+                    let childForms = formConfig["forms"];
+                    /* 每一项<li>元素 */
+                    let formContainerListElement = document.createElement("li");
+                    /* 每一项<li>内的子<ul>元素 */
+                    let formContainerULElement = document.createElement("ul");
+                    formContainerListElement.className = "pops-panel-forms-container-item";
+                    /* 区域头部的文字 */
+                    let formHeaderDivElement = popsDOMUtils.createElement("div", {
+                        className: "pops-panel-forms-container-item-header-text",
                     });
-                    let $deepMenuChildMenuUL = popsDOMUtils.createElement("ul");
-                    // 标题文字
-                    let headerTitleText = formConfig.headerTitle ?? formConfig.text;
-                    let $header = popsDOMUtils.createElement("div", {
-                        className: "pops-panel-deepMenu-container-header",
-                        innerHTML: `<p>${headerTitleText}</p>`,
+                    formHeaderDivElement.innerHTML = __formConfig_forms["text"];
+                    /* 加进容器内 */
+                    formContainerListElement.appendChild(formHeaderDivElement);
+                    if (__formConfig_forms.className) {
+                        popsDOMUtils.addClassName(formContainerListElement, __formConfig_forms.className);
+                    }
+                    that.addElementAttributes(formContainerListElement, formConfig.attributes);
+                    that.setElementProps(formContainerListElement, formConfig.props);
+                    childForms.forEach((childFormConfig) => {
+                        that.uListContainerAddItem(childFormConfig, {
+                            ulElement: formContainerULElement,
+                            sectionContainerULElement: that.sectionContainerULElement,
+                            formContainerListElement: formContainerListElement,
+                            formHeaderDivElement: formHeaderDivElement,
+                        });
                     });
-                    let $headerLeftArrow = popsDOMUtils.createElement("i", {
-                        className: "pops-panel-deepMenu-container-left-arrow-icon",
-                        innerHTML: pops.config.iconSVG.arrowLeft,
+                    formContainerListElement.appendChild(formContainerULElement);
+                    that.sectionContainerULElement.appendChild(formContainerListElement);
+                }
+                else {
+                    /* 如果成功创建，加入到中间容器中 */
+                    that.uListContainerAddItem(formConfig, {
+                        ulElement: that.sectionContainerULElement,
                     });
-                    popsDOMUtils.on($headerLeftArrow, "click", void 0, (event) => {
-                        event?.preventDefault();
-                        event?.stopPropagation();
-                        // 返回上一层菜单
-                        let $prev = $deepMenuContainer.previousElementSibling;
-                        popsDOMUtils.cssShow($prev);
-                        $deepMenuContainer.remove();
-                    }, {
-                        once: true,
+                }
+            },
+            /**
+             *
+             * @param formConfig
+             * @param containerOptions
+             */
+            uListContainerAddItem(formConfig, containerOptions) {
+                let itemLiElement = this.getSectionContainerItem(formConfig);
+                if (itemLiElement) {
+                    containerOptions["ulElement"].appendChild(itemLiElement);
+                }
+                if (typeof formConfig.afterAddToUListCallBack === "function") {
+                    formConfig.afterAddToUListCallBack(formConfig, containerOptions);
+                }
+            },
+            /**
+             * 为左侧容器元素添加点击事件
+             * @param asideLiElement 左侧的容器<li>元素
+             * @param asideConfig 配置
+             */
+            setAsideItemClickEvent(asideLiElement, asideConfig) {
+                const that = this;
+                popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
+                    this.clearContainer();
+                    popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
+                    this.clearAsideItemIsVisited();
+                    this.setAsideItemIsVisited(asideLiElement);
+                    /* 顶部标题栏，存在就设置 */
+                    let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
+                    if (typeof headerTitleText === "string" &&
+                        headerTitleText.trim() !== "") {
+                        let containerHeaderTitleLIElement = document.createElement("li");
+                        containerHeaderTitleLIElement["__asideConfig__"] =
+                            asideConfig;
+                        containerHeaderTitleLIElement.innerHTML = headerTitleText;
+                        this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
+                    }
+                    let __forms__ = asideLiElement["__forms__"];
+                    __forms__.forEach((formConfig) => {
+                        this.initFormItem(formConfig);
                     });
-                    $header.firstElementChild?.insertAdjacentElement("beforebegin", $headerLeftArrow);
-                    $deepMenuHeaderUL.appendChild($header);
-                    $deepMenuContainer.appendChild($deepMenuHeaderUL);
-                    $deepMenuContainer.appendChild($deepMenuChildMenuUL);
-                    if (formConfig.forms && Array.isArray(formConfig.forms)) {
-                        for (let index = 0; index < formConfig.forms.length; index++) {
-                            let formItemConfig = formConfig.forms[index];
-                            this.initFormItem($deepMenuChildMenuUL, formItemConfig);
-                        }
+                    let autoAdaptionContentHeight = asideConfig.autoAdaptionContentHeight ?? true;
+                    if (autoAdaptionContentHeight) {
+                        /* 根据标题的高度来自适应内容高度，默认开启 */
+                        /* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
+                        let contentContainerOffset = asideConfig.contentContainerOffset ?? 0;
+                        /* 获取标题的<ul>元素的高度 */
+                        let sectionContainerHeaderULElementHeight = popsDOMUtils.height(this.sectionContainerHeaderULElement);
+                        this.sectionContainerULElement.style.setProperty("height", `calc( 100% - ${sectionContainerHeaderULElementHeight + contentContainerOffset}px )`);
+                    }
+                    if (typeof asideConfig.callback === "function") {
+                        /* 执行回调 */
+                        asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
                     }
-                    that.$el.$content?.appendChild($deepMenuContainer);
-                    /* 根据标题的高度来自适应内容高度，默认开启 */
-                    /* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
-                    let contentContainerOffset = 0;
-                    /* 获取标题的<ul>元素的高度 */
-                    let sectionContainerHeaderULElementHeight = popsDOMUtils.height($deepMenuHeaderUL);
-                    $deepMenuChildMenuUL.style.setProperty("height", `calc( 100% - ${sectionContainerHeaderULElementHeight + contentContainerOffset}px )`);
-                },
-                /** 设置项的点击事件 */
-                setLiClickEvent() {
-                    popsDOMUtils.on(liElement, "click", void 0, async (event) => {
-                        if (typeof formConfig.clickCallBack === "function") {
-                            let result = await formConfig.clickCallBack(event, formConfig);
-                            if (result) {
-                                return;
-                            }
-                        }
-                        this.gotoDeepMenu(event, liElement);
-                    });
-                },
-            };
-            PopsPanelDeepMenu.init();
-            liElement["data-deepMenu"] = PopsPanelDeepMenu;
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * type ===> own
-         * @param formConfig
-         */
-        getSectionContainerItem_own(formConfig) {
-            let liElement = document.createElement("li");
-            liElement["__formConfig__"] = formConfig;
-            if (formConfig.className) {
-                liElement.className = formConfig.className;
-            }
-            liElement = formConfig.getLiElementCallBack(liElement);
-            return liElement;
-        },
-        /**
-         * 获取中间容器的元素<li>
-         * @param formConfig
-         */
-        getSectionContainerItem(formConfig) {
-            /** 配置项的类型 */
-            let formType = formConfig["type"];
-            if (formType === "switch") {
-                return this.getSectionContainerItem_switch(formConfig);
-            }
-            else if (formType === "slider") {
-                return this.getSectionContainerItem_slider_new(formConfig);
-            }
-            else if (formType === "input") {
-                return this.getSectionContainerItem_input(formConfig);
-            }
-            else if (formType === "textarea") {
-                return this.getSectionContainerItem_textarea(formConfig);
-            }
-            else if (formType === "select") {
-                return this.getSectionContainerItem_select(formConfig);
-            }
-            else if (formType === "select-multiple") {
-                return this.getSectionContainerItem_select_multiple_new(formConfig);
-            }
-            else if (formType === "button") {
-                return this.getSectionContainerItem_button(formConfig);
-            }
-            else if (formType === "deepMenu") {
-                return this.getSectionContainerItem_deepMenu(formConfig);
-            }
-            else if (formType === "own") {
-                return this.getSectionContainerItem_own(formConfig);
-            }
-            else {
-                console.error("尚未实现的type类型", formConfig);
-            }
-        },
-        /**
-         * 生成配置每一项的元素
-         * @param formConfig
-         */
-        initFormItem(formConfig) {
-            let that = this;
-            if (formConfig["type"] === "forms") {
-                let __formConfig_forms = formConfig;
-                let childForms = formConfig["forms"];
-                /* 每一项<li>元素 */
-                let formContainerListElement = document.createElement("li");
-                /* 每一项<li>内的子<ul>元素 */
-                let formContainerULElement = document.createElement("ul");
-                formContainerListElement.className = "pops-panel-forms-container-item";
-                /* 区域头部的文字 */
-                let formHeaderDivElement = popsDOMUtils.createElement("div", {
-                    className: "pops-panel-forms-container-item-header-text",
-                });
-                formHeaderDivElement.innerHTML = __formConfig_forms["text"];
-                /* 加进容器内 */
-                formContainerListElement.appendChild(formHeaderDivElement);
-                if (__formConfig_forms.className) {
-                    popsDOMUtils.addClassName(formContainerListElement, __formConfig_forms.className);
-                }
-                that.addElementAttributes(formContainerListElement, formConfig.attributes);
-                that.setElementProps(formContainerListElement, formConfig.props);
-                childForms.forEach((childFormConfig) => {
-                    that.uListContainerAddItem(childFormConfig, {
-                        ulElement: formContainerULElement,
-                        sectionContainerULElement: that.sectionContainerULElement,
-                        formContainerListElement: formContainerListElement,
-                        formHeaderDivElement: formHeaderDivElement,
-                    });
-                });
-                formContainerListElement.appendChild(formContainerULElement);
-                that.sectionContainerULElement.appendChild(formContainerListElement);
-            }
-            else {
-                /* 如果成功创建，加入到中间容器中 */
-                that.uListContainerAddItem(formConfig, {
-                    ulElement: that.sectionContainerULElement,
-                });
-            }
-        },
-        /**
-         *
-         * @param formConfig
-         * @param containerOptions
-         */
-        uListContainerAddItem(formConfig, containerOptions) {
-            let itemLiElement = this.getSectionContainerItem(formConfig);
-            if (itemLiElement) {
-                containerOptions["ulElement"].appendChild(itemLiElement);
-            }
-            if (typeof formConfig.afterAddToUListCallBack === "function") {
-                formConfig.afterAddToUListCallBack(formConfig, containerOptions);
-            }
-        },
-        /**
-         * 为左侧容器元素添加点击事件
-         * @param asideLiElement 左侧的容器<li>元素
-         * @param asideConfig 配置
-         */
-        setAsideItemClickEvent(asideLiElement, asideConfig) {
-            const that = this;
-            popsDOMUtils.on(asideLiElement, "click", void 0, (event) => {
-                this.clearContainer();
-                popsDOMUtils.cssShow(that.$el.$contentSectionContainer);
-                this.clearAsideItemIsVisited();
-                this.setAsideItemIsVisited(asideLiElement);
-                /* 顶部标题栏，存在就设置 */
-                let headerTitleText = asideConfig.headerTitle ?? asideConfig.title;
-                if (typeof headerTitleText === "string" &&
-                    headerTitleText.trim() !== "") {
-                    let containerHeaderTitleLIElement = document.createElement("li");
-                    containerHeaderTitleLIElement["__asideConfig__"] =
-                        asideConfig;
-                    containerHeaderTitleLIElement.innerHTML = headerTitleText;
-                    this.sectionContainerHeaderULElement.appendChild(containerHeaderTitleLIElement);
-                }
-                let __forms__ = asideLiElement["__forms__"];
-                __forms__.forEach((formConfig) => {
-                    this.initFormItem(formConfig);
                 });
-                let autoAdaptionContentHeight = asideConfig.autoAdaptionContentHeight ?? true;
-                if (autoAdaptionContentHeight) {
-                    /* 根据标题的高度来自适应内容高度，默认开启 */
-                    /* 中间容器的偏移量，看设置的section.pops-panel-container的padding，默认0 */
-                    let contentContainerOffset = asideConfig.contentContainerOffset ?? 0;
-                    /* 获取标题的<ul>元素的高度 */
-                    let sectionContainerHeaderULElementHeight = popsDOMUtils.height(this.sectionContainerHeaderULElement);
-                    this.sectionContainerULElement.style.setProperty("height", `calc( 100% - ${sectionContainerHeaderULElementHeight + contentContainerOffset}px )`);
-                }
-                if (typeof asideConfig.callback === "function") {
-                    /* 执行回调 */
-                    asideConfig.callback(event, this.sectionContainerHeaderULElement, this.sectionContainerULElement);
-                }
-            });
-        },
+            },
+        };
     };
 
     class PopsPanel {
@@ -9666,10 +9671,11 @@
             if ($mask != null) {
                 $anim.after($mask);
             }
+            let panelHandleContentDetails = PanelHandleContentDetails();
             /**
              * 处理内部配置
              */
-            PanelHandleContentDetails.init({
+            panelHandleContentDetails.init({
                 config: config,
                 $el: {
                     $content: $content,