图片预览插件v-viewer的简单使用

倩倩i
1,127 阅读2分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2天，点击查看活动详情”

一、 首先需要在你项目里面的package.json的这个文件下的Dependencies注册"v-viewer": "^1.6.4",具体安装代码如下:

npm install v-viewer --save

PS: 如果由于版本不同导致报错,可以尝试直接把"v-viewer": "^1.6.4"复制粘贴到Dependencies里面,然后重新npm install,这样会根据package.json里面的模块来进行安装

二、接下来需要到main.js这个文件里面去引入,具体引入代码如下:

import "viewerjs/dist/viewer.css"; //引入css的样式
import VueViewer from "v-viewer";
Vue.use(VueViewer);

PS: 这里是全局引入,也就是说,引入之后,在这个项目里面的任何地方都可以直接用到了,这个根据自己的需求来,如果这个项目图片预览的功能不是很多的话,你可以选择按需引入,按需引入的代码如下:

import { Viewer } from 'v-viewer'
import "viewerjs/dist/viewer.css"; //引入css的样式
@Component({
  components: {
    Viewer
  },
})

三、引入之后你就可以开始使用啦,具体的使用方式如下:

<viewer
       :images="item.descriptionImg"
       class="preview-container"
>
    <img
        class="preview-img"
        v-for="(src, index) in item.descriptionImg"
        :key="index"
        :src="src"
    />
</viewer>

images就是图片预览的列表,是一个数组,因为这个组件的预览功能很丰富,有向前翻页向后翻页这一类的,不只是简单的预览一张图片,具体效果如图所示:

9f336bf8f409dbdccfa20d8a56b39ff.png

这里就是我举例的图片的列表,那点击之后呢就是预览其中一张照片的效果,如下图所示:

c97838bf9c9910c597cee5c81cfb09f.png

PS:下面就是具体的默认所有功能,默认是有放大,缩小,一比一显示,重置,上下翻页,全屏显示,向左向右旋转,上下翻转,左右翻转,这些功能,如果你觉得功能太多,可以做删减,在这里我就不做过多阐述了,官网都有具体的详细描述,官网还有很多效果图,体验也更好些~ [ 点击查看v-viewer官网 ]

以上就是v-viewer的简单使用,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。

最后,祝大家发大财~

avatar
文章
阅读
粉丝