前端研究 订阅所有【前端研究】的日志

vue2实现Teleport，用来做跨组件DOM挂载

作者:admin 日期:2022-04-20
字体大小: 小 中 大

 父组件调用：（to="#app"的意思是把#divPopup挂载到#app节点上）

Javascript代码
  1. <Teleport to="#app">  
  2.         <div id="divPopup" style="z-index:20000;" v-show="dialogVisible">  
  3.           <el-button @click="clickH1">yes</el-button>  
  4.           <el-button @click="clickH2">no</el-button>  
  5.         </div>  
  6. </Teleport>  

子组件：

Javascript代码
  1. <script>  
  2.     export default {  
  3.         name: 'teleport',  
  4.         props: {  
  5.             /* 移动至哪个标签内，最好使用id */  
  6.             to: {  
  7.                 type: String,  
  8.                 required: true  
  9.             }  
  10.         },  
  11.   
  12.         mounted() {  
  13.             document.querySelector(this.to).appendChild(this.$el)  
  14.         },  
  15.   
  16.         destroyed() {  
  17.             document.querySelector(this.to).removeChild(this.$el)  
  18.         },  
  19.   
  20.         render() {  
  21.             return <div>{this.$scopedSlots.default()}</div>  
  22.         }  
  23.     }  
  24. </script>  

 



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3621
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