vue中使用查看大图(vue-photo-preview)


效果图

点击前

 

 

点击后

 

 

1、介绍

  最新需求要实现根据鼠标滚轮实现放大缩小 又找了另外一个组件 https://www.cnblogs.com/qhantime/p/13744965.html

  基于photoswipe的vue图片预览插件

  地址https://developer.aliyun.com/mirror/npm/package/vue-photo-preview

  GitHub: https://github.com/826327700/vue-photo-preview?spm=a2c6h.14275010.0.0.40676d0cWoYVHs

2、安装

  npm install vue-photo-preview --save

3、引入

  Main中引入

  import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  Vue.use(preview)

4、使用

  //在img标签添加preview属性 preview值相同即表示为同一组

  //分组
    <img src="xxx.jpg" preview="1" preview-text="描述文字">
    <img src="xxx.jpg" preview="1" preview-text="描述文字">

  //最新用法

    <img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM