vue全家桶開發管理後臺—圖片預覽功能（vue-picture-preview）

安裝：

cnpm install --save-picture-preview

使用：

首先在項目的入口文件中引入, 調用 Vue.use 安裝。

main.js:

import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

在根組件添加 lg-preview 組件的位置

App.vue:

<template>
  <div id="app">
    <router-view @login="loginDirect" @logout="logoutDirect"/>
    <lg-preview></lg-preview>
  </div>
</template>

對於所有圖片都可以使用 v-preview 指令來綁定他們的預覽功能

<img v-preview="baseData.author"
     :src="baseData.author"
     :alt="baseData.nickname"
     :key="11"
     preview-title-enable="true"
     preview-nav-enable="true">
<img class="img" :src="baseData.author" alt="">

截圖：