ImagePreview 이미지 미리보기

한 장 또는 여러 장의 이미지를 미리 볼 수 있는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 전달한 이미지를 미리 보여 주거나, 컨테이너 안의 이미지를 미리 봐야 할 때 사용해요.

기본 사용법

:::demo v-d-image-preview 디렉티브를 사용해 컨테이너 안의 이미지를 미리 봐요.

<template>
  <div v-d-image-preview class="devui-image-preview-demo">
    <img v-for="src in imageList" :src="src" :key="src" />
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  setup() {
    const _imageList = [
      'https://devui.design/components/assets/image1.png',
      'https://devui.design/components/assets/image3.png'
    ]
    const imageList = ref(_imageList)
    return {
      imageList
    }
  }
})
</script>

:::

미리보기 창 직접 열기

:::demo custom 파라미터를 넘기면 디렉티브가 open 메서드를 자동으로 주입해서, custom.open으로 미리보기 창을 열 수 있어요

<template>
  <div
    v-d-image-preview="{ custom: image.custom, disableDefault: true }"
    class="devui-image-preview-demo"
  >
    <img v-for="src in imageList" :src="src" :key="src" />
  </div>
  <d-button @click="open" class="btn">自定义</d-button>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  setup() {
    const _imageList = [
      'https://devui.design/components/assets/image1.png',
      'https://devui.design/components/assets/image3.png'
    ]
    const imageList = ref(_imageList)
    const image = reactive({
      custom: {},
      imageList: _imageList
    })
    function open() {
      image.custom.open()
    }
    return {
      imageList,
      image,
      open
    }
  }
})
</script>

:::

zIndex 설정하기

:::demo zIndex로 팝업 효과의 z-index를, backDropZIndex로 팝업 레이어 배경의 z-index를 조절해요. zIndex가 backDropZIndex보다 작으면 imagePreview가 배경 아래에 표시되는 걸 볼 수 있어요. Esc 키로 imagePreview를 닫을 수 있어요.

<template>
  <div class="devui-image-preview-flex">
    <d-radio-group direction="row" v-model="zIndex">
      <d-radio v-for="item in zIndexList" :key="item" :value="item">
        {{ item }}
      </d-radio>
    </d-radio-group>
    <span class="text">zIndex: {{ zIndex }}</span>
  </div>
  <div class="devui-image-preview-flex">
    <d-radio-group direction="row" v-model="backDropZIndex">
      <d-radio v-for="item in backDropZIndexList" :key="item" :value="item">
        {{ item }}
      </d-radio>
    </d-radio-group>
    <span class="text">backDropZIndex: {{ backDropZIndex }}</span>
  </div>
  <div
    v-d-image-preview="{ zIndex: Number(zIndex), backDropZIndex: Number(backDropZIndex) }"
    class="devui-image-preview-demo"
  >
    <img v-for="src in imageList" :src="src" :key="src" />
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  setup() {
    const imageList = ref([
      'https://devui.design/components/assets/image1.png',
      'https://devui.design/components/assets/image3.png'
    ])
    const zIndexList = ref(['1000', '1050', '1100'])
    const backDropZIndexList = ref(['900', '1040', '1000'])
    const zIndex = ref('1050')
    const backDropZIndex = ref('1040')

    return {
      imageList,
      zIndexList,
      backDropZIndexList,
      zIndex,
      backDropZIndex
    }
  }
})
</script>

:::

ImagePreview 파라미터

더 알아보기 (Learn more)

v-d-image-preview 디렉티브만 붙이면 컨테이너 안의 이미지를 클릭해 바로 미리볼 수 있어요. custom.open과 zIndex·backDropZIndex 옵션으로 여는 방식과 겹침 순서까지 제어할 수 있어요.