Vue3 使用teleport内置组件 封装提示栏组件并实现函数化调用

目录

一；Teleport 内置组件

二；提示栏组件要实现的功能：

三；设计 Message 组件 实现基本的样式与功能

四；封装 创建 body 元素的子标签结点的函数 useDOMCreate，将 teleport 标签中的内容放入到创建的这个结点，让HTML标签结构更加合理。

五：函数化调用该提示栏

六：使用提示栏组件以及合适会被触发

---

一；Teleport 内置组件

官方定义：

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。

使用场景：

我们在A组件中使用B组件时，B组件中的 DOM 结构会被渲染到 A 组件中书写 B 组件的对应位置，但是有时候我们不希望它显示在该位置，而是显示到Vue app之外的其他位置： 比如移动到body元素上，或者我们有其他的div#app之外的元素上；

个人理解：

1.标签内 to 属性 指定 写在 teleport 标签中的内容被放入到指定的标签结构当中。

2.to 属性接收一个字符串，内容是选中该某一 html 的 css 选择器属性 比如 .class 类属性 #id id属性，也可以是 html 标签元素，如 body。

3.teleport 标签中的内容会被放入该 css 选择属性所在的标签当中。为了使得 html 结构更加合理。

二；提示栏组件要实现的功能：

自定义提示栏提示状态（成功，失败，默认）；自定义提示栏中的内容；自定义多久后消失；允许手动关闭提示栏；

注：想要实现自定义，其实就是父组件在使用该子组件的时候动态的向子组件传递对应 prop 内容，子组件通过 props 接收并使用，所以要预先设计好要接收哪些 props 的内容。

因为要自定义实现提示栏类型和提示内容，所以该 Message 组件接收俩个prop属性，一个是 type用于设置提示栏类型，一个是 message 用于展示提示栏的提示内容。

三；设计 Message 组件 实现基本的样式与功能

模板和样式使用的 bootstrap 不做讲解

<template>
  <teleport to="#message">
    <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
      :class="classObject" v-if="isVisible"