超实用的插件—一键实现图片预览（简单易上手）

1简介：

本篇在于采用npm上的一款组件（Vue3-Image-Preview），快速实现图片预览和操作该图片的功能，支持放大或者缩小图片。（本篇采用vue3+element-plus进行构建项目）

具体其他效果和功能可以看原文npm的官方，地址如下

vue3-image-preview - npm

2功能实现效果演示：

3实现步骤：

3.1：安装（采用npm或者yarn）

npm install vue3-image-preview

或者

yarn add vue3-image-preview

3.2：项目内引入

可单个页面进行页面（局部引入）或者在main.js中全局引入（全局引入），【注释：如果项目内使用较多的话，建议全局引入直接使用，降低代码的重复率】

局部引入方式：

import {preview, vPreview, Vue3ImagePreview} from 'vue3-image-preview';

全局引入方式：

import { createApp } from 'vue';
import App from './App.vue';
import preview from 'vue3-image-preview';

createApp(App).use(preview).mount('#app');

特别注意：

在入口文件中引入vue3-image-preview，并且使用.use()安装全局插件。 v-preview已注册为全局指令，Vue3ImagePreview已注册为全局组件。

preview函数需要通过getCurrentInstance(Vue3的Composition Api)来引入。

const {proxy} = getCurrentInstance() as any;

proxy.preview({
    images: state.images1,
    index: state.index
});

3.3使用

本篇介绍的是单个页面使用该组件的方法

在.vue页面进行引入

在需要预览的图片上进行添加v-preview即可