子组件
<style>
</style>
<template>
<div>
<transition name="slide-fade">
<div class="side-content">
<div class="close" @click="close">取消</div>
<slot name="main"></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
todos: false,
};
},
created() {
},
mounted() {
},
methods: {
close() {
this.$emit('childEvent',this.todos);
}
}
};
</script>
父组件
<template>
<div>
<el-button @click="open">打开</el-button>
<transition name="popup">
<Demo @childEvent="parentMethod" v-show="side" class="pop-up" @touchmove.stop.prevent>
<template slot="main">
<h1>页面标题</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<input type="text">
</template>
</Demo>
</transition>
</div>
</template>
<style>
/* /抽屉 */
.pop-up{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;
z-index: 502;
background: rgba(0, 0, 0, 0.5);
}
.popup-enter-to,
.popup-leave-to {
transition: transform 0.3s;
transform: translate(0px, 0px);
}
.popup-enter,
.popup-leave-to {
opacity: 0;
-webkit-transform: translate(0px, 100%);
transform: translate(0px, 100%);
-webkit-transition: opacity 0.3s ease-in-out 0.3s,
-webkit-transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out;
}
/* end */
.side-content {
z-index: 503;
position: fixed;
background: #ffffff;
top: 200px;
left: 10px;
bottom: 100px;
right: 10px;
-webkit-overflow-scrolling: touch;
}
.close {
padding: 17px;
text-align: left;
color: rgba(0, 122, 255, 1);
}
</style>
<script>
import API from "@/js/API.js";
import Demo from "./Demo";
export default {
data() {
return {
side: false, //抽屉
};
},
components: {
Demo
},
created() {},
methods: {
parentMethod(data) {
this.side = false;
console.log(data);
},
open() {
this.side = true;
}
}
};
</script>
