@minilo/ui 0.0.7 → 0.0.8

package/minilo/lib/components/image-upload-pro/index.vue2.js

@@ -1,661 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var elementPlus = require('element-plus');
-var type = require('./type.js');
-var index$1 = require('../../utils/index.js');
-var index = require('../../packages/utils/dist/request/index.js');
-var common = require('../../packages/utils/dist/func/common.js');
-
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["onDragstart", "onDrop"];
-var _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "MlImageUploadPro"
-  },
-  __name: "index",
-  props: type.imageUploadProProps,
-  emits: ["update:modelValue", "change", "upload"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const ASPECT_RATIO_OPTIONS = [
-      { label: "\u81EA\u7531\u6BD4\u4F8B", value: "free" },
-      { label: "1:1", value: "1:1" },
-      { label: "4:3", value: "4:3" },
-      { label: "16:9", value: "16:9" }
-    ];
-    const props = __props;
-    const uploadRef = vue.ref();
-    const cropperRef = vue.ref();
-    const fileList = vue.ref([]);
-    const previewList = vue.ref([]);
-    const cropDialogVisible = vue.ref(false);
-    const cropImageUrl = vue.ref("");
-    const cropTargetItem = vue.ref();
-    const dragIndex = vue.ref(-1);
-    const cropForm = vue.reactive({
-      aspectRatio: "free"
-      // 裁剪比例
-    });
-    const cropWidth = vue.ref(props.sizeLimit.width || 400);
-    const cropHeight = vue.ref(props.sizeLimit.height || 400);
-    const displayWidth = vue.ref(props.sizeLimit.width || 400);
-    const displayHeight = vue.ref(props.sizeLimit.height || 400);
-    const aspectRatio = vue.reactive({
-      fixed: false,
-      value: [1, 1]
-    });
-    const axios = vue.computed(() => {
-      if (!props.uploadApi) return null;
-      return index.initRequestInstance({
-        baseURL: "",
-        headers: props.uploadApi.headers || {}
-      });
-    });
-    const acceptDesc = vue.computed(() => {
-      return props.acceptType.split(",").map((type) => type.replace("image/", ".")).join("\u3001");
-    });
-    vue.watch(
-      () => props.modelValue,
-      (val) => {
-        if (val.length) {
-          previewList.value = val.map((item) => ({
-            ...item,
-            url: item.url || item.response?.url || ""
-          }));
-          fileList.value = val;
-        }
-      },
-      { immediate: true, deep: true }
-    );
-    const uploadSingleFile = async (file) => {
-      if (!props.uploadApi || !axios.value) {
-        throw new Error("\u672A\u914D\u7F6E\u4E0A\u4F20 API");
-      }
-      const formData = new FormData();
-      formData.append(props.uploadApi.fieldName || "file", file);
-      if (props.uploadApi.data) {
-        Object.keys(props.uploadApi.data).forEach((key) => {
-          formData.append(key, props.uploadApi.data[key]);
-        });
-      }
-      const method = props.uploadApi.method || "post";
-      const response = await axios.value[method](props.uploadApi.url, formData, {
-        headers: {
-          "Content-Type": "multipart/form-data"
-        }
-      });
-      const urlField = props.uploadApi.responseUrlField || "data.url";
-      return common.getNestedValue(response, urlField);
-    };
-    const handleBeforeUpload = (file) => {
-      const isAccept = props.acceptType.includes(file.type);
-      if (!isAccept) {
-        elementPlus.ElMessage.error(`\u4EC5\u652F\u6301\u4E0A\u4F20${acceptDesc.value}\u683C\u5F0F\u7684\u56FE\u7247`);
-        return false;
-      }
-      const isOverSize = file.size / 1024 / 1024 > props.sizeLimit.size;
-      if (isOverSize) {
-        elementPlus.ElMessage.error(`\u5355\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7${props.sizeLimit.size}MB`);
-        return false;
-      }
-      if (previewList.value.length >= props.maxCount) {
-        elementPlus.ElMessage.error(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxCount}\u5F20\u56FE\u7247`);
-        return false;
-      }
-      if (props.sizeLimit.width || props.sizeLimit.height) {
-        return new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => {
-            const isOverWidth = props.sizeLimit.width && img.width < props.sizeLimit.width;
-            const isOverHeight = props.sizeLimit.height && img.height < props.sizeLimit.height;
-            if (isOverWidth || isOverHeight) {
-              elementPlus.ElMessage.error(
-                `\u56FE\u7247\u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265${props.sizeLimit.width}px \u9AD8\u2265${props.sizeLimit.height}px\uFF0C\u5F53\u524D\u56FE\u7247\u5BBD${img.width}px \u9AD8${img.height}px`
-              );
-              resolve(false);
-            } else {
-              resolve(true);
-            }
-          };
-          img.src = URL.createObjectURL(file);
-        });
-      }
-      return true;
-    };
-    const handleFileChange = async (file, files) => {
-      if (file.status === "ready") {
-        const blobUrl = URL.createObjectURL(file.raw);
-        const newItem = {
-          ...file,
-          rawFile: file.raw,
-          blobUrl,
-          // 保存 blob URL 用于裁剪
-          url: blobUrl
-          // 初始显示使用 blob URL
-        };
-        if (props.allowCrop) {
-          elementPlus.ElMessageBox.confirm("\u662F\u5426\u9700\u8981\u88C1\u526A\u8BE5\u56FE\u7247\uFF1F", "\u63D0\u793A", {
-            type: "info",
-            confirmButtonText: "\u88C1\u526A",
-            cancelButtonText: "\u76F4\u63A5\u4E0A\u4F20"
-          }).then(() => {
-            handleCropImage(newItem);
-          }).catch(async () => {
-            if (props.autoUpload && props.uploadApi) {
-              try {
-                const uploadedUrl = await uploadSingleFile(file.raw);
-                newItem.serverUrl = uploadedUrl;
-                newItem.url = uploadedUrl;
-                elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
-              } catch (error) {
-                elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
-                console.error(error);
-                return;
-              }
-            }
-            previewList.value.push(newItem);
-            syncModelValue();
-          });
-        } else {
-          if (props.autoUpload && props.uploadApi) {
-            try {
-              const uploadedUrl = await uploadSingleFile(file.raw);
-              newItem.serverUrl = uploadedUrl;
-              newItem.url = uploadedUrl;
-              elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
-            } catch (error) {
-              elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
-              console.error(error);
-              return;
-            }
-          }
-          previewList.value.push(newItem);
-          syncModelValue();
-        }
-      }
-      fileList.value = files;
-    };
-    const handleFileRemove = (file) => {
-      previewList.value = previewList.value.filter((item) => item.uid !== file.uid);
-      syncModelValue();
-    };
-    const handleCropImage = (item) => {
-      console.log(item);
-      if (!props.allowCrop) return;
-      cropTargetItem.value = item;
-      cropImageUrl.value = item.blobUrl || item.url || "";
-      cropDialogVisible.value = true;
-      vue.nextTick(() => {
-        cropForm.aspectRatio = "free";
-        cropWidth.value = props.sizeLimit.width || 400;
-        cropHeight.value = props.sizeLimit.height || 400;
-        displayWidth.value = props.sizeLimit.width || 400;
-        displayHeight.value = props.sizeLimit.height || 400;
-        aspectRatio.fixed = false;
-      });
-    };
-    const handleAspectRatioChange = (val) => {
-      if (val === "free") {
-        aspectRatio.fixed = false;
-      } else {
-        aspectRatio.fixed = true;
-        const parts = val.split(":").map(Number);
-        const w = parts[0] ?? 1;
-        const h = parts[1] ?? 1;
-        aspectRatio.value = [w, h];
-      }
-    };
-    const handleCropRealTime = (data) => {
-      if (data && data.w && data.h) {
-        displayWidth.value = Math.round(data.w);
-        displayHeight.value = Math.round(data.h);
-      }
-    };
-    const handleSizeChange = () => {
-      cropWidth.value = displayWidth.value;
-      cropHeight.value = displayHeight.value;
-    };
-    const handleCropConfirm = () => {
-      if (!cropperRef.value || !cropTargetItem.value) return;
-      cropperRef.value.getCropBlob(async (blob) => {
-        const croppedFile = new File([blob], cropTargetItem.value.name || "cropped.jpg", {
-          type: cropTargetItem.value.rawFile?.type || "image/jpeg"
-        });
-        const newBlobUrl = URL.createObjectURL(croppedFile);
-        let displayUrl = newBlobUrl;
-        if (props.autoUpload && props.uploadApi) {
-          try {
-            const serverUrl = await uploadSingleFile(croppedFile);
-            displayUrl = serverUrl;
-            elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
-            const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
-            const targetItem = previewList.value[index];
-            if (index > -1 && targetItem) {
-              targetItem.url = displayUrl;
-              targetItem.blobUrl = newBlobUrl;
-              targetItem.serverUrl = serverUrl;
-              targetItem.rawFile = croppedFile;
-            } else {
-              previewList.value.push({
-                ...cropTargetItem.value,
-                name: cropTargetItem.value.name ?? "cropped.jpg",
-                url: displayUrl,
-                blobUrl: newBlobUrl,
-                serverUrl,
-                rawFile: croppedFile
-              });
-            }
-          } catch (error) {
-            elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
-            console.error(error);
-            return;
-          }
-        } else {
-          const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
-          const targetItem = previewList.value[index];
-          if (index > -1 && targetItem) {
-            targetItem.url = newBlobUrl;
-            targetItem.blobUrl = newBlobUrl;
-            targetItem.rawFile = croppedFile;
-          } else {
-            previewList.value.push({
-              ...cropTargetItem.value,
-              name: cropTargetItem.value.name ?? "cropped.jpg",
-              url: newBlobUrl,
-              blobUrl: newBlobUrl,
-              rawFile: croppedFile
-            });
-          }
-        }
-        syncModelValue();
-        cropDialogVisible.value = false;
-        elementPlus.ElMessage.success("\u56FE\u7247\u88C1\u526A\u6210\u529F");
-      });
-    };
-    const resetCropper = () => {
-      cropTargetItem.value = void 0;
-      cropImageUrl.value = "";
-    };
-    const handleRemovePreview = (item) => {
-      elementPlus.ElMessageBox.confirm("\u786E\u5B9A\u8981\u5220\u9664\u8BE5\u56FE\u7247\u5417\uFF1F", "\u63D0\u793A", {
-        type: "warning",
-        confirmButtonText: "\u786E\u5B9A",
-        cancelButtonText: "\u53D6\u6D88"
-      }).then(() => {
-        previewList.value = previewList.value.filter((i) => i.uid !== item.uid);
-        fileList.value = fileList.value.filter((i) => i.uid !== item.uid);
-        syncModelValue();
-        elementPlus.ElMessage.success("\u56FE\u7247\u5220\u9664\u6210\u529F");
-      });
-    };
-    const handleDragStart = (index) => {
-      if (!props.allowSort) return;
-      dragIndex.value = index;
-    };
-    const handleDragOver = (e) => {
-      e.preventDefault();
-    };
-    const handleDrop = (index) => {
-      if (!props.allowSort || dragIndex.value === -1 || dragIndex.value === index) return;
-      const temp = previewList.value[dragIndex.value];
-      if (!temp) return;
-      previewList.value.splice(dragIndex.value, 1);
-      previewList.value.splice(index, 0, temp);
-      dragIndex.value = -1;
-      syncModelValue();
-    };
-    const syncModelValue = () => {
-      emit("update:modelValue", [...previewList.value]);
-      emit("change", [...previewList.value]);
-    };
-    const emit = __emit;
-    const uploadToServer = async (uploadApi) => {
-      const uploadPromises = previewList.value.map(async (item) => {
-        if (item.rawFile) {
-          const url = await uploadApi(item.rawFile);
-          item.url = url;
-          return item;
-        }
-        return item;
-      });
-      const result = await Promise.all(uploadPromises);
-      previewList.value = result;
-      syncModelValue();
-      return result;
-    };
-    __expose({
-      uploadToServer,
-      // 暴露上传到服务器的方法
-      clear: () => {
-        previewList.value = [];
-        fileList.value = [];
-        syncModelValue();
-      }
-    });
-    return (_ctx, _cache) => {
-      const _component_vue_cropper = vue.resolveComponent("vue-cropper");
-      const _component_el_option = vue.resolveComponent("el-option");
-      return vue.openBlock(), vue.createElementBlock(
-        "div",
-        {
-          class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro"))
-        },
-        [
-          vue.createCommentVNode(" \u6838\u5FC3\u4E0A\u4F20\u533A\u57DF "),
-          vue.createVNode(vue.unref(elementPlus.ElUpload), {
-            ref_key: "uploadRef",
-            ref: uploadRef,
-            class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "upload-container")),
-            action: "",
-            "auto-upload": false,
-            "file-list": fileList.value,
-            "before-upload": handleBeforeUpload,
-            "on-change": handleFileChange,
-            "on-remove": handleFileRemove,
-            accept: _ctx.acceptType,
-            "show-file-list": false
-          }, {
-            tip: vue.withCtx(() => [
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "upload-text"))
-                },
-                [
-                  vue.createTextVNode(
-                    " \u652F\u6301\u683C\u5F0F\uFF1A" + vue.toDisplayString(acceptDesc.value) + " | \u5355\u6587\u4EF6\u5927\u5C0F\u2264" + vue.toDisplayString(props.sizeLimit.size) + "MB ",
-                    1
-                    /* TEXT */
-                  ),
-                  props.sizeLimit.width || props.sizeLimit.height ? (vue.openBlock(), vue.createElementBlock(
-                    "span",
-                    _hoisted_1,
-                    " | \u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265" + vue.toDisplayString(props.sizeLimit.width) + "px \u9AD8\u2265" + vue.toDisplayString(props.sizeLimit.height) + "px ",
-                    1
-                    /* TEXT */
-                  )) : vue.createCommentVNode("v-if", true)
-                ],
-                2
-                /* CLASS */
-              )
-            ]),
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(elementPlus.ElButton), {
-                disabled: fileList.value.length === props.maxCount,
-                type: "primary"
-              }, {
-                default: vue.withCtx(() => [..._cache[6] || (_cache[6] = [
-                  vue.createTextVNode(
-                    "\u9009\u62E9\u56FE\u7247",
-                    -1
-                    /* CACHED */
-                  )
-                ])]),
-                _: 1
-                /* STABLE */
-              }, 8, ["disabled"])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["class", "file-list", "accept"]),
-          vue.createCommentVNode(" \u5DF2\u4E0A\u4F20\u56FE\u7247\u9884\u89C8\u5217\u8868 "),
-          previewList.value.length ? (vue.openBlock(), vue.createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "preview-list"))
-            },
-            [
-              (vue.openBlock(true), vue.createElementBlock(
-                vue.Fragment,
-                null,
-                vue.renderList(previewList.value, (item, index) => {
-                  return vue.openBlock(), vue.createElementBlock("div", {
-                    class: vue.normalizeClass([vue.unref(index$1.bem)("image-upload-pro", "preview-item"), { active: item.isCover }]),
-                    key: item.uid,
-                    draggable: "true",
-                    onDragstart: ($event) => handleDragStart(index),
-                    onDragover: _cache[0] || (_cache[0] = ($event) => handleDragOver($event)),
-                    onDrop: ($event) => handleDrop(index)
-                  }, [
-                    vue.createCommentVNode(" \u56FE\u7247\u9884\u89C8 "),
-                    vue.createElementVNode(
-                      "div",
-                      {
-                        class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "preview-img"))
-                      },
-                      [
-                        vue.createVNode(vue.unref(elementPlus.ElImage), {
-                          src: item.url,
-                          "preview-src-list": previewList.value.filter((i) => i.url).map((i) => i.url),
-                          "preview-current-index": index,
-                          fit: "cover"
-                        }, null, 8, ["src", "preview-src-list", "preview-current-index"])
-                      ],
-                      2
-                      /* CLASS */
-                    ),
-                    vue.createCommentVNode(" \u64CD\u4F5C\u6309\u94AE\u7EC4 "),
-                    vue.createElementVNode(
-                      "div",
-                      {
-                        class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "preview-actions"))
-                      },
-                      [
-                        vue.createVNode(vue.unref(elementPlus.ElButton), {
-                          type: "primary",
-                          text: "",
-                          size: "small",
-                          onClick: ($event) => handleCropImage(item)
-                        }, {
-                          default: vue.withCtx(() => [..._cache[7] || (_cache[7] = [
-                            vue.createTextVNode(
-                              "\u88C1\u526A",
-                              -1
-                              /* CACHED */
-                            )
-                          ])]),
-                          _: 1
-                          /* STABLE */
-                        }, 8, ["onClick"]),
-                        vue.createVNode(vue.unref(elementPlus.ElButton), {
-                          text: "",
-                          size: "small",
-                          type: "danger",
-                          onClick: ($event) => handleRemovePreview(item)
-                        }, {
-                          default: vue.withCtx(() => [..._cache[8] || (_cache[8] = [
-                            vue.createTextVNode(
-                              "\u5220\u9664",
-                              -1
-                              /* CACHED */
-                            )
-                          ])]),
-                          _: 1
-                          /* STABLE */
-                        }, 8, ["onClick"])
-                      ],
-                      2
-                      /* CLASS */
-                    )
-                  ], 42, _hoisted_2);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ],
-            2
-            /* CLASS */
-          )) : vue.createCommentVNode("v-if", true),
-          vue.createCommentVNode(" \u88C1\u526A\u5F39\u7A97 "),
-          vue.createVNode(vue.unref(elementPlus.ElDialog), {
-            modelValue: cropDialogVisible.value,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => cropDialogVisible.value = $event),
-            title: "\u56FE\u7247\u88C1\u526A",
-            width: "900px",
-            "close-on-click-modal": false,
-            "destroy-on-close": "",
-            onClose: resetCropper
-          }, {
-            footer: vue.withCtx(() => [
-              vue.createVNode(vue.unref(elementPlus.ElButton), {
-                onClick: _cache[4] || (_cache[4] = ($event) => cropDialogVisible.value = false)
-              }, {
-                default: vue.withCtx(() => [..._cache[10] || (_cache[10] = [
-                  vue.createTextVNode(
-                    "\u53D6\u6D88",
-                    -1
-                    /* CACHED */
-                  )
-                ])]),
-                _: 1
-                /* STABLE */
-              }),
-              vue.createVNode(vue.unref(elementPlus.ElButton), {
-                type: "primary",
-                onClick: handleCropConfirm
-              }, {
-                default: vue.withCtx(() => [..._cache[11] || (_cache[11] = [
-                  vue.createTextVNode(
-                    "\u786E\u8BA4\u88C1\u526A",
-                    -1
-                    /* CACHED */
-                  )
-                ])]),
-                _: 1
-                /* STABLE */
-              })
-            ]),
-            default: vue.withCtx(() => [
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "cropper-container"))
-                },
-                [
-                  vue.createCommentVNode(" \u88C1\u526A\u533A\u57DF "),
-                  vue.createVNode(_component_vue_cropper, {
-                    ref_key: "cropperRef",
-                    ref: cropperRef,
-                    img: cropImageUrl.value,
-                    info: true,
-                    "auto-crop": true,
-                    "auto-crop-width": cropWidth.value,
-                    "auto-crop-height": cropHeight.value,
-                    fixed: aspectRatio.fixed,
-                    "fixed-number": aspectRatio.value,
-                    "can-move": true,
-                    "can-scale": true,
-                    "can-rotate": false,
-                    onRealTime: handleCropRealTime
-                  }, null, 8, ["img", "auto-crop-width", "auto-crop-height", "fixed", "fixed-number"])
-                ],
-                2
-                /* CLASS */
-              ),
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(vue.unref(index$1.bem)("image-upload-pro", "cropper-config"))
-                },
-                [
-                  vue.createVNode(vue.unref(elementPlus.ElForm), { model: cropForm }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(elementPlus.ElRow), { gutter: 10 }, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(elementPlus.ElCol), { span: 8 }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(elementPlus.ElFormItem), { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.unref(elementPlus.ElSelect), {
-                                    style: { "width": "100%" },
-                                    modelValue: cropForm.aspectRatio,
-                                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cropForm.aspectRatio = $event),
-                                    onChange: handleAspectRatioChange
-                                  }, {
-                                    default: vue.withCtx(() => [
-                                      (vue.openBlock(), vue.createElementBlock(
-                                        vue.Fragment,
-                                        null,
-                                        vue.renderList(ASPECT_RATIO_OPTIONS, (option) => {
-                                          return vue.createVNode(_component_el_option, {
-                                            key: option.value,
-                                            label: option.label,
-                                            value: option.value
-                                          }, null, 8, ["label", "value"]);
-                                        }),
-                                        64
-                                        /* STABLE_FRAGMENT */
-                                      ))
-                                    ]),
-                                    _: 1
-                                    /* STABLE */
-                                  }, 8, ["modelValue"])
-                                ]),
-                                _: 1
-                                /* STABLE */
-                              })
-                            ]),
-                            _: 1
-                            /* STABLE */
-                          }),
-                          vue.createVNode(vue.unref(elementPlus.ElCol), { span: 16 }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(elementPlus.ElFormItem), { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.unref(elementPlus.ElInputNumber), {
-                                    modelValue: displayWidth.value,
-                                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => displayWidth.value = $event),
-                                    placeholder: "\u5BBD\u5EA6",
-                                    min: props.sizeLimit.width || 100,
-                                    onChange: handleSizeChange
-                                  }, null, 8, ["modelValue", "min"]),
-                                  _cache[9] || (_cache[9] = vue.createElementVNode(
-                                    "span",
-                                    { style: { "margin": "0 8px" } },
-                                    "*",
-                                    -1
-                                    /* CACHED */
-                                  )),
-                                  vue.createVNode(vue.unref(elementPlus.ElInputNumber), {
-                                    modelValue: displayHeight.value,
-                                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => displayHeight.value = $event),
-                                    placeholder: "\u9AD8\u5EA6",
-                                    min: props.sizeLimit.height || 100,
-                                    onChange: handleSizeChange
-                                  }, null, 8, ["modelValue", "min"])
-                                ]),
-                                _: 1
-                                /* STABLE */
-                              })
-                            ]),
-                            _: 1
-                            /* STABLE */
-                          })
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["model"])
-                ],
-                2
-                /* CLASS */
-              )
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["modelValue"])
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-exports.default = _sfc_main;