first-commit

packages/components/image-preview/src/image-preview.vue

@@ -60,7 +60,7 @@ const props = defineProps({
       { url: 'https://img0.baidu.com/it/u=2968274034,4191659377&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500' },
     ]
   },
-  title: { type: String, default: '比亚迪产品设计' },
+  // title: { type: String, default: '比亚迪产品设计' },
   modelValue: { type: Boolean, default: false },
   size: { type: String, default: 'auto' }, //fixed：图片固定宽高，auto：图片宽高使用图片原有的大小
   closeOnPressEscape: { type: Boolean, default: true },//是否可以通过按下 ESC 关闭 Dialog
@@ -167,7 +167,7 @@ const closePreview = () => {
     // resetImage()
     scaleValue.value = 1
     rotateValue.value = 0
-  }, 400);
+  }, 300);
 }
 
 onMounted(() => {

packages/docs/examples/image-preview/closeEsc.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <el-button type="primary" @click="preview">查看Esc图片预览</el-button>
+    <wil-image-preview v-model="showPreview" :closeOnPressEscape="true"></wil-image-preview>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const showPreview = ref(false)
+
+const preview=()=>{
+  showPreview.value=true
+}
+</script>

packages/docs/examples/image-preview/size.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <el-button type="primary" @click="previewFixed">查看fixed图片</el-button>
+    <el-button type="danger" @click="previewAuto">查看auto图片</el-button>
+    <wil-image-preview v-model="showPreview" :size="size"></wil-image-preview>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const showPreview = ref(false)
+const size = ref('auto')
+
+const previewFixed=()=>{
+  showPreview.value=true
+  size.value='fixed'
+}
+
+const previewAuto=()=>{
+  showPreview.value=true
+  size.value='auto'
+}
+</script>

packages/docs/zh/component/image-preview.md

@@ -9,8 +9,43 @@ lang: zh-CN
 
 ## 基础用法
 
-:::demo 
+:::demo
 
 image-preview/basic
 
 :::
+
+## 图片展示方式
+
+传入`size:fixed`，图片固定大小显示。传入`size:auto`,图片显示原有的尺寸。
+
+:::demo
+
+image-preview/size
+
+:::
+
+## 按下 Esc 关闭图片预览
+
+可通过配置`closeOnPressEscape`来配置图片预览是否可以通过按下 Esc 关闭
+
+:::demo
+
+image-preview/closeEsc
+
+:::
+
+## ImagePreview API 属性
+
+| 属性名             | 说明                             | 类型    | 可接收的值 | 默认值     |
+| ------------------ | -------------------------------- | ------- | ---------- | ---------- |
+| v-model            | 绑定值                           | boolean | true/false | false      |
+| imgList            | 图片数据                         | array   | —          | [{url:''}] |
+| size               | 图片展示方式                     | string  | —          | auto       |
+| closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean | —          | false      |
+
+### ImagePreview 插槽
+
+| 插槽名  | 说明           |
+| ------- | -------------- |
+| default | 自定义默认内容 |