Teleport provides a clean way to control which parent node in the DOM renders HTML without having to resort to global state or split it into two components.

Effect:

Directory:

index.html:

<! DOCTYPEhtml>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="m-dialog"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

Dialog.vue:

<template>
  <div :class="[`m-mask ${visible ? 'active' : ''}`]">
    <div class="m-dialog">
      <div class="m-header">
        <span class="m-header-title">{{title}}</span>
        <span class="m-header-close" @click="handleClose">X</span>
      </div>
      <div class="m-content">
        <slot name="content"></slot>
      </div>
      <div class="m-footer">
        <button class="m-btn" @click="handleOk">determine</button>
        <button class="m-btn" @click="handleClose">cancel</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    visible: {
      type: Boolean
    },
    title: {
      type: String}},emits: ['onClose'.'onOk'].setup(props, context) {

    const handleClose = () = > {
      context.emit('onClose')}const handleOk = () = > {
      context.emit('onOk')}return {
      handleClose,
      handleOk
    }
  }
}
</script>

<style>

</style>
Copy the code

Home.vue:

<template>
  <Teleport to="#m-dialog">
    <Dialog :visible="visible" title="Title" @onClose="handleCloseDialog" @onOk="handleOk">
      <template #content>
        <div class="m-info">
          <span class="m-msg">Hello!</span>
        </div>
      </template>
    </Dialog>
  </Teleport>
  <button @click="handleShowDialog">button</button>
</template>

<script>
import { reactive, toRefs } from "vue";
import Dialog from ".. /components/Dialog";

export default {
  components: {
    Dialog,
  },
  setup() {
    const state = reactive({
      visible: false});const handleShowDialog = () = > {
      state.visible = true
    }

    const handleCloseDialog = () = > {
      state.visible = false
    }

    const handleOk = () = > {
      console.log('ok')
      handleCloseDialog()
    }

    const { visible } = toRefs(state)

    return {
      visible,
      handleShowDialog,
      handleCloseDialog,
      handleOk
    }
  },
};
</script>

<style>
</style>
Copy the code

index.css:

.m-mask{position: absolute;display: none; top: 0;left: 0;right: 0;bottom: 0;background: rgba(0 , 0.0.0.1); }.m-mask.active{display: flex; }.m-dialog{display: flex;flex-direction: column; margin: auto;min-width: 400px;min-height: 100px;background: #fff;border-radius: 5px;box-shadow: 10px 10px 5px # 888; }.m-header{display: flex;line-height: 40px;border-bottom: 1px solid #ddd; }.m-header-title{flex:1;padding: 0 0 0 5px; }.m-header-close{width: 40px;text-align: center;cursor: pointer; }.m-info{display: flex;height: 100px; }.m-msg{margin: auto; }.m-content{flex:1; }.m-footer{ line-height: 40px;border-top: 1px solid #ddd; text-align: right; }.m-btn{margin: 0 5px; }Copy the code