标签:遮罩 const Teleport app 50% 通俗易懂 VUE3 show
1. 概述
老话说的好:宰相肚里能撑船,但凡成功的人,都有一种博大的胸怀。
言归正传,今天我们来聊聊 VUE 中 Teleport 的使用。
2. Teleport
2.1 遮罩效果的实现
<style> .area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 300px; background: rgb(16, 209, 48); } .mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: 50%; } </style>
<body> <div id="myDiv"></div> </body>
const app = Vue.createApp({ data() { return { show : false } }, methods: { handleClick(){ this.show = !this.show; } }, template:` <div class="area"> <button @click="handleClick">按钮</button> <div class="mask" v-show="show"></div> </div> ` });
const vm = app.mount("#myDiv");
这个例子,我们实现了一个简单的遮罩效果,但这个遮罩效果并没有遮罩整个背景,只是遮罩了 area 这个div。
2.2 Teleport 的使用
const app = Vue.createApp({ data() { return { show : false } }, methods: { handleClick(){ this.show = !this.show; } }, template:` <div class="area"> <button @click="handleClick">按钮</button> <teleport to="body" > <div class="mask" v-show="show"></div> </teleport> </div> ` });
这个例子中,我们改进了一下,使用 <teleport to="body" > 将遮罩的 div 转移到了 body 元素下,因此遮罩范围扩大到了整个 body 的区域。
2.3 Teleport 通过 元素id 转移元素到指定元素下
<body> <div id="myDiv"></div> <div id="maskDiv"></div> </body>
const app = Vue.createApp({ data() { return { show : false } }, methods: { handleClick(){ this.show = !this.show; } }, template:` <div class="area"> <button @click="handleClick">按钮</button> <teleport to="#maskDiv" > <div class="mask" v-show="show"></div> </teleport> </div> ` });
这个例子中,通过 <teleport to="#maskDiv" > 的写法,将 遮罩div 转移到了 id 是 maskDiv 的元素下。
3. 综述
今天聊了一下 VUE 中 Teleport 的使用,希望可以对大家的工作有所帮助,下一节我们继续讲 Vue 中的高级语法,敬请期待
欢迎帮忙点赞、评论、转发、加关注 :)
关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。
4. 个人公众号
追风人聊Java,欢迎大家关注
标签:遮罩,const,Teleport,app,50%,通俗易懂,VUE3,show 来源: https://www.cnblogs.com/w84422/p/16246032.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。