手机定制网站,html5可视化编辑器,网站开发人员没有按照设计开发,自己做的网页可以上传网站吗需求#xff1a;我们在使用element-plus组件里面的图片预览时候#xff0c;通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来#xff0c;导致当前的页面停止加载了。
具体思路如下#xff1a;
我们需要添加:preview-teleported“t…需求我们在使用element-plus组件里面的图片预览时候通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来导致当前的页面停止加载了。
具体思路如下
我们需要添加:preview-teleported“true” 和 z-index“9999” 两个属性进行控制。 1preview-teleported设置为true主要是用来把image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true。
2z-index“9999” 是当图片预览过程中点开图片给他最大的权重可以让他能够预览看到效果。 3v-if“state.imgViewerVisible” 这里主要是用来当点击对应按钮进行预览的操作设置true就是图片可以预览出来
代码如下
el-image-viewerstylewidth: 100px; height: 100pxv-ifstate.imgViewerVisible:preview-teleportedtrue:z-index9999closecloseImgViewer:url-liststate.srcList/el-image-viewer
