element-ui点击文字查看图片预览功能

今天做一个点击文字查看图片的功能,大体页面长这样子,点击查看显示对应的图片

引入el-image-viewer,点击的文字时候设置图片预览组件显示并传入图片的地址

关键代码

html 复制代码
<el-link v-if="scope.row.fileList.length > 0" type="primary" @click="handleClickImage(scope.row)" :underline="false">查看</el-link>

<el-image-viewer v-if="imageShow" :on-close="() => { imageShow = false; }" :url-list="imageList" />
javascript 复制代码
 components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
 },
 data() {
    return {
      imageShow: false,
      imageList: []
    };
 },
 methods: {
    handleClickImage(e) {
      this.imageShow = true
      let urls = e.fileList.map(obj => obj.url);
      this.imageList = urls;
    },
}
相关推荐
我在北京coding4 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
一笑code10 小时前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
咔咔一顿操作21 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
梁辰兴1 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码2 天前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
布兰妮甜2 天前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
鱼 空2 天前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
ruanhongbiao2 天前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
普宁彭于晏2 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue