前言：
目前你们对“js预览”大约比较关切，你们都想要分析一些“js预览”的相关文章。那么小编同时在网络上收集了一些有关“js预览””的相关文章，希望同学们能喜欢，咱们快快来学习一下吧！今天给大家分享一款 vue3.x 构建的图片查看组件V3ImgPreview。
v3-img-preview 基于vue3编写的图片预览插件，支持单图和多图预览，支持图片旋转，缩放，移动等功能。
安装
npm install v3-img-preview --save# oryarn add v3-img-preview快速引入
import { createApp } from 'vue'import App from './App.vue'import v3ImgPreview from 'v3-img-preview'const app = createApp(App)app.mount('#app')app.use(v3ImgPreview, {/* 全局配置 */})使用组件<template> <div class="box"> <button @click="handleClick">导出方法调用</button> <button @click="handleImgPreview">实例调用</button> </div></template><script>import { defineComponent} from 'vue'import { v3ImgPreviewFn } from 'v3-img-preview'export default defineComponent({ name: 'ServeDev', components: {}, setup() { const instance = getCurrentInstance() const handleClick = () => { // 导出方法调用 v3ImgPreviewFn( '; ) } // or const handleImgPreview = () => { // 全局方法调用 instance.proxy.$v3ImgPreviewFn(';) } return { handleClick,handleImgPreview } }})</script>配置参数如下
以下属性适用于传递对象时使用，若只传递 url，您也可以直接调用方法传递 v3ImgPreviewFn(";)
另外还支持快捷键操作图片。
非常有参考意义的一个vue3图片预览插件。
# 文档地址 仓库地址
好了，今天的分享就到这里了。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js预览
