VUE框架Vue3组件传送实现模态窗口切换------VUE框架
原创
©著作权归作者所有：来自51CTO博客作者旧约Alatus的原创作品，请联系作者获取转载授权，否则将追究法律责任
<template>
<div class="s1">
<h1>我是App组件</h1>
<YeYe></YeYe>
</div>
</template>
<script>
import YeYe from "./components/YeYe.vue";
export default {
name : "App",
components : {YeYe}
}
</script>
<style lang="css" scoped>
.s1{
width : 500px;
height : 500px;
background-color: aquamarine;
}
</style>
<template>
<div class="s2">
<h1>我是爷爷组件</h1>
<SunZi></SunZi>
</div>
</template>
<script>
import SunZi from "./ErZi.vue";
export default {
name : "YeYe",
components : {SunZi}
}
</script>
<style lang="css" scoped>
.s2{
width : 400px;
height : 400px;
background-color: bisque;
}
</style>
<template>
<div class="s3">
<h1>我是儿子组件</h1>
<SunZi></SunZi>
</div>
</template>
<script>
import SunZi from "./SunZi.vue"
export default {
name : "ErZi",
components : {SunZi}
}
</script>
<style lang="css" scoped>
.s3{
width : 300px;
height : 300px;
background-color: chartreuse;
}
</style>
<template>
<div class="s4">
<h1>我是孙子组件</h1>
<button @click="isShow = true">弹窗</button>
<!-- 瞬移 -->
<Teleport to="body">
<!-- 遮罩层,整个遮罩层需要瞬移到body下 -->
<div v-show="isShow" class="cover">
<!-- 这是一个模态窗口 -->
<div class="s">
我是一个窗口
<button @click="isShow = false">关闭窗口</button>
</div>
</div>
</Teleport>
</div>
</template>
<script>
import {ref} from "vue";
export default {
name : "SunZi",
setup(){
let isShow = ref(false);
return {isShow};
}
}
</script>
<style lang="css" scoped>
.s4{
width : 200px;
height : 200px;
background-color: darkmagenta;
}
.s{
width: 250px;
height: 250px;
background-color: cadetblue;
}
.cover{
position: absolute;
top : 0;bottom: 0;left: 0;right: 0;
background-color: darkgrey;
opacity: 90%;
}
</style>
