Element-UI中el-image中的预览功能没有单独提供api。又想使用功能。
方法一:此方法就是直接导入。node_modules
中的element-ui
中的image-viewer
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
因为包含es6 语法,所以ie部分可能无法兼容。
方法二 直接把image-viewer
源码等相关文件copy
出来
此法过于繁琐,因为牵涉到的方法还蛮多
方法三: 依然使用el-image
。只不过不传src
,然后使用slot error
来自定义需要显示的布局。
从el-image
源码可以看到,点击img
触发下方方法进行预览
clickHandler() {
// don't show viewer when preview is false
if (!this.preview) {
return;
}
// prevent body scroll
prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
this.showViewer = true;
},
所以只需要在你需要使用功能的地方传入preview-src-list
数据手动且调用$refs.xx.clickHandler()
即可。
注意:可以看到只有preview
不为空时,才会触发预览,所以尽量将$refs.xx.clickHandler()
放到$nextTick
内
computed: {
preview() {
const { previewSrcList } = this;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
}
}
千里之行
始于足下