image-view v1.0.6

image-view

组件介绍

image-view是一个点击图片放大的组件，支持原位置进行运动放大，缩小至原位置交互体验，如下图：https://xydideo.gitee.io/blog/public-image/image-view.gif

组件依赖

vue3、less（vue2也支持）

组件使用

<template>
  <div class="page">
    <div>
      <img :src="item" alt="" srcset="" v-for="(item,index) in list" :key="index" @click="handleClick">
    </div>

    <image-view ref="imgViewRef" :isShow="isShow" @close="isShow=false" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

// 引入组件
import { ImageView } from 'image-view'
import 'image-view/style.css'

// 获取全局在main.js中引入
// import ImageView from 'image-view'
// import 'image-view/style.css'
// app.use(ImageView)

const imgViewRef = ref(null)
const isShow = ref(false)
const list = ref([
  "https://mail.qq.com/zh_CN/htmledition/images/favicon/qqmail_favicon_96h.png",
  "https://undesign.learn.uno/icon.png",
  "https://cdn.apifox.cn/logo/apifox-logo-512.png",
])

// 点击图片
function handleClick(event) {
  isShow.value = true
  imgViewRef.value.imageView(event)
}
</script>

<style lang="less" scoped>
img {
  width: 100px;
  height: 100px;
  margin: 12px;
}
</style>

组件api

Props

Events