vue3.js
    teleport 是vue3新增的一个功能, 叫传送器,
    作用: 把组件模板内的元素渲染到组件模板外部
    特点: 传送的是dom元素不是数据, 通过修改DOM元素位置实现

    1.     <style>
    2.         .alert{
    3.             width: 100vw; height: 100vh;
    4.             background-color: #000b;
    5.             position: absolute;
    6.             top: 0; left: 0;
    7.             display: flex;
    8.             justify-content: center;
    9.             align-items: center;
    10.             z-index: 10000;
    11.         }
    12.         .alert h1{
    13.             background-color: white;
    14.             width: 50vw; height: 50vh;
    15.             line-height: 100px;
    16.         }
    17.         #myApp{
    18.             position: relative;
    19.             z-index: 1;
    20.         }
    21.         #mydom{
    22.             position: relative;
    23.             z-index: 2;
    24.         }
    25.         /* 此时, 上边设置的样式结果: alert自定义弹窗无法覆盖mydom */
    26.     </style>
    27. <body>
    28.     <script src='./vue3.js'></script>
    29.     <div id='myApp'>
    30.         <button @click="count=!count">{{count}}</button>
    31.         <teleport to='#outer'>
    32.             <h1 v-show="count">这是一个警告框</h1>
    33.         </teleport>
    34.         <!-- 一个模板中可以有多个传送器 -->
    35.         <teleport to='body'>
    36.             <div v-show="count" class="alert">
    37.                 <h1>这是一个警告框</h1>
    38.             </div>
    39.         </teleport>
    40.     </div>
    41.     <h1 id="mydom"><hr><button> 这是组件模板外部的DOM结构 </button><hr></h1>
    42.     <div id="outer"></div>
    44.     <script>
    45.         var vm = {
    46.             setup() {
    47.                 const count = Vue.ref(false)
    48.                 return{
    49.                     count
    50.                 }
    51.             }
    52.         }
    53.         Vue.createApp(vm).mount('#myApp')
    54.     </script>
    55. </body>