tusen-ai · zhengdaonian · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-image` adds showPreview methods, closes [#6695](https://github.com/tusen-ai/naive-ui/issues/6695)
+- `n-image-preview` `n-image-group` support being used independently.
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-image` 增加 showPreview 方法, closes [#6695](https://github.com/tusen-ai/naive-ui/issues/6695)
+- `n-image-preview` ,`n-image-group` 支持单独使用
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/src/image/demos/enUS/component-preview-group-debug.demo.vue b/src/image/demos/enUS/component-preview-group-debug.demo.vue
@@ -0,0 +1,76 @@
+<markdown>
+# debug preview group
+</markdown>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const currentIndex = ref(1)
+
+const imageGroupRef = ref()
+function onClick() {
+  imageGroupRef.value?.toggleShow()
+}
+
+const currentIndex2 = ref(0)
+const imageGroupRef2 = ref()
+function onClick2() {
+  imageGroupRef2.value?.toggleShow()
+}
+</script>
+
+<template>
+  <n-space vertical>
+    <p>src-list</p>
+    <n-button type="primary" @click="onClick">
+      Click me to preview multiple image
+    </n-button>
+    <n-image-group
+      ref="imageGroupRef"
+      v-model:current="currentIndex"
+      :src-list="[
+        'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+        'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+        'https://picsum.photos/id/1/100/100',
+        'https://picsum.photos/id/2/100/100',
+        'https://picsum.photos/id/3/100/100',
+        'https://picsum.photos/id/4/100/100',
+        'https://picsum.photos/id/5/100/100',
+        'https://picsum.photos/id/7/100/100',
+        'https://picsum.photos/id/8/100/100',
+        'https://picsum.photos/id/9/100/100',
+        'https://picsum.photos/id/10/100/100',
+      ]"
+    >
+      <n-space>
+        <n-image
+          width="100"
+          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        />
+        <n-image
+          width="100"
+          src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+        />
+      </n-space>
+    </n-image-group>
+    <pre>currentIndex: {{ currentIndex }}</pre>
+
+    <p>n-image</p>
+    <n-button type="primary" @click="onClick2">
+      Click me to preview multiple image
+    </n-button>
+    <n-image-group ref="imageGroupRef2" v-model:current="currentIndex2">
+      <n-space>
+        <n-image
+          width="100"
+          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        />
+        <n-image
+          width="100"
+          src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+        />
+      </n-space>
+    </n-image-group>
+    <pre>currentIndex: {{ currentIndex2 }}</pre>
+  </n-space>
+</template>
diff --git a/src/image/demos/enUS/component-preview-group.demo.vue b/src/image/demos/enUS/component-preview-group.demo.vue
@@ -0,0 +1,41 @@
+<markdown>
+# Multi-image preview
+
+`to wrap the <n-image-group> component to preview multiple images.`
+</markdown>
+
+<script lang="ts" setup>
+import type { ImageGroupInst } from 'naive-ui'
+import { ref } from 'vue'
+
+const currentIndex = ref(0)
+
+const imageGroupRef = ref<ImageGroupInst>()
+function onClick() {
+  imageGroupRef.value?.toggleShow()
+}
+</script>
+
+<template>
+  <n-button type="primary" @click="onClick">
+    Click me to preview multiple image
+  </n-button>
+  <n-image-group
+    ref="imageGroupRef"
+    v-model:current="currentIndex"
+    :src-list="[
+      'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+      'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      'https://picsum.photos/id/1/100/100',
+      'https://picsum.photos/id/2/100/100',
+      'https://picsum.photos/id/3/100/100',
+      'https://picsum.photos/id/4/100/100',
+      'https://picsum.photos/id/5/100/100',
+      'https://picsum.photos/id/7/100/100',
+      'https://picsum.photos/id/8/100/100',
+      'https://picsum.photos/id/9/100/100',
+      'https://picsum.photos/id/10/100/100',
+    ]"
+  />
+  <pre>currentIndex: {{ currentIndex }}</pre>
+</template>
diff --git a/src/image/demos/enUS/component-preview.demo.vue b/src/image/demos/enUS/component-preview.demo.vue
@@ -0,0 +1,32 @@
+<markdown>
+# Use Preview alone
+
+`n-image-preview` can be used alone。
+</markdown>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui'
+import { ref } from 'vue'
+
+const showRef = ref(false)
+function onClick() {
+  showRef.value = true
+}
+
+const message = useMessage()
+
+function handleUpdateShow(value: boolean) {
+  message.info(`${value}`)
+}
+</script>
+
+<template>
+  <n-button type="primary" @click="onClick">
+    Click me to preview image
+  </n-button>
+  <n-image-preview
+    v-model:show="showRef"
+    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+    @update-show="handleUpdateShow"
+  />
+</template>
diff --git a/src/image/demos/enUS/index.demo-entry.md b/src/image/demos/enUS/index.demo-entry.md
@@ -15,6 +15,10 @@ custom.vue
 tooltip.vue
 lazy.vue
 previewed-img-props.vue
+manually-open-preview.vue
+component-preview.vue
+component-preview-group.vue
+component-preview-group-debug.vue
 ```
 
 ## API
@@ -46,19 +50,42 @@ previewed-img-props.vue
 
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
+| src-list | `string[]` | `undefined` | Picture list |  |
+| show | `boolean` | `undefined` | Whether to the show preview big image |  |
+| default-show | `boolean` | `undefined` | Whether to show the preview big image by default. |  |
+| current | `number` | `undefined` | The subscript of the currently displayed image |  |
+| default-current | `number` | `0` | The subscript of the default displayed image |  |
 | render-toolbar | `(props: { nodes: { prev: VNode, next: VNode, rotateCounterclockwise: VNode, rotateClockwise: VNode, resizeToOriginalSize: VNode, zoomOut: VNode, zoomIn: VNode, download: VNode, close: VNode } }) => VNodeChild` | `undefined` | Toolbar rendering function. | `2.38.2` |
 | show-toolbar | `boolean` | `true` | Whether to show the bottom toolbar when the image enlarge. |  |
 | show-toolbar-tooltip | `boolean` | `false` | Whether to show toolbar buttons' tooltip. | 2.24.0 |
 | on-preview-prev | `() => void` | `undefined` | Click the callback from the previous slide |  |
 | on-preview-next | `() => void` | `undefined` | Click the callback on the next slide |
 
+### ImagePreview Props
+
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| src | `string` | `undefined` | Image source. |  |
+| show | `boolean` | `undefined` | Whether to the show preview big image |  |
+| default-show | `boolean` | `undefined` | Whether to show the preview big image by default. |  |
+| render-toolbar | `(props: { nodes: { prev: VNode, next: VNode, rotateCounterclockwise: VNode, rotateClockwise: VNode, resizeToOriginalSize: VNode, zoomOut: VNode, zoomIn: VNode, download: VNode, close: VNode } }) => VNodeChild` | `undefined` | Toolbar rendering function. |  |
+| show-toolbar | `boolean` | `true` | Whether to show the bottom toolbar when the image enlarge. |  |
+| show-toolbar-tooltip | `boolean` | `false` | Whether to show toolbar buttons' tooltip. |  |
+| on-update:show | `(value: boolean) => void` | `undefined` | Callback on show status changes. |  |
+
 ### Image Slots
 
 | Name | Parameters | Description | Version |
 | --- | --- | --- | --- |
 | placeholder | `()` | Placeholder shown when image is not loaded. | 2.30.5 |
 | error | `()` | The content when the image fails to load. | 2.40.2 |
 
+### Image Methods
+
+| Name        | Type         | Description                     | 版本 |
+| ----------- | ------------ | ------------------------------- | ---- |
+| showPreview | `() => void` | manually open preview big image |      |
+
 ### ImageGroup Slots
 
 | Name    | Parameters | Description                             |

diff --git a/src/image/demos/enUS/manually-open-preview.demo.vue b/src/image/demos/enUS/manually-open-preview.demo.vue
@@ -0,0 +1,36 @@
+<markdown>
+# Manually Open Preview
+
+allow big image preview by call showPreview method.
+</markdown>
+
+<script lang="ts">
+import type { ImageInst } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const imageRef = ref<ImageInst | null>(null)
+    const handleClick = () => {
+      imageRef.value?.showPreview()
+    }
+    return {
+      imageRef,
+      handleClick
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical inline>
+    <n-button @click="handleClick">
+      show image preview
+    </n-button>
+    <n-image
+      ref="imageRef"
+      width="100"
+      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+    />
+  </n-flex>
+</template>
diff --git a/src/image/demos/zhCN/component-preview-group-debug.demo.vue b/src/image/demos/zhCN/component-preview-group-debug.demo.vue
@@ -0,0 +1,73 @@
+<markdown>
+# debug preview group
+</markdown>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const currentIndex = ref(2)
+const showRef = ref(false)
+function onClick() {
+  showRef.value = true
+}
+
+const currentIndex2 = ref(0)
+const showRef2 = ref(false)
+function onClick2() {
+  showRef2.value = true
+}
+</script>
+
+<template>
+  <n-space vertical>
+    <p>src-list</p>
+    <n-button type="primary" @click="onClick">
+      Click me to preview multiple image
+    </n-button>
+    <n-image-group
+      v-model:show="showRef"
+      v-model:current="currentIndex"
+      :src-list="[
+        'https://picsum.photos/id/1/100/100',
+        'https://picsum.photos/id/2/100/100',
+        'https://picsum.photos/id/3/100/100',
+        'https://picsum.photos/id/4/100/100',
+        'https://picsum.photos/id/5/100/100',
+        'https://picsum.photos/id/7/100/100',
+        'https://picsum.photos/id/8/100/100',
+        'https://picsum.photos/id/9/100/100',
+        'https://picsum.photos/id/10/100/100',
+      ]"
+    >
+      <n-space>
+        <n-image
+          width="100"
+          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        />
+        <n-image
+          width="100"
+          src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+        />
+      </n-space>
+    </n-image-group>
+    <pre>currentIndex: {{ currentIndex }}</pre>
+
+    <p>n-image</p>
+    <n-button type="primary" @click="onClick2">
+      Click me to preview multiple image
+    </n-button>
+    <n-image-group v-model:show="showRef2" v-model:current="currentIndex2">
+      <n-space>
+        <n-image
+          width="100"
+          src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        />
+        <n-image
+          width="100"
+          src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
+        />
+      </n-space>
+    </n-image-group>
+    <pre>currentIndex: {{ currentIndex2 }}</pre>
+  </n-space>
+</template>
diff --git a/src/image/demos/zhCN/component-preview-group.demo.vue b/src/image/demos/zhCN/component-preview-group.demo.vue
@@ -0,0 +1,40 @@
+<markdown>
+# 单独使用多图预览组件
+
+`单独使用 <n-image-group> 预览多张图片`
+</markdown>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const currentIndex = ref(0)
+
+const showRef = ref(false)
+function onClick() {
+  showRef.value = true
+}
+</script>
+
+<template>
+  <n-button type="primary" @click="onClick">
+    Click me to preview multiple image
+  </n-button>
+  <n-image-group
+    v-model:show="showRef"
+    v-model:current="currentIndex"
+    :src-list="[
+      'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+      'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
+      'https://picsum.photos/id/1/100/100',
+      'https://picsum.photos/id/2/100/100',
+      'https://picsum.photos/id/3/100/100',
+      'https://picsum.photos/id/4/100/100',
+      'https://picsum.photos/id/5/100/100',
+      'https://picsum.photos/id/7/100/100',
+      'https://picsum.photos/id/8/100/100',
+      'https://picsum.photos/id/9/100/100',
+      'https://picsum.photos/id/10/100/100',
+    ]"
+  />
+  <pre>currentIndex: {{ currentIndex }}</pre>
+</template>