63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<div class="door-content animate__animated" :class="style" ref="door-content">
|
|
<div class="door-img-box" @click="clickHandler">
|
|
<img :src="require('@/assets/img/door.png')" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "door",
|
|
props: {
|
|
// status: {
|
|
// type: Boolean,
|
|
// default: true
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
status: true
|
|
};
|
|
},
|
|
computed: {
|
|
style() {
|
|
return this.status ? "animate__zoomIn" : "animate__fadeOut";
|
|
}
|
|
},
|
|
methods: {
|
|
clickHandler() {
|
|
this.$refs["door-content"].addEventListener(
|
|
"animationend",
|
|
this.doorHiddenFun
|
|
);
|
|
this.status = false;
|
|
},
|
|
doorHiddenFun() {
|
|
this.$eventBus.$emit("door-hidden");
|
|
this.$refs["door-content"].removeEventListener(
|
|
"animationend",
|
|
this.doorHiddenFun
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.door-content {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.door-img-box {
|
|
width: 500px;
|
|
height: 800px;
|
|
& > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|