elementUI previewSrcList 调用图片展示组件

最新推荐文章于 2026-01-23 11:06:54 发布

转载最新推荐文章于 2026-01-23 11:06:54 发布 · 1.2w 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/junwu/p/11607576.html

当业务需求中需要通过按钮触发图片预览时，可以借助elementUI的image-viewer组件来实现。通常官方示例使用的是el-image，但实际操作中，我们可以直接调用image-viewer，并传入previewSrcList属性来达到目的。

官方给的示例需要用el-image

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

但往往业务中可能是一个button 按钮需要调previewSrcList

解决办法是需要调element组件包中的image-viewer.vue

<el-image-viewer
           v-if="showViewer"
           :on-close="closeViewer"
           :url-list="srcList" />


      <el-button @click="onPreview" type="primary">查看图片</el-button>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import HomeHeader from '../header/Header'
import FooterView from '../footer/FooterView'
import Condition from './components/Condition'
import Tumor from './components/Tumor'
import { getTumorSearchData } from '@/axios/api.js'
import { Message } from 'element-ui';
export default {
  name:'TumorSearch',
  components:{
    HomeHeader,
    FooterView,
    Condition,
    Tumor,
    ElImageViewer
  },
  data(){
    return{
      showViewer: false,
      firstTumors:[],
      tumor:'tumor',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  methods:{
    onPreview() {
     this.showViewer = true
    },
    closeViewer() {
     this.showViewer = false
    },
    loadimg(){
      console.log(1);
    },
    async getTumor(){
      try{
        const res = await getTumorSearchData();
        const data = res.data;
        if(data.error_code == 0){
          this.firstTumors = data.reason.tumors1;
        }

      }catch(err){
        console.log(err)
      }

    }
  },
  mounted(){
    this.getTumor();
  }
}
</script>