vue 轮播图点击放大 vue+carousel+v-viewer

浪漫的程序猿

于 2020-11-06 16:12:35 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 与框架类

本文链接：https://blog.youkuaiyun.com/oXiangZuoZuo12345/article/details/109533867

js 与框架类专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何安装和配置V-Viewer插件实现图片预览功能。具体步骤包括：使用npm安装依赖包；在main.js中引入并设置默认选项；在HTML中使用Viewer组件展示轮播图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、html

 <el-carousel indicator-position="none">
                <el-carousel-item v-for="(item,index) in list"
                                  :key="index">
                  <viewer :images="list">
                    <img :src="item" class="hotel_info_image">
                  </viewer>
                </el-carousel-item>
  </el-carousel>

参数