Vue中使用v-view实现大图预览

Vue大图预览组件v-view使用教程

最新推荐文章于 2025-11-24 01:35:24 发布

原创最新推荐文章于 2025-11-24 01:35:24 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue插件专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在Vue项目中使用v-view组件实现图片预览功能，包括安装依赖、配置默认选项及在表格中以组件形式展示图片预览的方法。

Vue中使用v-view实现大图预览

中文文档

v-view中文文档

安装依赖包

npm install v-viewer

main.js中引入模块

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
// 配置viewer默认配置
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

以组件形式使用

		<el-table-column label='图片'
                           width='80px'
                           align='center'>
            <template slot-scope="scope">
              <viewer :images="[scope.row.picture.split(',')[0]]"
                      v-if="scope.row.picture">
                <img v-for="(src,index) in [scope.row.picture.split(',')[0]]"
                     :src="src"
                     :key="index"
                     style="display:block;width:40px;height:40px;margin:0 auto;"
                     width="300">
              </viewer>
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>