vue3封装Notification组件的完整步骤记录

目录
  • 创建
  • 插入
  • 移除
    • 在App.vue中使用
  • 总结

跳过新手教程的小白，很多东西都不明白，不过是为了满足一下虚荣心，写代码的成就感

弹窗组件的思路基本一致：向body插入一段HTML。我将从创建、插入、移除这三个方面来说我的做法

先来创建文件吧

|-- packages
    |-- notification
        |-- index.js # 组件的入口
        |-- src
            |-- Notification.vue # 模板
            |-- notification.ts

创建

用到h，render，h是vue3对createVnode()的简写。h()把Notification.vue变成虚拟dom，render()把虚拟dom变成节点。render在渲染时需要一个节点(第二个参数)，创建一个只用来装Notification.vue的容器，我要的只是Notification.vue里面的HTML结构，所以创建了container先将vm变成节点，也就是HTML，这样才能插到body中

import { h, render } from "vue"
import NotificationVue from "./Notification.vue"

let container = document.createElement('div')
let vm = h(NotificationVue)
render(vm, container)

懵逼点：为什么.vue文件在App.vue中能渲染出来，在这里需要先转成虚拟dom再转成节点

插入

通过document.body.appendChild把这个节点内的第一个子元素插入body中，这样就能在页面上显示出来了。

document.body.appendChild(container.firstElementChild)

移除

vue不能直接操作dom，只能操作虚拟dom了，用null覆盖掉原来的内容即可

render(null, container)

没懂vue实现原理也只是把效果做出来而已，网上查阅资料也差不多一个月了才做出来，看来我确实不适合编程

完整代码

// Notification.vue
<template>
  <div class="notification">
    Notification
    <button @click="onClose">x</button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  onClose?: () => void
}

defineProps<Props>()
</script>

有个疑问为什么.vue文件在app中又能直接被渲染出来

// notification.ts
import { h, render } from "vue"
import NotificationVue from "./Notification.vue"
const notification = () => {
  let container = document.createElement('div')
  let vm = h(NotificationVue, {onClose: close})
  render(vm, container)
  document.body.appendChild(container.firstElementChild)

  // 手动关闭
  function close() {
    render(null, container)
  }
}
export default notification

在App.vue中使用

// App.vue
<script setup lang="ts">
import {
  BNotification
} from "../packages"

BNotification()
</script>

总结

