vue点击按钮弹窗显示图片

需求是根据当前表格的行数据来获取对应的图片。然后我的行数据里已经有了id值，图片的名称也是id值。所以先通过按钮点击获取对应行的数据。这是写在表格里的按钮。

<template slot-scope="scope"><!-- scope.row可以拿到对应行的数据 --><el-buttontype="primary" icon="el-icon-search"@click="dialogVisible = true"@click.native.prevent="getrows(scope.row)">查看</el-button>
</template>

然后写弹窗，注意el-dialog不能写在template里面，不然会根据数据生成多个弹窗，一旦图片较长的时候，通过滑动条查看图片的时候会显示低层的弹窗，就会出现多出来的部分。

这里我的src是自己图片的位置，图片按照1,2,3这样子的顺序来命名

<el-dialogtitle="帧图":visible.sync="dialogVisible":modal="false"append-to-body:width="dialogWidth"> <!-- :modal="false"去掉遮蔽层 --><!-- :width绑定宽度，来适应图片的宽度 --><!-- 通过load事件来获取图片宽度，使得容器宽度适应图片 --><!-- src里注意require里面用模板字符串 --><el-image :src="require(`../../assets/${index}.jpg`)" @load="onLoadImg" :width="boxWidth"></el-image><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>

然后在data里加入数据，这里仅展示有关数据，我的表格数据里是包含id值的。

export default {data(){return{index:1,    //默认设为1，因为我的图片没有0.jpg，所以如果设置为0为报错dialogWidth: "",    //弹窗宽度，可根据图片宽度进行改变boxWidth: "",    //图片宽度//其他数据里包含id值，这个可以自己根据数据来调整}},methods:{// 通过图片宽度来改变容器宽度，做到自适应，但是有待改善的地方。如果图片大小不一样.//不刷新页面的情况下，点击了宽度较小的图片后再点击宽度较大的图片，宽度会按照小的图片的宽度来显示。onLoadImg: function (e) {var img = e.target;var width = 0;if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {width = img.width;}// if ((img.height > img.width) &&  width > 370) {//     width = 370// } else if (width > 600) {//     width = 600// }this.boxWidth= width + 'px';this.dialogWidth = width + 40 + 'px';},//获取id值，并且将其赋值给index，从而获取对应的图片名字getrows(row){console.log(row.id)this.index=row.id}，}
}

表格里左边显示图片帧号，帧号即id值，右边是可以点击显示帧图

点击查看，横向的图片显示

竖线的图片显示

由于高度是自适应的，所以有些图片可能较长超出页面，需要拖动。

小图片显示：

vue点击按钮弹窗显示图片相关推荐

vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
Vue点击按钮下载对应图片
最近有用到点击某个按钮自动下载对应图片,可是对于浏览器不同的问题,会有'个别'浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...
vue点击按钮上传图片_vue图片上传
前端代码: style="height: 200px;" class="upload-demo" ref="uploadVideoCoverDemo& ...
android点击按钮弹出图片,用android做的一个简单的点击按钮显示图片的程序
其实,在这之前我已经做了一个点击按钮的小程序,只不过它只是用来在界面上显示一些文字或者是用一个对话框来显示内容.按理说,做显示图片应该是不会有太大的问题了,可是问题还是来了.在我把这些个问题解决之后, ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
elementui el-image组件点击按钮预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
华为手表开发：WATCH 3 Pro（5）点击按钮弹窗
华为手表开发:WATCH 3 Pro(5)点击按钮弹窗初环境与设备创建项目认识目录结构修改首页 -> 新建按钮 " 按钮 " 文件名:**index.hml** 引 ...
[QT]实现点击按钮弹出图片的效果
点击按钮弹出图片的实现 void MainWindow::btnTest() {QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::Window ...
vue点击按钮显示弹窗写法
案例1 源码如下 <template><div class="box" v-cloak><div><div class="mas ...

vue点击按钮弹窗显示图片

vue点击按钮弹窗显示图片相关推荐

最新文章

热门文章