为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第19天 Vue3 + TS 仿知乎专栏企业级项目

标签:
Vue.js

课程名称2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节7-11 Loader 组件编码第一部分 - 基本实现,7-12 Loader 组件编码第二部分 - 使用 Teleport 进行改造

主讲老师:张轩

课程内容:

封装公共的Loader组件

课程收获:

我们封装loader的公共组件,正常情况下都会在最外层包裹着的。而这次我们封装的没有在最外层,如果不在最外层的话那么后期可能会造成一些影响。这个时候teleport就可以派上用场了,Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景:

有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

场景举例:一个 Button ,点击后呼出模态对话框

这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间

这样就有了一个问题:组件的逻辑位置和DOM位置不在一起

按照以前 Vue2 的做法,一般是使用 position: fixed; 等CSS属性强行把对话框定位到了应用的中间位置,属于没有办法的办法

而vue3则直接使用teleport标签,里面有一个属性to,to就直接指向一个标签,非常的简单方便,这样就没有必要浪费时间写样式了。

https://img4.sycdn.imooc.com/632e9e44000159c916440873.jpg

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消