广东网站建设需要多少钱,免费网站制作作业,网站建设试卷摄影,门户网站对应序号是什么vue3中使用viewerjs实现图片预览效果 1、前言2、实现效果3、在vue3项目中使用viewer.js3.1 安装3.2 在main.js中引入3.3 组件中使用 1、前言
viewer.js是一款开源的图片预览插件#xff0c;功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转#xff08;类… vue3中使用viewerjs实现图片预览效果 1、前言2、实现效果3、在vue3项目中使用viewer.js3.1 安装3.2 在main.js中引入3.3 组件中使用 1、前言
viewer.js是一款开源的图片预览插件功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转类似微博的图片旋转支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式可做屏保支持缩略图支持标题显示支持多种自定义事件 GitHub地址https://github.com/fengyuanchen/viewerjs
常用配置参数
2、实现效果 3、在vue3项目中使用viewer.js
3.1 安装
npm install v-viewer -S3.2 在main.js中引入
import Viewer from v-viewer
import viewerjs/dist/viewer.cssapp.use(Viewer, {defaultOptions: {// 需要配置的属性 注意属性并没有引号title: false,toolbar: false}
})3.3 组件中使用
viewer classimage-box :imagessceneDatadiv v-forimg in sceneData :keyimg.idimg classimage :srcimg.url alt/div
/viewer
