nuxt实现图片预览

我实现图片预览功能所使用的插件是v-viewer，在nuxt项目中引入方式如下：

1.下载v-viewer

npm install v-viewer

2.在plugins文件夹下创建viewer.js文件，将以下代码写进去

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

3.找到nuxt.config.js，然后在此文件夹下的plugins将刚刚创建的文件引入

plugins: [
    '@/plugins/viewer'
]

以上操作都完成的话，就可以在页面中使用了。

下面来说一下用法

src这里就放置要预览的图片即通过调用点击事件把要预览的图片传给url，这样就可以啦

// 预览图片
previewImg(item) {
    const view = this.$el.querySelector('.viewer').$viewer
    view.show()
    this.url = item
}

注：该点击事件要添加在需要被预览的图片上面。

最后的实现效果就是这样，希望可以帮到你～～～