Element UI’s image component, el-Image, has a large image preview function, which can be enabled with previewSrcList:
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList">
</el-image>
Copy the code
el-image-viewer
The large image preview is a separate component, image-viewer, so we can use it separately:
The props:
props: {
urlList: {
type: Array.default: () = >[]},zIndex: {
type: Number.default: 2000
},
onSwitch: {
type: Function.default: () = >{}},onClose: {
type: Function.default: () = >{}}}Copy the code
I’m just going to focus on urlList and onClose.
Use:
1. Import components and register:
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
Copy the code
components: {
ElImageViewer
}
Copy the code
2, the template:
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="[viewUrl]">
</el-image-viewer>
Copy the code
3, the script:
data() {
return {
showViewer: false.viewUrl: "".// Image preview address
};
},
methods: {
closeViewer() {
this.showViewer = false;
},
goRead() {
// ...
if (['.png'.'.jpg'.'.gif'.'.jpeg'.'.webp'].indexOf(file.format) > -1) {
this.viewUrl = file.downUrl;
this.showViewer = true;
}
// ...}}Copy the code