阎良做网站,西安做网站的公司在哪,网站建设如何接单,制作外贸网站开发时隔一年#xff0c;我又回来了 ~ 最近在做后台#xff0c;遇到一个需求#xff0c;就是点击“查看详情”按钮#xff0c;调起elementUI的大图预览功能#xff0c;预览多张图片#xff0c;如下图#xff1a; 首先想到的是使用element-ui的el-image组件#xff0c;但它是…时隔一年我又回来了 ~ 最近在做后台遇到一个需求就是点击“查看详情”按钮调起elementUI的大图预览功能预览多张图片如下图 首先想到的是使用element-ui的el-image组件但它是通过点击图片来实现的不太符合我们的需求如果有这方面的需求可以去官网看一下element大图预览官网实例 下面来说如何解决点击按钮预览多张图片(我写的项目最多就预览两张图片) 使用el-image-viewer(图片查看器)
html中代码
el-image-viewer v-ifshowViewer :on-closecloseViewer :url-list[url] /
el-button typetext clickonPreview(img)查看详情/el-button // 两张这样写 el-image-viewer v-ifshowViewer :on-closecloseViewer :url-list[url1,url2] / js代码
script
import ElImageViewer from element-ui/packages/image/src/image-viewer;// 导入组件
export default {components: {ElImageViewer},data() {return {url: https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg,showViewer: false, // 显示查看器}},methods(){// 点击按钮预览图片onPreview(img) {this.url img;this.showViewer true},// 关闭查看器closeViewer() {this.showViewer false},}
}
/script 看一下效果叭亲亲们~ 就是这样子啦完成啦 有问题留言但我可能不太会哈哈哈哈哈又是忙碌的一天坐等下班~
