短视频系统源码,点开图片双指放大或双击放大
2022/3/3 17:16:51
本文主要是介绍短视频系统源码,点开图片双指放大或双击放大,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
短视频系统源码,点开图片双指放大或双击放大实现的相关代码
v-viewer是一个图片放大预览,他可以鼠标滚轮放大和缩小,也可以全屏,上一张下一张
安装
npm install v-viewer --save
main.js引入
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer)
如果你不想显示按钮和图片名称的话,你可以在main.js
Vue.use(Viewer, { defaultOptions: { button: false, navbar: false, title: false, toolbar: true, } })
使用方法一
<viewer :images="photo"> //photo 一定要一个数组,否则报错 <img :src="row.avatar"> </viewer>
使用方法二
<div class="tabBox_img" v-viewer> <img v-lazy="row.avatar" /> </div>
方法
methods: { inited (viewer) { this.$viewer = viewer this.$viewer.index = this.activeIndex // 不要他的按钮 this.$viewer.options.button = false // 不要他的底部缩略图 this.$viewer.options.navbar = false // 不要他的底部标题 this.$viewer.options.title = false // 不要他的底部工具栏 this.$viewer.options.toolbar = false this.show() }, // 调用显示 show () { this.$viewer.show() }, }
以上就是 短视频系统源码,点开图片双指放大或双击放大实现的相关代码,更多内容欢迎关注之后的文章
这篇关于短视频系统源码,点开图片双指放大或双击放大的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?