feat(image): feat/seperate-image-viewer (#1199)

- Seperate image viewer as a independent component. Close #1147

packages/element-plus/index.ts

@@ -37,6 +37,7 @@ import ElFormItem from '@element-plus/form-item'
 import ElHeader from '@element-plus/header'
 import ElIcon from '@element-plus/icon'
 import ElImage from '@element-plus/image'
+import ElImageViewer from '@element-plus/image-viewer'
 import ElInfiniteScroll from '@element-plus/infinite-scroll'
 import ElInput from '@element-plus/input'
 import ElInputNumber from '@element-plus/input-number'
@@ -141,6 +142,7 @@ const components = [
   ElHeader,
   ElIcon,
   ElImage,
+  ElImageViewer,
   ElInput,
   ElInputNumber,
   ElLink,
@@ -249,6 +251,7 @@ export {
   ElHeader,
   ElIcon,
   ElImage,
+  ElImageViewer,
   ElInfiniteScroll,
   ElInput,
   ElInputNumber,

packages/image-viewer/__tests__/image-viewer.spec.ts

@@ -0,0 +1,48 @@
+import ImageViewer from '../src/index.vue'
+import { nextTick } from 'vue'
+
+import { IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
+import makeMount from '@element-plus/test-utils/make-mount'
+
+const mount = makeMount(ImageViewer, {
+  props: {
+    src: IMAGE_SUCCESS,
+    urlList: [IMAGE_SUCCESS],
+  },
+})
+
+async function doubleWait() {
+  await nextTick()
+  await nextTick()
+}
+
+describe('<image-viewer />', () => {
+
+  test('big image preview', async() => {
+    const wrapper = mount()
+    await doubleWait()
+    const viewer = wrapper.find('.el-image-viewer__wrapper')
+    expect(viewer.exists()).toBe(true)
+    await wrapper.find('.el-image-viewer__close').trigger('click')
+    expect(wrapper.emitted('close')).toEqual([[]])
+  })
+
+  test('image preview hide-click-on-modal', async () => {
+    const wrapper = mount()
+
+    await doubleWait()
+    const viewer = wrapper.find('.el-image-viewer__wrapper')
+    expect(viewer.exists()).toBe(true)
+    await wrapper.find('.el-image-viewer__mask').trigger('click')
+    expect(wrapper.emitted('close')).toBeUndefined()
+
+    await wrapper.setProps({
+      hideOnClickModal: true,
+    })
+
+    await wrapper.find('.el-image-viewer__mask').trigger('click')
+    expect(wrapper.emitted('close')).toBeDefined()
+
+  })
+
+})

packages/image-viewer/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import type { SFCWithInstall } from '@element-plus/utils/types'
+import ImageViewer from './src/index.vue'
+
+ImageViewer.install = (app: App): void => {
+  app.component(Image.name, Image)
+}
+
+const _ImageViewer: SFCWithInstall<typeof ImageViewer> = ImageViewer
+
+export default _ImageViewer

packages/image-viewer/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/image-viewer",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/image-viewer/src/index.vue

@@ -2,14 +2,18 @@
   <transition name="viewer-fade">
     <div
       ref="wrapper"
-      tabindex="-1"
+      :tabindex="-1"
       class="el-image-viewer__wrapper"
-      :style="{ 'z-index': zIndex }"
+      :style="{ zIndex }"
     >
-      <div class="el-image-viewer__mask"></div>
+      <div
+        class="el-image-viewer__mask"
+        @click.self="hideOnClickModal && hide()"
+      >
+      </div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
-        <i class="el-icon-circle-close"></i>
+        <i class="el-icon-close"></i>
       </span>
       <!-- ARROW -->
       <template v-if="!isSingle">
@@ -79,33 +83,38 @@ const Mode = {
 }
 
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
+const CLOSE_EVENT = 'close'
+const SWITCH_EVENT = 'switch'
+export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clocelise' | 'anticlocelise'
 
 export default defineComponent({
   name: 'ElImageViewer',
   props: {
     urlList: {
       type: Array as PropType<string[]>,
-      default: () => [],
+      default: [],
     },
     zIndex: {
       type: Number,
       default: 2000,
     },
-    onSwitch: {
-      type: Function,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => ({}),
-    },
     initialIndex: {
       type: Number,
       default: 0,
     },
+    infinite: {
+      type: Boolean,
+      default: true,
+    },
+    hideOnClickModal: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup(props) {
+  emits: [CLOSE_EVENT, SWITCH_EVENT],
+
+  setup(props, { emit }) {
     // init here
 
     let _keyDownHandler = null
@@ -114,7 +123,6 @@ export default defineComponent({
 
     const loading = ref(true)
     const index = ref(props.initialIndex)
-    const infinite = ref(true)
     const wrapper = ref(null)
     const img = ref(null)
     const mode = ref(Mode.CONTAIN)
@@ -148,9 +156,9 @@ export default defineComponent({
       const style = {
         transform: `scale(${scale}) rotate(${deg}deg)`,
         transition: enableTransition ? 'transform .3s' : '',
-        'margin-left': `${offsetX}px`,
+        marginLeft: `${offsetX}px`,
-        'margin-top': `${offsetY}px`,
+        marginTop: `${offsetY}px`,
-      }
+      } as CSSStyleDeclaration
       if (mode.value.name === Mode.CONTAIN.name) {
         style.maxWidth = style.maxHeight = '100%'
       }
@@ -159,11 +167,11 @@ export default defineComponent({
 
     function hide() {
       deviceSupportUninstall()
-      props.onClose()
+      emit(CLOSE_EVENT)
     }
 
     function deviceSupportInstall() {
-      _keyDownHandler = rafThrottle(e => {
+      _keyDownHandler = rafThrottle((e: KeyboardEvent) => {
         switch (e.code) {
           // ESC
           case EVENT_CODE.esc:
@@ -226,7 +234,7 @@ export default defineComponent({
       e.target.alt = t('el.image.error')
     }
 
-    function handleMouseDown(e) {
+    function handleMouseDown(e: MouseEvent) {
       if (loading.value || e.button !== 0) return
 
       const { offsetX, offsetY } = transform.value
@@ -270,18 +278,18 @@ export default defineComponent({
     }
 
     function prev() {
-      if (isFirst.value && !infinite.value) return
+      if (isFirst.value && !props.infinite) return
       const len = props.urlList.length
       index.value = (index.value - 1 + len) % len
     }
 
     function next() {
-      if (isLast.value && !infinite.value) return
+      if (isLast.value && !props.infinite) return
       const len = props.urlList.length
       index.value = (index.value + 1) % len
     }
 
-    function handleActions(action, options = {}) {
+    function handleActions(action: ImageViewerAction, options = {}) {
       if (loading.value) return
       const { zoomRate, rotateDeg, enableTransition } = {
         zoomRate: 0.2,
@@ -308,7 +316,6 @@ export default defineComponent({
       transform.value.enableTransition = enableTransition
     }
 
-
     watch(currentImg, () => {
       nextTick(() => {
         const $img = img.value
@@ -320,22 +327,20 @@ export default defineComponent({
 
     watch(index, val => {
       reset()
-      props.onSwitch(val)
+      emit(SWITCH_EVENT, val)
     })
 
     onMounted(() => {
       deviceSupportInstall()
       // add tabindex then wrapper can be focusable via Javascript
       // focus wrapper so arrow key can't cause inner scroll behavior underneath
-      wrapper.value?.focus()
+      wrapper.value?.focus?.()
     })
 
     return {
       index,
       wrapper,
       img,
-      infinite: true,
-      loading: false,
       isSingle,
       isFirst,
       isLast,

packages/image/__tests__/image.spec.ts

@@ -100,20 +100,4 @@ describe('Image.vue', () => {
   })
 
   //@todo lazy image test
-
-  test('big image preview', async() => {
-    const wrapper = mount(Image, {
-      props: {
-        src: IMAGE_SUCCESS,
-        previewSrcList: [IMAGE_SUCCESS],
-      },
-    })
-    await doubleWait()
-    expect(wrapper.find('.el-image__inner').exists()).toBe(true)
-    await wrapper.find('.el-image__inner').trigger('click')
-    const viewer = wrapper.find('.el-image-viewer__wrapper')
-    expect(viewer.exists()).toBe(true)
-    await wrapper.find('.el-image-viewer__close').trigger('click')
-    expect(wrapper.find('.el-image-viewer__wrapper').exists()).toBe(false)
-  })
 })

packages/image/src/index.vue

@@ -24,8 +24,9 @@
         v-if="showViewer"
         :z-index="zIndex"
         :initial-index="imageIndex"
-        :on-close="closeViewer"
         :url-list="previewSrcList"
+        :hide-on-click-modal="hideOnClickModal"
+        @close="closeViewer"
       />
     </template>
   </div>
@@ -40,7 +41,8 @@ import { useAttrs } from '@element-plus/hooks'
 import isServer from '@element-plus/utils/isServer'
 import { on, off, getScrollContainer, isInContainer } from '@element-plus/utils/dom'
 import { t } from '@element-plus/locale'
-import ImageViewer from './image-viewer.vue'
+import ImageViewer from '@element-plus/image-viewer'
+import type { PropType } from 'vue'
 
 const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined
 const isHtmlEle = e => e && e.nodeType === 1
@@ -62,6 +64,10 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    hideOnClickModal: {
+      type: Boolean,
+      default: false,
+    },
     src: {
       type: String,
       default: '',
@@ -79,8 +85,8 @@ export default defineComponent({
       default: null,
     },
     previewSrcList: {
-      type: Array,
+      type: Array as PropType<string[]>,
-      default: () => [],
+      default: () => [] as string[],
     },
     zIndex: {
       type: Number,

packages/theme-chalk/src/image-viewer.scss

@@ -0,0 +1,134 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@mixin op-icon() {
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: $--color-text-regular;
+  border-color: #fff;
+}
+
+@include b(image-viewer) {
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include e(btn) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: .8;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  @include e(close) {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+  }
+
+  @include e(canvas) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(actions) {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: $--color-text-regular;
+    border-color: #fff;
+    border-radius: 22px;
+
+    @include e(actions__inner) {
+      width: 100%;
+      height: 100%;
+      text-align: justify;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+  @include e(prev){
+    top: 50%;
+    transform: translateY(-50%);
+    left: 40px;
+    @include op-icon()
+  }
+
+  @include e(next){
+    top: 50%;
+    transform: translateY(-50%);
+    right: 40px;
+    text-indent: 2px;
+    @include op-icon();
+  }
+
+  @include e(close) {
+    @include op-icon();
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: .5;
+    background: #000;
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in .3s;
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out .3s;
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

packages/theme-chalk/src/image.scss

@@ -1,5 +1,6 @@
 @import "mixins/mixins";
 @import "common/var";
+@import "./image-viewer.scss";
 
 %size {
   width: 100%;
@@ -45,133 +46,3 @@
   }
 }
 
-
-@include b(image-viewer) {
-
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  @include e(btn) {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    opacity: .8;
-    cursor: pointer;
-    box-sizing: border-box;
-    user-select: none;
-  }
-
-  @include e(close) {
-    top: 40px;
-    right: 40px;
-    width: 40px;
-    height: 40px;
-    font-size: 40px;
-  }
-
-  @include e(canvas) {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  @include e(actions) {
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-    width: 282px;
-    height: 44px;
-    padding: 0 23px;
-    background-color: #606266;
-    border-color: #fff;
-    border-radius: 22px;
-
-    @include e(actions__inner) {
-      width: 100%;
-      height: 100%;
-      text-align: justify;
-      cursor: default;
-      font-size: 23px;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-    }
-  }
-
-  @include e(prev){
-    top: 50%;
-    transform: translateY(-50%);
-    width: 44px;
-    height: 44px;
-    font-size: 24px;
-    color: #fff;
-    background-color: #606266;
-    border-color: #fff;
-    left: 40px;
-  }
-
-  @include e(next){
-    top: 50%;
-    transform: translateY(-50%);
-    width: 44px;
-    height: 44px;
-    font-size: 24px;
-    color: #fff;
-    background-color: #606266;
-    border-color: #fff;
-    right: 40px;
-    text-indent: 2px;
-  }
-
-  @include e(mask) {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    opacity: .5;
-    background: #000;
-  }
-}
-
-.viewer-fade-enter-active {
-  animation: viewer-fade-in .3s;
-}
-
-.viewer-fade-leave-active {
-  animation: viewer-fade-out .3s;
-}
-
-@keyframes viewer-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes viewer-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}

packages/theme-chalk/src/index.scss

@@ -70,6 +70,7 @@
 @import "./link.scss";
 @import "./divider.scss";
 @import "./image.scss";
+@import "./image-viewer.scss";
 @import "./calendar.scss";
 @import "./backtop.scss";
 @import "./infinite-scroll.scss";

website/docs/en-US/image.md

@@ -140,28 +140,42 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 ```
 :::
 
-### Attributes
+### Image Attributes
 | Attribute | Description | Type  | Accepted values | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| src | Image source, same as native | string | — | - |
-| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | Native alt | string | - | - |
-| referrer-policy | Native referrerPolicy | string | - | - |
+| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| hide-on-click-modal | When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode | boolean | true / false | false |
 | lazy | Whether to use lazy load | boolean | — | false |
-| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | preview-src-list | allow big image preview | Array | — | - |
+| referrer-policy | Native referrerPolicy | string | - | - |
+| src | Image source, same as native | string | — | - |
+| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | z-index | set image preview z-index | Number | — | 2000 |
 
-### Events
+### Image Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | load | Same as native load | (e: Event) |
 | error | Same as native error | (e: Error) |
 
-### Slots
+### Image Slots
 | Slot Name | Description |
 |---------|-------------|
 | placeholder | Triggers when image load |
 | error | Triggers when image load failed |
 
+### ImageViewer Attributes
+| Attribute      | Description    | Type      | Acceptable Value    | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| url-list | Preview link list | Array\<string\> | - | [] |
+| z-index  | Preview backdrop z-index | number / string |  int / string\<int\> | 2000 |
+| initial-index | The initial preview image index, less than or equal to the length of `url-list` | number | int | 0 |
+| infinite | Whether preview is infinite | boolean | true / false | true |
+| hide-on-click-modal | Whether user can emit close event when clicking backdrop | boolean | true / false | false |
 
+### ImageViewer Events
+| Event name      | Description    | Callback parameter      |
+|---------- |-------- |---------- |
+| close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
+| switch | When switching images | `(val: number)` switching target index |

website/docs/es/image.md

@@ -142,28 +142,42 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 ```
 :::
 
-### Atributos
+### Image Atributos
 | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
-| src | origen de la imagen, igual que en nativo | string | — | - |
-| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | alt nativo | string | - | - |
-| referrer-policy | referrerPolicy nativo | string | - | - |
+| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| hide-on-click-modal (needs translation) | When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode | boolean | true / false | false |
 | lazy | si se usara lazy load | boolean | — | false |
-| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
 | preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
+| referrer-policy | referrerPolicy nativo | string | - | - |
+| src | origen de la imagen, igual que en nativo | string | — | - |
+| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
 | z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
 
-### Eventos
+### Image Eventos
 | Nombre del evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
 | load | Igual que el load nativo | (e: Event) |
 | error | Igual que el error nativo | (e: Error) |
 
-### Slots
+### Image Slots
 | Nombre del slot | Descripción |
 |---------|-------------|
 | placeholder | Se activa cuando la imagen se carga |
 | error | Se activa cuando la carga de la imagen falla |
 
+### ImageViewer Atributos
+| Attribute      | Description    | Type      | Acceptable Value    | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| url-list | Preview link list | Array\<string\> | - | [] |
+| z-index  | Preview backdrop z-index | number / string |  int / string\<int\> | 2000 |
+| initial-index | The initial preview image index, less than or equal to the length of `url-list` | number | int | 0 |
+| infinite | Whether preview is infinite | boolean | true / false | true |
+| hide-on-click-modal | Whether user can emit close event when clicking backdrop | boolean | true / false | false |
 
+### ImageViewer Eventos
+| Event name      | Description    | Callback parameter      |
+|---------- |-------- |---------- |
+| close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
+| switch | When switching images | `(val: number)` switching target index |

website/docs/fr-FR/image.md

@@ -141,26 +141,42 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 ```
 :::
 
-### Attributs
+### Image Attributs
 | Attribut | Description | Type  | Valeurs acceptées | Défaut   |
 |---------- |-------- |---------- |-------------  |-------- |
-| src | Source de l'image, identique au natif. | string | — | - |
-| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | Attribut alt natif.| string | - | - |
-| referrer-policy | Attribut referrerPolicy natif.| string | - | - |
+| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| hide-on-click-modal (needs translation) | When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode | boolean | true / false | false |
 | lazy | Si le lazy loading doit être utilisé. | boolean | — | false |
-| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
 | preview-src-list | allow big image preview | Array | — | - |
+| referrer-policy | Attribut referrerPolicy natif.| string | - | - |
+| src | Source de l'image, identique au natif. | string | — | - |
+| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
 | z-index | set image preview z-index | Number | — | 2000 |
 
-### Évènements
+### Image Évènements
 | Nom | Description | Paramètres |
 |---------- |-------- |---------- |
 | load | Identique au load natif. | (e: Event) |
 | error | Identique au error natif. | (e: Error) |
 
-### Slots
+### Image Slots
 | Nom | Description |
 |---------|-------------|
 | placeholder | Se déclenche quand l'image charge. |
 | error | Se déclenche quand le chargement de l'image a échoué. |
+
+### ImageViewer Attributs
+| Attribute      | Description    | Type      | Acceptable Value    | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| url-list | Preview link list | Array\<string\> | - | [] |
+| z-index  | Preview backdrop z-index | number / string |  int / string\<int\> | 2000 |
+| initial-index | The initial preview image index, less than or equal to the length of `url-list` | number | int | 0 |
+| infinite | Whether preview is infinite | boolean | true / false | true |
+| hide-on-click-modal | Whether user can emit close event when clicking backdrop | boolean | true / false | false |
+
+### ImageViewer Évènements
+| Event name      | Description    | Callback parameter      |
+|---------- |-------- |---------- |
+| close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
+| switch | When switching images | `(val: number)` switching target index |

website/docs/jp/image.md

@@ -140,28 +140,42 @@ imgのネイティブ機能の他に、遅延ロード、カスタムプレー
 ```
 :::
 
-### 属性
+### Image 属性
 | Attribute | Description | Type  | Accepted values | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| src | image source、ネイティブと同じ | string | — | - |
-| fit | 画像のサイズをコンテナに合わせてどのように変更するかを指定します。[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じ | string | fill / contain / cover / none / scale-down | - |
 | alt | ネイティブalt | string | - | - |
-| referrer-policy | ネイティブreferrerPolicy | string | - | - |
+| fit | 画像のサイズをコンテナに合わせてどのように変更するかを指定します。[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)と同じ | string | fill / contain / cover / none / scale-down | - |
+| hide-on-click-modal (needs translation) | When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode | boolean | true / false | false |
 | lazy | 遅延ロードを使用するかどうか | boolean | — | false |
-| scroll-container | 遅延ロード時にスクロールリスナーを追加するコンテナ | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | preview-src-list | 大きな画像のプレビューを許可する | Array | — | - |
+| referrer-policy | ネイティブreferrerPolicy | string | - | - |
+| src | image source、ネイティブと同じ | string | — | - |
+| scroll-container | 遅延ロード時にスクロールリスナーを追加するコンテナ | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | z-index | セットイメージプレビュー z-index | Number | — | 2000 |
 
-### イベント
+### Image イベント
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | load | ネイティブロードと同じ | (e: Event) |
 | error | ネイティブエラーと同じ | (e: Error) |
 
-### スロット
+### Image スロット
 | Slot Name | Description |
 |---------|-------------|
 | placeholder | 画像の読み込み時にトリガ |
 | error | 画像の読み込み失敗した場合のトリガー |
 
+### ImageViewer 属性
+| Attribute      | Description    | Type      | Acceptable Value    | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| url-list | Preview link list | Array\<string\> | - | [] |
+| z-index  | Preview backdrop z-index | number / string |  int / string\<int\> | 2000 |
+| initial-index | The initial preview image index, less than or equal to the length of `url-list` | number | int | 0 |
+| infinite | Whether preview is infinite | boolean | true / false | true |
+| hide-on-click-modal | Whether user can emit close event when clicking backdrop | boolean | true / false | false |
 
+### ImageViewer イベント
+| Event name      | Description    | Callback parameter      |
+|---------- |-------- |---------- |
+| close | Emitted when clicking on `X` button or when `hide-on-click-modal` enabled clicking on backdrop | None |
+| switch | When switching images | `(val: number)` switching target index |

website/docs/zh-CN/image.md

@@ -140,28 +140,43 @@
 ```
 :::
 
-### Attributes
+### Image Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| src | 图片源，同原生 | string | — | - |
-| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | 原生 alt | string | - | - |
-| referrer-policy | 原生 referrerPolicy | string | - | - |
+| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| hide-on-click-modal | 当开启 preview 功能时，是否可以通过点击遮罩层关闭 preview | boolean | true / false | false |
 | lazy | 是否开启懒加载 | boolean | — | false |
-| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
 | preview-src-list | 开启图片预览功能 | Array | — | - |
+| referrer-policy | 原生 referrerPolicy | string | - | - |
+| src | 图片源，同原生 | string | — | - |
+| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
 | z-index | 设置图片预览的 z-index | Number | — | 2000 |
 
-### Events
+### Image Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | load | 图片加载成功触发 | (e: Event) |
 | error | 图片加载失败触发 | (e: Error) |
 
-### Slots
+### Image Slots
 | 名称    | 说明         |
 |---------|-------------|
 | placeholder | 图片未加载的占位内容 |
 | error | 加载失败的内容 |
 
 
+### ImageViewer Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| url-list | 用于预览的图片链接列表 | Array\<string\> | - | [] |
+| z-index  | 预览时遮罩层的 z-index | number / string |  int / string\<int\> | 2000 |
+| initial-index | 预览的首张图片的位置, 小于等于数组长度 | number | int | 0 |
+| infinite | 是否可以无限循环预览 | boolean | true / false | true |
+| hide-on-click-modal | 是否可以通过点击遮罩层关闭预览 | boolean | true / false | false |
+
+### ImageViewer Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| close | 当点击 X 按钮或者在 hide-on-click-modal 为 true 时点击遮罩层时触发 | 无 |
+| switch | 当图片切换时触发 | (val: number) 切换目标的下标 |