在实际开发中我们常常需要实现点击一个图片，然后让这张图片放大，这里封装了一个组件，具体可以看代码实现！
1.img-preview.vue组件
<template>
<div class="preview" @click="onClick" @keydown="onKeydown">
<div class="preview-img" >
<img :src="src" alt />
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
src: {
type: String,
default: "",
required: true
},
onClick: { type: Function, default: () => {}, required: true },
onKeydown: { type: Function, default: () => {}, required: true }
}
};
</script>
<style lang="less" scoped>
.preview {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
overflow: scroll;
cursor: pointer;
display: flex;
align-items: center;
}
.preview-img {
padding: 20px;
display: inline-block;
margin: auto;
img {
max-width: 100%;
max-height: 100%;
}
}
</style>
2.在其他页面中引用
<template>
<div>
<div>
<img :src="scope.row.content" height="200" @click="previewImage(scope.row.content)"/>
</div>
<div v-if="preview">
<img-preview :src="src" :onClick="closeImgPreview" :onKeydown="keydownCloseImgPreview"></img-preview>
</div>
</div>
</template>
<script>
import imgPreview from "@component/common/img-preview";
export default {
data() {
return {
preview: false,
src:""
};
},
components: {
"img-preview": imgPreview
},
methods: {
previewImage(src) {
this.preview = true;
this.src = src;
},
keydownCloseImgPreview(e) {
if (e && e.keyCode == 27) {
this.preview = false;
}
},
closeImgPreview() {
this.preview = false;
}
}
};
</script>
<style lang="less">
</style>
