vue3封裝Notification組件的完整步驟記錄
跳過新手教程的小白，很多東西都不明白，不過是為了滿足一下虛榮心，寫代碼的成就感
彈窗組件的思路基本一致：向body插入一段HTML。我將從創(chuàng)建、插入、移除這三個(gè)方面來說我的做法
先來創(chuàng)建文件吧
|-- packages
|-- notification
|-- index.js # 組件的入口
|-- src
|-- Notification.vue # 模板
|-- notification.ts創(chuàng)建
用到h，render，h是vue3對(duì)createVnode()的簡寫。h()把Notification.vue變成虛擬dom，render()把虛擬dom變成節(jié)點(diǎn)。render在渲染時(shí)需要一個(gè)節(jié)點(diǎn)(第二個(gè)參數(shù))，創(chuàng)建一個(gè)只用來裝Notification.vue的容器，我要的只是Notification.vue里面的HTML結(jié)構(gòu)，所以創(chuàng)建了container先將vm變成節(jié)點(diǎn)，也就是HTML，這樣才能插到body中
import { h, render } from "vue"
import NotificationVue from "./Notification.vue"
let container = document.createElement('div')
let vm = h(NotificationVue)
render(vm, container)懵逼點(diǎn)：為什么.vue文件在App.vue中能渲染出來，在這里需要先轉(zhuǎn)成虛擬dom再轉(zhuǎn)成節(jié)點(diǎn)
插入
通過document.body.appendChild把這個(gè)節(jié)點(diǎn)內(nèi)的第一個(gè)子元素插入body中，這樣就能在頁面上顯示出來了。
document.body.appendChild(container.firstElementChild)
移除
vue不能直接操作dom，只能操作虛擬dom了，用null覆蓋掉原來的內(nèi)容即可
render(null, container)
沒懂vue實(shí)現(xiàn)原理也只是把效果做出來而已，網(wǎng)上查閱資料也差不多一個(gè)月了才做出來，看來我確實(shí)不適合編程
完整代碼
// 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>有個(gè)疑問為什么.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)
// 手動(dòng)關(guān)閉
function close() {
render(null, container)
}
}
export default notification在App.vue中使用
// App.vue
<script setup lang="ts">
import {
BNotification
} from "../packages"
BNotification()
</script>總結(jié)
到此這篇關(guān)于vue3封裝Notification組件的文章就介紹到這了,更多相關(guān)vue3封裝Notification組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)條件疊加搜索的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
作為使用Vue的開發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚2023-04-04
Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn)
這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue左右滑動(dòng)選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
項(xiàng)目中往往都是添加動(dòng)態(tài)路由，如何刪除已經(jīng)添加進(jìn)來的路由往往被忽視，為此這里做一下記錄，感興趣的朋友跟隨小編一起看看吧2023-10-10
vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決
這篇文章主要介紹了vue?el-switch初始值(默認(rèn)值)不能正確顯示狀態(tài)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
如何使用 vue-cli 創(chuàng)建模板項(xiàng)目
這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項(xiàng)目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識(shí)，感興趣的朋友可以了解下2020-11-11
vue數(shù)據(jù)對(duì)象length屬性未定義問題
這篇文章主要介紹了vue數(shù)據(jù)對(duì)象length屬性未定義問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06