ele-admin-plus 1.4.1-beta.1 → 1.5.0-beta.1

package/es/ele-tree-select/props.d.ts

@@ -1,103 +1,101 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { StyleValue } from '../ele-app/types';
-import { ElInputProps, ElTagProps } from '../ele-app/el';
-import { EleTooltipProps } from '../ele-app/plus';
-import { SelectValue, SingleValue } from '../ele-basic-select/types';
-import { ShowCheckedStrategy, TreeData, TreeProps } from './types';
+import { UserComponent } from '../ele-app/types';
+import { SelectValue, SingleValue, BeforeConfirm } from '../ele-basic-select/types';
+import { ShowCheckedStrategy, TreeData, TreeProps, DataItem } from './types';
 
 /**
  * 属性
  */
 export declare const treeSelectProps: {
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
     /** 选中值 */
     modelValue: {
         type: PropType<SelectValue>;
         default: () => null;
     };
-    /** 是否多选 */
-    multiple: BooleanConstructor;
-    /** 是否禁用 */
-    disabled: BooleanConstructor;
-    /** 尺寸 */
-    size: PropType<ElInputProps["size"]>;
-    /** 是否支持清除 */
-    clearable: BooleanConstructor;
-    /** 无选中时提示文本 */
-    placeholder: StringConstructor;
-    /** 缓存数据 */
+    /** 是否触发表单验证 */
+    validateEvent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 确认事件钩子 */
+    beforeConfirm: PropType<BeforeConfirm<DataItem>>;
+    /** 缓存的数据 */
     cacheData: PropType<TreeData>;
     /** 树配置 */
-    treeProps: {
-        type: PropType<TreeProps>;
-        required: boolean;
-    };
+    treeProps: PropType<TreeProps>;
     /** 多选标签显示策略 */
     showCheckedStrategy: PropType<ShowCheckedStrategy>;
     /** 多选值绑定策略 */
     checkedValueStrategy: BooleanConstructor;
-    /** 多选标签最大显示数量 */
-    maxTagCount: NumberConstructor;
-    /** 多选标签最大显示文本长度 */
-    maxTagTextLength: NumberConstructor;
-    /** 多选标签类型 */
-    tagType: {
-        type: PropType<ElTagProps["type"]>;
+    /** 内容容器组件 */
+    wrapperComponent: PropType<UserComponent>;
+    /** 内容容器组件属性 */
+    wrapperComponentProps: ObjectConstructor;
+    placement: {
+        type: PropType<import('../ele-app/plus').EleTooltipProps["placement"]>;
         default: string;
     };
-    /** 是否在输入框获得焦点后自动弹出选项菜单 */
-    automaticDropdown: BooleanConstructor;
-    /** 是否可以筛选 */
-    filterable: BooleanConstructor;
-    /** 是否将下拉框插入 body */
+    popperClass: StringConstructor;
     teleported: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 始终渲染下拉框 */
+    size: PropType<import('../ele-app/el').ElInputProps["size"]>;
+    disabled: BooleanConstructor;
+    placeholder: StringConstructor;
+    clearable: BooleanConstructor;
+    inputStyle: PropType<import('../ele-app/types').StyleValue>;
+    filterable: BooleanConstructor;
+    tagType: {
+        type: PropType<import('../ele-app/el').ElTagProps["type"]>;
+        default: string;
+    };
     persistent: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 下拉框位置 */
-    placement: {
-        type: PropType<EleTooltipProps["placement"]>;
-        default: string;
-    };
-    /** 下拉框渐变动画 */
-    transition: {
-        type: StringConstructor;
-        default: string;
+    visible: BooleanConstructor;
+    popperOptions: PropType<import('../ele-app/plus').EleTooltipProps["popperOptions"]>;
+    automaticDropdown: BooleanConstructor;
+    multiple: BooleanConstructor;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
     };
-    /** popper.js 参数 */
-    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
-    /** 下拉框类名 */
-    popperClass: StringConstructor;
-    /** 下拉框宽度 */
-    popperWidth: (NumberConstructor | StringConstructor)[];
-    /** 自定义样式 */
-    selectStyle: PropType<StyleValue>;
-    /** 自定义输入框样式 */
-    inputStyle: PropType<StyleValue>;
-    /** 自定义多选标签容器样式 */
-    selectTagsStyle: PropType<StyleValue>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    selectClass: StringConstructor;
+    selectStyle: PropType<import('../ele-app/types').StyleValue | string>;
+    selectTagsStyle: PropType<import('../ele-app/types').StyleValue>;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperHeight: (StringConstructor | NumberConstructor)[];
+    popperType: PropType<import('../ele-basic-select/types').PopperType>;
+    popperProps: PropType<import('../ele-basic-select/types').PopperProps>;
+    popperSlots: PropType<Record<string, string>>;
+    popperTitle: StringConstructor;
 };
 export type TreeSelectProps = ExtractPropTypes<typeof treeSelectProps>;
 /**
  * 事件
  */
 export declare const treeSelectEmits: {
+    /** 多选标签移除事件 */
+    removeTag: (_value: SingleValue) => boolean;
     /** 更新选中值 */
     'update:modelValue': (_value: SelectValue) => boolean;
     /** 选中值改变事件 */
     change: (_value: SelectValue) => boolean;
     /** 下拉框展开状态改变事件 */
     visibleChange: (_visible: boolean) => boolean;
-    /** 多选标签移除事件 */
-    removeTag: (_value: SingleValue) => boolean;
-    /** 清空事件 */
+    /** 选择完成事件 */
+    select: (_item: DataItem | DataItem[]) => boolean;
+    'update:visible': (_visible: boolean) => boolean;
     clear: () => boolean;
-    /** 获取焦点事件 */
     focus: (_e: FocusEvent) => boolean;
-    /** 失去焦点事件 */
     blur: (_e: FocusEvent) => boolean;
+    filterChange: (_value: string) => boolean;
 };

package/es/ele-tree-select/props.js

@@ -1,4 +1,11 @@
+import { omit } from "../utils/common";
+import { basicSelectProps, basicSelectEmits } from "../ele-basic-select/props";
 const treeSelectProps = {
+  ...omit(basicSelectProps, ["value", "selectedLabel", "selected"]),
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
   /** 选中值 */
   modelValue: {
     type: [String, Number, Boolean, Array],
@@ -6,88 +13,38 @@ const treeSelectProps = {
       return null;
     }
   },
-  /** 是否多选 */
-  multiple: Boolean,
-  /** 是否禁用 */
-  disabled: Boolean,
-  /** 尺寸 */
-  size: String,
-  /** 是否支持清除 */
-  clearable: Boolean,
-  /** 无选中时提示文本 */
-  placeholder: String,
-  /** 缓存数据 */
+  /** 是否触发表单验证 */
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  /** 确认事件钩子 */
+  beforeConfirm: Function,
+  /** 缓存的数据 */
   cacheData: Array,
   /** 树配置 */
-  treeProps: {
-    type: Object,
-    required: true
-  },
+  treeProps: Object,
   /** 多选标签显示策略 */
   showCheckedStrategy: String,
   /** 多选值绑定策略 */
   checkedValueStrategy: Boolean,
-  /** 多选标签最大显示数量 */
-  maxTagCount: Number,
-  /** 多选标签最大显示文本长度 */
-  maxTagTextLength: Number,
-  /** 多选标签类型 */
-  tagType: {
-    type: String,
-    default: "info"
-  },
-  /** 是否在输入框获得焦点后自动弹出选项菜单 */
-  automaticDropdown: Boolean,
-  /** 是否可以筛选 */
-  filterable: Boolean,
-  /** 是否将下拉框插入 body */
-  teleported: {
-    type: Boolean,
-    default: true
-  },
-  /** 始终渲染下拉框 */
-  persistent: {
-    type: Boolean,
-    default: true
-  },
-  /** 下拉框位置 */
-  placement: {
-    type: String,
-    default: "bottom-start"
-  },
-  /** 下拉框渐变动画 */
-  transition: {
-    type: String,
-    default: "el-zoom-in-top"
-  },
-  /** popper.js 参数 */
-  popperOptions: Object,
-  /** 下拉框类名 */
-  popperClass: String,
-  /** 下拉框宽度 */
-  popperWidth: [Number, String],
-  /** 自定义样式 */
-  selectStyle: Object,
-  /** 自定义输入框样式 */
-  inputStyle: Object,
-  /** 自定义多选标签容器样式 */
-  selectTagsStyle: Object
+  /** 内容容器组件 */
+  wrapperComponent: [String, Object, Function],
+  /** 内容容器组件属性 */
+  wrapperComponentProps: Object
 };
 const treeSelectEmits = {
+  ...basicSelectEmits,
+  /** 多选标签移除事件 */
+  removeTag: (_value) => true,
   /** 更新选中值 */
   "update:modelValue": (_value) => true,
   /** 选中值改变事件 */
   change: (_value) => true,
   /** 下拉框展开状态改变事件 */
   visibleChange: (_visible) => true,
-  /** 多选标签移除事件 */
-  removeTag: (_value) => true,
-  /** 清空事件 */
-  clear: () => true,
-  /** 获取焦点事件 */
-  focus: (_e) => true,
-  /** 失去焦点事件 */
-  blur: (_e) => true
+  /** 选择完成事件 */
+  select: (_item) => true
 };
 export {
   treeSelectEmits,

package/es/ele-tree-select/style/index.scss

@@ -5,12 +5,12 @@
 @include set-tree-select-var($ele);
 
 .ele-tree-select-popper {
-  .el-tree {
-    background: none;
+  & > .ele-popover-body > .el-tree > .el-vl__wrapper {
+    padding: eleVar('tree-select', 'padding');
   }
 
-  .el-vl__wrapper {
-    padding: eleVar('tree-select', 'padding');
+  .el-tree {
+    background: none;
   }
 
   .el-tree-node__label.is-disabled {

package/es/ele-tree-table/components/table-row.js

@@ -44,10 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             width: `${__props.indexColWidth}px`,
             left: `${(__props.level - 1) * __props.indexColWidth}px`
           }),
-          class: normalizeClass([
-            "ele-tree-table-cell is-tree-index is-fixed-left",
-            { "is-fixed-left-last": __props.depth === __props.level }
-          ])
+          class: normalizeClass(["ele-tree-table-cell is-tree-index is-fixed-left", { "is-fixed-left-last": __props.depth === __props.level }])
         }, toDisplayString(__props.rowIndex + 1), 7),
         createElementVNode("div", _hoisted_1, [
           createElementVNode("div", _hoisted_2, [
@@ -59,10 +56,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   left: `${(__props.level - 1 + num) * __props.indexColWidth}px`,
                   textAlign: __props.hasChildren && num === 1 ? "left" : void 0
                 }),
-                class: normalizeClass([
-                  "ele-tree-table-cell is-tree-index is-placeholder is-fixed-left",
-                  { "is-fixed-left-last": num === __props.depth - __props.level }
-                ])
+                class: normalizeClass(["ele-tree-table-cell is-tree-index is-placeholder is-fixed-left", { "is-fixed-left-last": num === __props.depth - __props.level }])
               }, [
                 __props.hasChildren && num === 1 ? (openBlock(), createElementBlock("div", {
                   key: 0,

package/es/ele-tree-table/index.js

@@ -63,11 +63,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          "ele-tree-table-wrapper",
-          { "is-ping-left": isPingLeft.value },
-          { "is-ping-right": isPingRight.value }
-        ])
+        class: normalizeClass(["ele-tree-table-wrapper", [{ "is-ping-left": isPingLeft.value }, { "is-ping-right": isPingRight.value }]])
       }, [
         createElementVNode("div", {
           ref_key: "tableRef",
@@ -92,18 +88,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       width: `${_ctx.indexColWidth}px`,
                       left: `${(num - 1) * _ctx.indexColWidth}px`
                     }),
-                    class: normalizeClass([
-                      "ele-tree-table-cell is-tree-index is-fixed-left",
+                    class: normalizeClass(["ele-tree-table-cell is-tree-index is-fixed-left", [
                       { "is-placeholder": num !== 1 },
                       { "is-fixed-left-last": num === depth.value }
-                    ])
+                    ]])
                   }, null, 6);
                 }), 128)),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns || [], (col) => {
                   return openBlock(), createElementBlock("div", {
                     key: col.key ?? col.prop,
                     style: normalizeStyle(col.style),
-                    class: normalizeClass([col.class, "ele-tree-table-cell"])
+                    class: normalizeClass(["ele-tree-table-cell", col.class])
                   }, [
                     renderSlot(_ctx.$slots, "headerCell", { column: col }, () => [
                       createTextVNode(toDisplayString(col.label), 1)

package/es/ele-upload-list/components/list-item.js

@@ -69,7 +69,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const imageUrl = computed(() => {
-      var _a;
       if (props.item.thumbnail && props.item.thumbnail !== true) {
         return props.item.thumbnail;
       }
@@ -79,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!props.item.file || !props.imageObjectUrls) {
         return;
       }
-      return (_a = props.imageObjectUrls.find((d) => d.file === props.item.file)) == null ? void 0 : _a.url;
+      return props.imageObjectUrls.find((d) => d.file === props.item.file)?.url;
     });
     const uploadProgress = computed(() => {
       const progress = props.item.progress;

package/es/ele-upload-list/index.d.ts

@@ -1,4 +1,4 @@
-import { UploadItem, UploadLocale } from './types';
+import { UploadItem } from './types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
     icon?(_: {}): any;
@@ -36,7 +36,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     beforeUploadClick: import('vue').PropType<import('./types').BeforeUploadClick>;
     beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     beforePreview: import('vue').PropType<import('./types').BeforePreview>;
-    locale: import('vue').PropType<Partial<UploadLocale>>;
+    locale: import('vue').PropType<Partial<import('./types').UploadLocale>>;
 }>, {
     openImagePreview: (urls: string[], index: number) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -79,7 +79,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     beforeUploadClick: import('vue').PropType<import('./types').BeforeUploadClick>;
     beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     beforePreview: import('vue').PropType<import('./types').BeforePreview>;
-    locale: import('vue').PropType<Partial<UploadLocale>>;
+    locale: import('vue').PropType<Partial<import('./types').UploadLocale>>;
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: UploadItem[]) => any) | undefined;
     onRemove?: ((_item: UploadItem) => any) | undefined;
@@ -89,14 +89,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onRetry?: ((_item: UploadItem) => any) | undefined;
     onEditUpload?: ((_result: import('./types').EditUploadResult) => any) | undefined;
 }>, {
-    drag: boolean;
     disabled: boolean;
     readonly: boolean;
     multiple: boolean;
     sortable: boolean | Record<string | number | symbol, any>;
+    drag: boolean;
     preview: boolean;
-    accept: string;
     tools: boolean;
+    accept: string;
     buttonStyle: false | Partial<import('vue').CSSProperties>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/es/ele-upload-list/index.js

@@ -30,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const buildItem = (file) => {
       return {
-        key: "ele" + uuid(16, 10) + String(Date.now()),
+        key: `ele${uuid(16, 10)}${String(Date.now())}`,
         name: file.name,
         status: void 0,
         progress: 0,
@@ -41,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (item && item.url) {
         return item.url;
       }
-      const itemFile = item == null ? void 0 : item.file;
+      const itemFile = item?.file;
       if (itemFile != null && itemFile.type.startsWith("image")) {
         const t = imageObjectUrls.value.find((d) => d.file === itemFile);
         if (t != null) {
@@ -114,8 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("retry", item);
     };
     const handleInputChange = (e) => {
-      var _a;
-      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      const file = e.target.files?.[0];
       if (file != null && editItem != null) {
         const result = { item: editItem, newItem: buildItem(file) };
         editItem = null;
@@ -128,13 +127,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         e.preventDefault();
       }
     };
+    const clearImageObjectUrls = () => {
+      const temp = imageObjectUrls.value;
+      imageObjectUrls.value = [];
+      temp.forEach((item) => {
+        URL.revokeObjectURL(item.url);
+      });
+    };
     watch(
       () => props.modelValue,
       () => {
-        if (props.modelValue != null) {
-          props.modelValue.forEach((item) => {
-            getItemImageUrl(item);
-          });
+        if (props.modelValue == null) {
+          clearImageObjectUrls();
+          return;
+        }
+        const urls = [];
+        props.modelValue.forEach((item) => {
+          const url = getItemImageUrl(item);
+          if (url) {
+            urls.push(url);
+          }
+        });
+        for (let i = imageObjectUrls.value.length - 1; i >= 0; i--) {
+          const url = imageObjectUrls.value[i].url;
+          if (!urls.includes(url)) {
+            imageObjectUrls.value.splice(i, 1);
+            URL.revokeObjectURL(url);
+          }
         }
       },
       {
@@ -143,10 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     onBeforeUnmount(() => {
-      imageObjectUrls.value.forEach((item) => {
-        URL.revokeObjectURL(item.url);
-      });
-      imageObjectUrls.value = [];
+      clearImageObjectUrls();
     });
     __expose({
       openImagePreview
@@ -157,11 +173,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         animation: 300,
         setData: () => void 0,
         handle: ".ele-upload-handle",
-        class: [
-          "ele-upload-list",
+        class: ["ele-upload-list", [
           { "is-file-list": _ctx.listType === "file" },
           { "is-disabled": _ctx.disabled }
-        ]
+        ]]
       }, !_ctx.sortable || _ctx.sortable === true ? {} : _ctx.sortable, {
         modelValue: _ctx.modelValue || [],
         "onUpdate:modelValue": updateModelValue

package/es/ele-viewer/index.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, unref, renderSlot, Fragment, renderList } from "vue";
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, normalizeStyle, unref, normalizeClass, renderSlot, Fragment, renderList } from "vue";
 import { useMoveEvent, useMousewheel } from "../utils/hook";
-import { getRotatedBounds } from "./util";
+import { useContentRatio, getRotatedBounds } from "./util";
 import { viewerEmits, viewerProps } from "./props";
 const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -90,11 +90,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const autoIntoView = () => {
       const pEl = viewerRef.value;
-      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
-      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const pw = pEl?.offsetWidth || 0;
+      const ph = pEl?.offsetHeight || 0;
       const el = bodyRef.value;
-      const w = (el == null ? void 0 : el.offsetWidth) || 0;
-      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      const w = el?.offsetWidth || 0;
+      const h = el?.offsetHeight || 0;
       viewerTranslateX.value = Math.floor((pw - w) / 2);
       viewerTranslateY.value = Math.floor((ph - h) / 2);
       const { width, height } = getRotatedBounds(w, h, viewerRotate.value);
@@ -102,11 +102,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const autoIntoViewWidth = () => {
       const pEl = viewerRef.value;
-      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
-      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const pw = pEl?.offsetWidth || 0;
+      const ph = pEl?.offsetHeight || 0;
       const el = bodyRef.value;
-      const w = (el == null ? void 0 : el.offsetWidth) || 0;
-      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      const w = el?.offsetWidth || 0;
+      const h = el?.offsetHeight || 0;
       viewerScale.value = pw / w * 100;
       const sh = h * (viewerScale.value / 100);
       viewerTranslateX.value = Math.floor((pw - w) / 2);
@@ -118,11 +118,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const autoIntoViewHeight = () => {
       const pEl = viewerRef.value;
-      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
-      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const pw = pEl?.offsetWidth || 0;
+      const ph = pEl?.offsetHeight || 0;
       const el = bodyRef.value;
-      const w = (el == null ? void 0 : el.offsetWidth) || 0;
-      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      const w = el?.offsetWidth || 0;
+      const h = el?.offsetHeight || 0;
       viewerScale.value = ph / h * 100;
       const sw = w * (viewerScale.value / 100);
       if (sw < pw) {
@@ -147,7 +147,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         startY = viewerTranslateY.value;
       },
       move: ({ distanceX, distanceY, e }) => {
-        if (startX == null || startY == null || distanceX == null || distanceY == null) {
+        if (startX == null || startY == null || distanceX == null || distanceY == null || !contentStyle.show.value) {
           return;
         }
         e.preventDefault();
@@ -173,6 +173,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         zoomOut();
       }
     );
+    const contentStyle = useContentRatio();
     onMounted(() => {
       viewerRef.value && bindMousewheel(viewerRef.value);
       autoIntoView();
@@ -205,7 +206,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "viewerRef",
         ref: viewerRef,
-        class: normalizeClass(["ele-viewer"])
+        class: "ele-viewer"
       }, [
         createElementVNode("div", {
           ref_key: "bodyRef",
@@ -223,10 +224,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref_key: "contentRef",
               ref: contentRef,
               class: normalizeClass(["ele-viewer-content", { "is-moving": viewerMoving.value }]),
-              style: normalizeStyle([_ctx.contentStyle || {}, { transform: imageTransform.value }]),
+              style: normalizeStyle([unref(contentStyle) || {}, { transform: imageTransform.value }]),
               onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
               (...args) => unref(handleMousedown) && unref(handleMousedown)(...args)),
-              onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+              onTouchstartPassive: _cache[1] || (_cache[1] = //@ts-ignore
               (...args) => unref(handleTouchstart) && unref(handleTouchstart)(...args)),
               onClick: handleClick,
               onContextmenu: handleContextmenu