要关闭 el-image-viewer,可以通过以下几种方法实现: 使用el-image 组件的 hide-on-click-modal 属性: 这是最简单且推荐的方法。通过设置 el-image 组件的 hide-on-click-modal 属性为 true,可以实现在预览状态下点击遮罩层关闭 el-image-viewer。示例代码如下: html <el-image style="width: 30px; hei...
initialIndex: 0 //初始显示的图片索引 }; }, methods: { onPreview() { //点击小图预览大图的方法 this.showViewer = true; }, closeImageViewer() { //关闭预览的方法 this.showViewer = false; } } ``` 以上是el-image-viewer的基本用法,可以结合具体的业务需求进行进一步的定制和扩展。©...
// 关闭图片预览 onClose() { this.showViewer = false }, // 切换图片 index为图片下标值 onSwitch(index) { console.log(index) } } } ElImageViewer 组件属性说明 Attributes 参数说明类型可选值默认值 initialIndex 默认显示的第一张预览图(urlList的下标值) Number -- 0 urlList 预览图的地址列表 ...
我们需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。 需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。 1234567891011121314151617181920212223242526272829303132 <template> <el-button @click="onPreview">预览</el-button> ...
这里我们只需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。 需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。 <template><el-button@click="onPreview">预览</el-button><el-image-viewerv-if="showViewer":on-close="closeViewer":url-lis...
这么写的话预览是正常加载的,但是由于之前给html设置了-webkit-app-region: drag;,所以预览遮罩点击关闭功能会失效,关闭按钮也无法点击,只能自定义viewer给其添加-webkit-app-region: no-drag;样式,好让它表现正常。改为: <el-image :src="record.fileUrl" :preview-src-list="[fileUrl]" :hide-on-click-mo...
-- v-loading='loading' --><el-uploadref="pl_upload"class="upload-demo upload"list-type="picture-card":headers="{ Authorization: tok }"action="#":on-success="importData_handleAvatarSuccess":on-preview="handlePreview":on-remove="handleRemove":on-change="handleChange":file-list="fileList"...
我们需要使用到的就只有urlList与onClose两个属性 ,一个用来放图片链接一个用来关闭查看器。 需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。 <template> <el-button @click="onPreview">预览</el-button> <el-image-viewer v-if=...
jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']} },methods: { // 关闭图⽚预览 onClose() { this.showViewer = false },// 切换图⽚ index为图⽚下标值 onSwitch(index) { console.log(index)} } } ElImageViewer 组件属性说明 ...