@whitesev/pops 1.6.3 → 1.6.4

package/dist/index.system.js

@@ -7271,2310 +7271,2315 @@ System.register('pops', [], (function (exports) {
                 },
             };
 
-            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 {
@@ -9665,10 +9670,11 @@ System.register('pops', [], (function (exports) {
                     if ($mask != null) {
                         $anim.after($mask);
                     }
+                    let panelHandleContentDetails = PanelHandleContentDetails();
                     /**
                      * 处理内部配置
                      */
-                    PanelHandleContentDetails.init({
+                    panelHandleContentDetails.init({
                         config: config,
                         $el: {
                             $content: $content,