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="">

截图：

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_30632003/article/details/79639230
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 18:49:27
阅读 ( 648 )
分类：前端

vue全家桶开发管理后台—图片预览功能（vue-picture-preview）

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看