nuxt中使用vue-picture-preview图片查看器，
2019-02-19 本文已影响231人
辉夜真是太可爱啦
话不多说，开始安装插件，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 组件的位置
<!-- Vue root compoment template -->
<div id="app">
<router-view></router-view>
<lg-preview></lg-preview>
</div>
如图，只需要在img标签中绑定v-preview=图片的路径即可完成此功能
