@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/TdesignImageViewer.vue

@@ -1,201 +1,201 @@
-<template>
-    <div>
-        <!-- 触发器 -->
-        <div @click="toggleShow" class="image-viewer-trigger">
-            <slot>
-                <t-button v-if="!triggerElement" theme="primary">
-                    {{ triggerText }}
-                </t-button>
-            </slot>
-        </div>
-        
-        <!-- 图片查看器 -->
-        <t-image-viewer
-            v-model:visible="visible"
-            :closeBtn="closeBtn"
-            :closeOnEscKeydown="closeOnEscKeydown"
-            :closeOnOverlay="closeOnOverlay"
-            :draggable="draggable"
-            :imageReferrerpolicy="imageReferrerpolicy"
-            :imageScale="imageScale"
-            :images="images"
-            :index="currentIndex"
-            :mode="mode"
-            :showOverlay="showOverlay"
-            :title="title"
-            :viewerScale="viewerScale"
-            :zIndex="zIndex"
-            @change="handleChange"
-            @close="handleClose"
-            @scale="handleScale"
-        >
-            <!-- 控制按钮插槽 -->
-            <template v-if="$slots.control" #control>
-                <slot name="control"></slot>
-            </template>
-            
-            <!-- 额外操作按钮插槽 -->
-            <template v-if="$slots.operation" #operation>
-                <slot name="operation"></slot>
-            </template>
-            
-            <!-- 缩略图底部插槽 -->
-            <template v-if="$slots.thumbnailsBottom" #thumbnails-bottom>
-                <slot name="thumbnailsBottom"></slot>
-            </template>
-            
-            <!-- 标题插槽 -->
-            <template v-if="$slots.title" #title>
-                <slot name="title"></slot>
-            </template>
-        </t-image-viewer>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, ref, watch } from 'vue';
-import { ImageViewer as TImageViewer, Button as TButton } from 'tdesign-vue-next';
-
-const props = defineProps({
-    // 是否显示关闭按钮
-    closeBtn: {
-        type: Boolean,
-        default: true
-    },
-    // 按下 ESC 时是否触发图片预览器关闭
-    closeOnEscKeydown: {
-        type: Boolean,
-        default: true
-    },
-    // 点击遮罩层时是否触发关闭
-    closeOnOverlay: {
-        type: Boolean,
-        default: true
-    },
-    // 缩略图默认显示下标
-    defaultIndex: {
-        type: Number,
-        default: 0
-    },
-    // 是否允许拖拽调整位置
-    draggable: {
-        type: Boolean,
-        default: true
-    },
-    // 图片预览中的图片引用策略
-    imageReferrerpolicy: {
-        type: String,
-        default: 'never'
-    },
-    // 图片缩放相关配置
-    imageScale: {
-        type: Object,
-        default: () => ({
-            max: 3,
-            min: 0.1,
-            step: 0.1
-        })
-    },
-    // 图片数组
-    images: {
-        type: Array,
-        default: () => []
-    },
-    // 特殊的模式，包括常规模式和简洁模式
-    mode: {
-        type: String,
-        default: 'normal',
-        validator: (val) => ['normal', 'simple'].includes(val)
-    },
-    // 是否显示遮罩层
-    showOverlay: {
-        type: Boolean,
-        default: true
-    },
-    // 自定义触发元素
-    triggerElement: {
-        type: [String, Function],
-        default: ''
-    },
-    // 触发按钮文本
-    triggerText: {
-        type: String,
-        default: '查看图片'
-    },
-    // 标题
-    title: {
-        type: [String, Function],
-        default: ''
-    },
-    // 是否显示（非受控）
-    defaultVisible: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示（受控）
-    visible: {
-        type: Boolean,
-        default: undefined
-    },
-    // 查看器缩放相关配置
-    viewerScale: {
-        type: Object,
-        default: () => ({
-            max: 10,
-            min: 0.1,
-            step: 0.1
-        })
-    },
-    // 层级
-    zIndex: {
-        type: Number,
-        default: 2000
-    }
-});
-
-const emit = defineEmits(['change', 'close', 'scale', 'update:visible']);
-
-// 内部可见状态
-const visible = ref(props.defaultVisible);
-
-// 同步外部visible和内部visible
-watch(() => props.visible, (newValue) => {
-    if (newValue !== undefined) {
-        visible.value = newValue;
-    }
-});
-
-// 当前索引
-const currentIndex = ref(props.defaultIndex);
-
-// 切换显示状态
-const toggleShow = () => {
-    visible.value = !visible.value;
-    emit('update:visible', visible.value);
-};
-
-// 处理图片切换事件
-const handleChange = (index, context) => {
-    currentIndex.value = index;
-    emit('change', index, context);
-};
-
-// 处理关闭事件
-const handleClose = (context) => {
-    visible.value = false;
-    emit('update:visible', false);
-    emit('close', context);
-};
-
-// 处理缩放事件
-const handleScale = (scale, context) => {
-    emit('scale', scale, context);
-};
-</script>
-
-<style lang="less" scoped>
-.image-viewer-trigger {
-    display: inline-block;
-    cursor: pointer;
-}
+<template>
+    <div>
+        <!-- 触发器 -->
+        <div @click="toggleShow" class="image-viewer-trigger">
+            <slot>
+                <t-button v-if="!triggerElement" theme="primary">
+                    {{ triggerText }}
+                </t-button>
+            </slot>
+        </div>
+        
+        <!-- 图片查看器 -->
+        <t-image-viewer
+            v-model:visible="visible"
+            :closeBtn="closeBtn"
+            :closeOnEscKeydown="closeOnEscKeydown"
+            :closeOnOverlay="closeOnOverlay"
+            :draggable="draggable"
+            :imageReferrerpolicy="imageReferrerpolicy"
+            :imageScale="imageScale"
+            :images="images"
+            :index="currentIndex"
+            :mode="mode"
+            :showOverlay="showOverlay"
+            :title="title"
+            :viewerScale="viewerScale"
+            :zIndex="zIndex"
+            @change="handleChange"
+            @close="handleClose"
+            @scale="handleScale"
+        >
+            <!-- 控制按钮插槽 -->
+            <template v-if="$slots.control" #control>
+                <slot name="control"></slot>
+            </template>
+            
+            <!-- 额外操作按钮插槽 -->
+            <template v-if="$slots.operation" #operation>
+                <slot name="operation"></slot>
+            </template>
+            
+            <!-- 缩略图底部插槽 -->
+            <template v-if="$slots.thumbnailsBottom" #thumbnails-bottom>
+                <slot name="thumbnailsBottom"></slot>
+            </template>
+            
+            <!-- 标题插槽 -->
+            <template v-if="$slots.title" #title>
+                <slot name="title"></slot>
+            </template>
+        </t-image-viewer>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+import { ImageViewer as TImageViewer, Button as TButton } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否显示关闭按钮
+    closeBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 按下 ESC 时是否触发图片预览器关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击遮罩层时是否触发关闭
+    closeOnOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 缩略图默认显示下标
+    defaultIndex: {
+        type: Number,
+        default: 0
+    },
+    // 是否允许拖拽调整位置
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    // 图片预览中的图片引用策略
+    imageReferrerpolicy: {
+        type: String,
+        default: 'never'
+    },
+    // 图片缩放相关配置
+    imageScale: {
+        type: Object,
+        default: () => ({
+            max: 3,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 图片数组
+    images: {
+        type: Array,
+        default: () => []
+    },
+    // 特殊的模式，包括常规模式和简洁模式
+    mode: {
+        type: String,
+        default: 'normal',
+        validator: (val) => ['normal', 'simple'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 自定义触发元素
+    triggerElement: {
+        type: [String, Function],
+        default: ''
+    },
+    // 触发按钮文本
+    triggerText: {
+        type: String,
+        default: '查看图片'
+    },
+    // 标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否显示（非受控）
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示（受控）
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 查看器缩放相关配置
+    viewerScale: {
+        type: Object,
+        default: () => ({
+            max: 10,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 层级
+    zIndex: {
+        type: Number,
+        default: 2000
+    }
+});
+
+const emit = defineEmits(['change', 'close', 'scale', 'update:visible']);
+
+// 内部可见状态
+const visible = ref(props.defaultVisible);
+
+// 同步外部visible和内部visible
+watch(() => props.visible, (newValue) => {
+    if (newValue !== undefined) {
+        visible.value = newValue;
+    }
+});
+
+// 当前索引
+const currentIndex = ref(props.defaultIndex);
+
+// 切换显示状态
+const toggleShow = () => {
+    visible.value = !visible.value;
+    emit('update:visible', visible.value);
+};
+
+// 处理图片切换事件
+const handleChange = (index, context) => {
+    currentIndex.value = index;
+    emit('change', index, context);
+};
+
+// 处理关闭事件
+const handleClose = (context) => {
+    visible.value = false;
+    emit('update:visible', false);
+    emit('close', context);
+};
+
+// 处理缩放事件
+const handleScale = (scale, context) => {
+    emit('scale', scale, context);
+};
+</script>
+
+<style lang="less" scoped>
+.image-viewer-trigger {
+    display: inline-block;
+    cursor: pointer;
+}
 </style>