nuxt中使用vue-picture-preview图片查看器,超简单!

话不多说,开始安装插件,vue-pictrue-preview

npm install vue-picture-preview --save

在plugins文件夹中新建vue-preview.js,写入以下内容

import Vuefrom 'vue'

import vuePicturePreviewfrom 'vue-picture-preview'

Vue.use(vuePicturePreview);

然后打开nuxt.config.js,引用该插件

plugins: [

  {src:'@/plugins/vue-preview', ssr:false },

],

在根组件APP.vue中添加lg-preview 组件的位置

    

        

    


如图,只需要在img标签中绑定v-preview=图片的路径即可完成此功能


nuxt中使用vue-picture-preview图片查看器,超简单!_第1张图片

你可能感兴趣的:(nuxt中使用vue-picture-preview图片查看器,超简单!)