vue3之teleport(传送门)的使用
所谓传送门就是把向要传送的东西放在指定的位置(比如样式),通过传送门就可以,传给其他元素拉!<!DOCTYPE html><html><head><meta charset="utf-8"><title>传送门</title><style type="text/css">#app{width: 200px;heig
·
所谓传送门就是把向要传送的东西放在指定的位置(比如样式),通过传送门就可以,传给其他元素拉!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>传送门</title>
<style type="text/css">
#app{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
#box{
position: relative;
width: 200px;
height: 200px;
background-color: #FF0000;
}
#mask{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.5;
background-color: #000;
}
#mytel{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 成功为这个元素添加蒙板 -->
<div id="mytel">
</div>
<div id="app">
<button type="button" @click="myMask">添加蒙板</button>
<!-- 小叮当的传送门 ,to代表传到哪里 -->
<teleport to="#mytel">
<div v-show="flag" id="mask" >
aaa
</div>
</teleport>
</div>
</body>
<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=Vue.createApp({
data(){
return{msg:'xxx',flag:false}
},
methods:{
myMask(){
this.flag=!this.flag;
}
}
});
app.mount("#app");
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)