Vue使用插件v-viewer预览单张图片

╰半夏微凉° 2023-06-26 12:23 98阅读 0赞

1.什么是V-viewer

用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。

2.安装

使用npm命令安装

  1. npm install v-viewer

3.使用

在main.js中引入

  1. import 'viewerjs/dist/viewer.css'
  2. import Viewer from 'v-viewer'
  3. Vue.use(Viewer)

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70

四:以指令形式使用

在要用到图片预览的页面(组件)中像下图中这样使用

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 1

效果:

ps:我是把预览组件放在列表中使用的,为了大家方便大家知道我是预览那张图(列表中第二张,忘了打箭头),我把图片往右边拖拽了一些

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX3h1bg_size_16_color_FFFFFF_t_70 2

好啦,vue单张预览图片教程就结束了,有木有感觉很简单!

附上参考地址,方便大家学习:点我

viewer.js github地址:viewer.js

发表评论

表情:
评论列表 (有 0 条评论,98人围观)

还没有评论,来说两句吧...

相关阅读