vue3.js

    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 是vue3新增的一个功能, 叫传送器, 
    32.             作用: 把组件模板内的元素渲染到组件模板外部  
    33.             特点: 传送的是dom元素不是数据, 通过修改DOM元素位置实现
    34.         -->
    35.         <teleport to='#outer'>
    36.             <h1 v-show="count">这是一个警告框</h1>
    37.         </teleport>
    38.         <!-- 传送器可以把组件传送到模板外部, 但仅在外部渲染, 实际功能依然保留vue组件功能(可以调用组件API) -->
    39.         <teleport to='body'>
    40.             <my-alert v-show="count" @off="close"></my-alert>
    41.         </teleport>
    42.     </div>
    43.     <h1 id="mydom"><hr><button> 这是组件模板外部的DOM结构 </button><hr></h1>
    44.     <div id="outer"></div>
    46.     <template id="com">
    47.         <div class="alert">
    48.             <h1 >这是一个警告框</h1>
    49.             <button @click="close">关闭</button>
    50.         </div>
    51.     </template>
    52.     <script>
    53.         var myAlert = {
    54.             template: "#com",
    55.             emits: ['off'],
    56.             setup(props, {emit}){
    57.                 return {
    58.                     close: ()=>{
    59.                         emit("off", false)
    60.                     }
    61.                 }
    62.             }
    63.         }
    64.         var vm = {
    65.             components: {myAlert},
    66.             setup() {
    67.                 const count = Vue.ref(false)
    68.                 return{
    69.                     count,
    70.                     close: data=>{
    71.                         count.value = data
    72.                     }
    73.                 }
    74.             }
    75.         }
    76.         Vue.createApp(vm).mount('#myApp')
    77.     </script>
    78. </body>