脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue图片预览

Vue使用v-viewer实现图片预览

 更新时间：2020年10月21日 12:01:33   作者：Wang_kaiya  
这篇文章主要为大家详细介绍了Vue使用v-viewer实现图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue使用v-viewer实现图片预览的具体代码，供大家参考，具体内容如下

1.安装依赖

npm install v-viewer --save

2.在main.js中引入

import Viewer from 'v-viewer' //图片查看插件
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
 Options: { 'inline': true,
 'button': true, 
 'navbar': true,
 'title': true, 
 'toolbar': true, 
 'tooltip': true,
 'movable': true,
 'zoomable': true, 
 'rotatable': true,
 'scalable': true,
 'transition': true,
 'fullscreen': true,
 'keyboard': true,
 'url': 'data-source' }
 })

3.在组件中引用

<van-swipe :autoplay="3000">
 <van-swipe-item v-for="(image, index) in moodsImg" :key="index">
 <viewer :images = "moodsImg" >
 <img :src="image"/>
 </viewer>
 </van-swipe-item>
</van-swipe>

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解vue大文件视频切片上传的处理方法

    详解vue大文件视频切片上传的处理方法

    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下
    2023-08-08
  • vue @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue3 onMounted异步函数同步请求async/await实现

    vue3 onMounted异步函数同步请求async/await实现

    这篇文章主要为大家介绍了vue3 onMounted初始化数据异步函数/同步请求async/await实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Vue中Mustache插值语法与v-bind指令详解

    Vue中Mustache插值语法与v-bind指令详解

    在Vue中通过Mustache语法（双大括号）将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache插值语法与v-bind指令的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue-admin-element项目突然就起不来了的解决

    vue-admin-element项目突然就起不来了的解决

    这篇文章主要介绍了vue-admin-element项目突然就起不来了的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • axios+vue请求时携带cookie的方法实例

    axios+vue请求时携带cookie的方法实例

    做项目时遇到一个需求,后端需要在接口请求时,对用户登陆状态进行判断,需要在请求时携带Cookie,下面这篇文章主要给大家介绍了关于axios+vue请求时携带cookie的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue大屏自适应的实现方法(cv就能用)

    vue大屏自适应的实现方法(cv就能用)

    最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue大屏自适应的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue实现弹窗拖拽效果

    vue实现弹窗拖拽效果

    这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • vue之如何实现打印功能

    vue之如何实现打印功能

    这篇文章主要介绍了vue之如何实现打印功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Element中el-tabs左右滑动动画的实现

    Element中el-tabs左右滑动动画的实现

    本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03

最新评论