到此这篇关于vue3封装Notification组件的文章就介绍到这了,更多相关vue3封装Notification组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3手动封装弹出框组件message的方法

    本文实例为大家分享了vue3手动封装弹出框组件message的具体代码,供大家参考,具体内容如下 封装组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i

  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    接着上一篇文章,熟悉vue3.0的基本用法,和使用一段时间以后,开始准备开发适用于vue3.0使用的pc端的组件库.会陆续跟新一些组件库的写法和注意事项,有兴趣的同学可以多多关注哦,不多bb,开始. 开发一个轮播图组件,适用pc端,(暂无考虑app), 使用于vue3.0 + TS 大致的实现效果是这样: 图片自由轮播,对应圆点图片跳转,左右指示器跳转等.暴露以下options配置: 以上是主要的options,下面展开来说一下具体如何封装. 一:封装思想 在vue3.0和vue2.0中封装组件

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • vue3封装计时器组件的方法

    vue3封装计时器组件的方法

    背景 在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量,这样的计时器不仅会在商品详情页面显示还会在购物车里面有,那就可以把计时器封装成组件,以便于更好的复用以及后期维护 落地代码 <template> <div class="xtx-numbox"> <div class="label"><slot /></div> <div class="numbox"> &

  • vue3封装轮播图组件的方法

    目的 封装轮播图组件,直接使用,具体内容如下 大致步骤 准备my-carousel组件基础布局,全局注册 准备home-banner组件,使用my-carousel组件,再首页注册使用. 深度作用选择器覆盖my-carousel组件的默认样式 在home-banner组件获取轮播图数据,传递给my-carousel组件 在my-carousel组件完成渲染 自动播放,暴露自动轮播属性,设置了就自动轮播 如果有自动播放,鼠标进入离开,暂停,开启 指示器切换,上一张,下一张 销毁组件,清理定时器 落

  • vue3封装Notification组件的完整步骤记录

    vue3封装Notification组件的完整步骤记录

    目录 创建 插入 移除 在App.vue中使用 总结 跳过新手教程的小白,很多东西都不明白,不过是为了满足一下虚荣心,写代码的成就感 弹窗组件的思路基本一致:向body插入一段HTML.我将从创建.插入.移除这三个方面来说我的做法 先来创建文件吧 |-- packages |-- notification |-- index.js # 组件的入口 |-- src |-- Notification.vue # 模板 |-- notification.ts 创建 用到h,render,h是vue3对

  • vue封装TabBar组件的完整步骤记录

    vue封装TabBar组件的完整步骤记录

    目录 实现思路: 步骤一:TabBar和TabBarItem的组件封装 步骤二:给TabBarItem传入active图片 步骤三:TabBarItem和路由的结合效果 步骤四:TabBarItem的颜色控制 用字体图标实现 引入字体图标 运用 总结 实现思路: 步骤一:TabBar和TabBarItem的组件封装 做到这,可以发现页面的基本布局已经实现了,但是item的点击活跃状态还没实现 步骤二:给TabBarItem传入active图片 为了防止替换的内容直接整个替换掉插槽,从而插槽上定义

  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    目录 前言 为什么需要封装table组件? 第一步:定义通用组件 第二步:父组件与子组件进行render通信 第三步:使用组件 总结 前言 随着业务的发展和功能的增多,我们发现不少页面都具备相似的功能,这里举几个比较俗的例子:可以多选的下拉菜单,带输入的对话框,日期选择器等等,于是我们会想办法将这些共有的功能抽取成一个个公共组件,以便能够在不同的页面或业务中使用. 为什么需要封装table组件? 后台管理系统表格使用频率高,减少关于table的业务代码,且便于后期统一修改.便于后期维护.如给ta

  • Vue插件从封装到发布的完整步骤记录

    Vue插件从封装到发布的完整步骤记录

    插件的分类 添加全局的方法或者属性 比如:vue-element 添加全局的资源 比如:指令 v-bind 通过mixin方法添加的一些混合 添加Vue实例方法 Vue.prototype上面 插件的使用 通过全局方法 Vue.use() 使用插件.它需要在你调用 new Vue() 启动应用之前完成: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ //... options })``` 也可以传入一个选项对象: ``` ja

  • vue3封装放大镜组件的实例代码

    vue3封装放大镜组件的实例代码

    目录 组件基础结构 目的:实现图片放大镜功能 安装vueuse 功能实现 完整代码 总结 组件基础结构 结尾有完整代码可直接复制使用 目的:封装图片预览组件,实现鼠标悬停切换效果 落地代码: <template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt="">

  • Java发起http请求的完整步骤记录

    Java发起http请求的完整步骤记录

    前言 在未来做项目中,一些功能模块可能会采用不同的语言进行编写.这就需要http请求进行模块的调用.那么下面,我将以Java为例,详细说明如何发起http请求. 一.GET与POST GET和POST是HTTP的两个常用方法. GET指从指定的服务器中获取数据 POST指提交数据给指定的服务器处理 1.GET方法 使用GET方法,需要传递的参数被附加在URL地址后面一起发送到服务器. 例如:http://121.41.111.94/submit?name=zxy&age=21 特点: GET请求

  • Golang操作MySql数据库的完整步骤记录

    前言 MySQL是业界常用的关系型数据库,在平时开发中会经常与MySql数据库打交道,所以在接下来将介绍怎么使用Go语言操作MySql数据库. 下载MySql连接驱动 Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的数据库驱动.使用database/sql包时必须注入(至少)一个数据库驱动. 我们常用的数据库基本上都有完整的第三方实现.比如:MySQL驱动 **下载依赖** go get -u github.com/go-sql-driver/my

  • vue3 封装自定义组件v-model的示例

    vue3 封装自定义组件v-model的示例

    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

随机推荐