elementUI previewSrcList 调用图片展示组件 - 小五五五 - 博客园

安宇雨 - 随手采集
2020-02-24 14:36:30
随手采集
0000-未整理-等待研究

官方给的示例需要用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>

; "复制代码")

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>

; "复制代码")

需要给 image-viewer 传递

urlList ，

onClose

Original url: Access
Created at: 2020-02-24 14:36:26
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论