@minilo/ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,671 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var vueCropper = require('vue-cropper');
+var type = require('./type.js');
+var index$1 = require('../../utils/index.js');
+var index = require('../../node_modules/.pnpm/@minilo_utils@0.0.2_vue@3.5.26_typescript@5.9.3_/node_modules/@minilo/utils/dist/request/index.js');
+var common = require('../../node_modules/.pnpm/@minilo_utils@0.0.2_vue@3.5.26_typescript@5.9.3_/node_modules/@minilo/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_el_button = vue.resolveComponent("el-button");
+      const _component_el_upload = vue.resolveComponent("el-upload");
+      const _component_el_image = vue.resolveComponent("el-image");
+      const _component_el_option = vue.resolveComponent("el-option");
+      const _component_el_select = vue.resolveComponent("el-select");
+      const _component_el_form_item = vue.resolveComponent("el-form-item");
+      const _component_el_col = vue.resolveComponent("el-col");
+      const _component_el_input_number = vue.resolveComponent("el-input-number");
+      const _component_el_row = vue.resolveComponent("el-row");
+      const _component_el_form = vue.resolveComponent("el-form");
+      const _component_el_dialog = vue.resolveComponent("el-dialog");
+      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(_component_el_upload, {
+            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(_component_el_button, {
+                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(_component_el_image, {
+                          src: item.url,
+                          "preview-src-list": previewList.value.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(_component_el_button, {
+                          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(_component_el_button, {
+                          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(_component_el_dialog, {
+            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(_component_el_button, {
+                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(_component_el_button, {
+                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(vue.unref(vueCropper.VueCropper), {
+                    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(_component_el_form, { model: cropForm }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_el_row, { gutter: 10 }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_component_el_col, { span: 8 }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(_component_el_form_item, { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(_component_el_select, {
+                                    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(_component_el_col, { span: 16 }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(_component_el_form_item, { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(_component_el_input_number, {
+                                    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(_component_el_input_number, {
+                                    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;