提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue3--学习技术胖笔记----第五波 瞬间移动组件 Teleport

Vue3技术组件笔记学习 -- 移动 ----
2023-09-27 14:25:19 时间

Model.vue (独立出来的组件)

在不增加<teleport to="#modal">时，他会和引用的组件所在展示模块下

<template>
<teleport to="#modal">
<div id="center">
    <H2>JSPang.com</H2>
</div>
</teleport>
</template>

<script lang="ts">
export default{

}
</script>

<style >
#center {
  width: 200px;
  position: fixed;
  left:50%;
  top:50%;
  text-align:center;
}
</style>

 

App.vue  去引用Model.vue的组件 来使用

<template>
  <div>
  <h2>欢迎光临红浪漫洗浴中心</h2>
  <modal />

  </div>
</template>
 
<script lang="ts">
import modal from "./hoots/Modal.vue"

export default({
  name:"APP",
  components:{modal},

  setup(){
    return{
      
  }
  },

  });
</script>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
</head>

<body>
  <div id="app"></div>
  <div id="modal"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

相关文章