Element-UI in el-image The preview function in is not provided separately api. I want to use the function again .
Method 1 ： This method is direct import .node_modules In element-ui In image-viewer
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
Because it contains es6 grammar , therefore ie Some may not be compatible .
Method 2 Directly image-viewer Source code and other related documents copy come out
This method is too cumbersome , Because there are many methods involved
Method 3 ： Still using el-image. Just don't pass it on src, Then use slot error Customize the layout to be displayed .
from el-image The source code can be seen , click img Trigger the method below to preview
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; },
So just pass in where you need to use the function preview-src-list Data manual and call $refs.xx.clickHandler() that will do .
be careful ： You can see that only preview When not empty , Will trigger the preview , So try to $refs.xx.clickHandler() put to $nextTick within
computed: { preview() { const { previewSrcList } = this; return Array.isArray(
previewSrcList) && previewSrcList.length > 0; } }
A journey of a thousand miles
Start with one step
Technology