今天做项目用到了一个图片播放的组件v-viewer同各位麻油分享一下。
1.首先在终端中进入项目目录:
2.执行终端命令,安装v-viewer组件:npm install v-viewer
3.配置vue 的 main.js文件:
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
4.在.vue文件重定义
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src">
</viewer>
images 在文件中自己定义。
分享到:
相关推荐
主要介绍了Vue图片浏览组件v-viewer用法,结合实例形式分析了v-viewer的基本功能与使用方法,包括旋转、缩放、翻转等操作技巧,需要的朋友可以参考下
vue的图片查看器组件,支持旋转、缩放、缩放等,基于 例子 缩略图和来源 查看器回调 过滤图像 更改图像 中文文档 从 0.x 迁移 您需要做的唯一更改是手动导入.css文件: import 'viewerjs/dist/viewer.css' 安装...
v-viewer基于vue的v-viewer图像查看器组件,基于reader.js的实时演示。指令示例缩略图示例v-viewer用于vue的v-viewer图像查看器组件,支持旋转,缩放,缩放等在viewer.js上的实时演示示例指令组件缩略图和源代码查看...
vue-hot-reload-api 注意: vue-hot-reload-api@2.x仅适用于vue@2.x Vue组件的热重装API。 这就是和在引擎盖下使用的东西。用法仅当您基于Vue组件编写一些构建工具链时,才使用此功能。 对于正常的应用程序使用,只...
1. 项目描述 此项目为一个基于Vue的前后端分离的在线考试系统项目 使用了 Vue 全家桶+ES5...学会使用 基于Vue的插件, 如vue-seamless-scroll实现无缝滚动,v-viewer实现图片预览,ly-tab实现触摸滑动并具有回弹效果等
首先先安装依赖: npm install v-viewer --...Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': tr
4. 学会使用 基于Vue的插件, 如vue-seamless-scroll实现无缝滚动,v-viewer实现图片预览,ly-tab实现触摸滑动并具有回弹效果等 5. 学会使用 mint-ui、muse-ui和element-ui 组件库构建界面 6. 学会使用 mockjs 模拟...
主要的工作是webpack对TS,TSX的处理,以及2.x版本下面使用class的形式书写Vue 组件的一些限制和注意事项。 Webpack 配置 配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx。 module....
PDF.JS端到端搜索/代码段/突出显示这是从利用Solr的有效载荷组件的示范项目和偏移突出显示器组件从 ,以及 ,使PDF文档可搜索,并突出显示与PDF上下文中的... 发展 Vue组件cd进入pdf-viewer目录。 发展 npm installnpm