Vue——vue3中 teleport 的使用

最新推荐文章于 2024-04-15 16:08:10 发布

dbt@L

最新推荐文章于 2024-04-15 16:08:10 发布

阅读量250

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_43201350/article/details/128580215

版权

my-project\src\components\ModalDig.vue

<template>
    <!-- 
        teleport：传送，瞬间转移 
        解决的问题：Dialog 被包裹在其它组件中，容易被干扰，样式在其它组件中容易变得混乱，解决Dialog组件嵌套比较深的问题
     -->
// to 表示在渲染哪个css dom上去,此处表示为渲染到id为modal上的dom上
    <teleport to="#modal">
        <div id="center">
            <h2>this is modal</h2>
        </div>
    </teleport>
</template>

<script lang="ts">
export default {

}
</script>

<style>
#center {
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
</style>

使用

my-project\src\App.vue

<template>
  <ModalDig />
</template>

<script lang="ts">
    import ModalDig from './components/ModalDig.vue'
export default {
  name: 'App',
  components: {
    ModalDig
  }
}
</script>

my-project\public\index.html

<!DOCTYPE html>
<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>

  <div id="app"></div>
  <div id="modal"></div>

</body>

</html>

效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntiD4HAY-1672990939588)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230106101816110.png)]$