Teleport
简介
teleport,字面意思就是远距离传送,我们可以把它理解为传送门的意思。通过id联系
利用teleport 实现一个模态框操作
- /public/index.html 设置一个锚点,来放置组件的内容
<div id="app"></div>
<!-- 先行定义一个锚点 -->
<div id="wxj_modal"></div>
- 创建一个模态框组件Modal
<template>
<teleport to="#wxj_modal">
<div id="wxj_modal_cover" v-if="isOpen">
<h2>{{ title }}</h2>
<div class="content">
<slot>默认展示内容</slot>
</div>
<button class="btn2" @click="buttonClick">Close</button>
</div>
</teleport>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
isOpen: Boolean,
title: {
type: String,
default: "提示",
},
},
emits: {
"close-modal": null,
},
setup(props, context) {
const buttonClick = () => {
context.emit("close-modal");
};
return {
buttonClick,
};
},
});
</script>
<style scoped lang="scss">
#wxj_modal_cover {
padding:20px 5px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px #666;
width: 300px;
border: 2px solid rgb(105, 165, 56);
display:flex;
flex-direction: column;
justify-content:space-between
}
h2{
text-align: center;
}
.content{
margin: 20px 0;
text-indent: 2em;
}
.btn2 {
margin: 0 auto;
width:120px;
background: #1971c9;
border: none;
padding: 8px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
</style>
- 在任意组件调用该组件
<template>
<button class="btn1" @click="openModal">打开模态框</button>
<modal :isOpen="modalIsOpen" title="我是标题" @close-modal="onModalClose"> 我是传递的内容 </modal>
</template>
<script>
import { ref, defineComponent } from "vue";
import Modal from "../../../components/common/Modal/index.vue";
export default defineComponent({
name: "App",
components: {
Modal,
},
setup() {
//添加响应式对象控制是否显示
const modalIsOpen = ref(false);
//打开模态框事件
const openModal = () => {
modalIsOpen.value = true;
};
//关闭模态框事件
const onModalClose = () => {
modalIsOpen.value = false;
};
return {
modalIsOpen,
openModal,
onModalClose,
};
},
});
</script>
<style>
h2{
font-weight:500;
font-size:24px;
}
.btn1 {
background: #1971c9;
border: none;
padding: 16px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
</style>
suspense
案例
在异步组件使用
<template>
<div class="demo">
<h1>h1</h1>
<Suspense>
<template v-slot:default>
<Com />
</template>
<template v-slot:fallback>
<h2>
loading
</h2>
</template>
</Suspense>
</div>
</template>
<script>
import { reactive, toRefs, defineAsyncComponent } from "vue";
const Com = defineAsyncComponent(() => import("./Children.vue"));
export default {
name: "demo",
components: {
Com,
},
setup(props) {
const state = reactive({});
return {
...toRefs(state),
};
},
};
</script>
<style lang='scss' scoped>
</style>