preview

简单使用

demo1

<img class="demo-img" v-preview src="http://web.huaweiyun.zwyznswwy.com/note/note1.jpg" alt="" />

添加配置

默认配置 - 查看配置

demo2

<img
  class="demo-img"
  v-preview="{
    background: 'rgba(27, 41, 50, 0.8)',
    margin: 50
  }"
  src="http://web.huaweiyun.zwyznswwy.com/note/note1.jpg"
  alt=""
/>

获取实例

提示

提供了获取 preview 的实例的配置，通过 useInstance 可以获取实例后进行进一步的操作

demo3

<template>
  <demo>
    <div class="tips">尝试点击右侧按钮预览图片</div>
    <div class="demo-pk">
      <div class="demo-item">
        <img
          class="demo-img"
          v-preview="{
            background: 'rgba(27, 41, 50, 0.8)',
            margin: 50,
            useInstance: previewInstance
          }"
          src="http://web.huaweiyun.zwyznswwy.com/note/note1.jpg"
          alt=""
        />
      </div>
      <div class="demo-item">
        <button class="demo-button" @click="showMessage">点击查看图片</button>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import demo from '../../global/demo.vue'
import type { Zoom } from 'medium-zoom'
import { reactive } from 'vue'
import Notice from '../../../util/notice'

type DemoData = {
  instance: null | Zoom
}

const demoData = reactive<DemoData>({
  instance: null
})

const previewInstance = (instance: Zoom) => {
  demoData.instance = instance
  // 监听事件
  instance.on('open', () => {
    new Notice().info('预览中')
  })
  instance.on('close', () => {
    new Notice().info('预览关闭')
  })
}

const showMessage = () => {
  demoData.instance?.open()
}
</script>

更多使用方式

详情查看 - medium-zoom