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;
    },
}
相关推荐
前端极客探险家2 小时前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
可爱的秋秋啊8 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
宝拉不想努力了13 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
有什么东东18 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络719 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
Dnn011 天前
修改el-select背景颜色
css·elementui·vue3
Aotman_2 天前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6
脑瓜嗡3 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙3 天前
buildadmin 自定义单元格渲染
vue·php
serve the people3 天前
vue中将elementUI和echarts转成pdf文件
vue.js·elementui·echarts