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

最新推荐文章于 2024-08-09 07:05:15 发布

前端一只小小白

最新推荐文章于 2024-08-09 07:05:15 发布

阅读量1.2k

点赞数 1

分类专栏： Vue插件文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/csdndyf/article/details/104006118

版权

Vue插件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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>