一起來(lái)做一下Vue全局提示組件
全局提示組件在前端中算是比較重要的，在開(kāi)發(fā)業(yè)務(wù)時(shí)候肯定能用的上，畢竟任何報(bào)錯(cuò)只要提示“服務(wù)器異常”就可以完美把鍋扔給后臺(tái)（手動(dòng)滑稽）
全局提示組件在人氣比較??的 UI 組件庫(kù)必有他身影，可能叫法不太相同，有叫 message、toast、alert 等，但就是這么一玩意。
拿 ant-design-vue 組件庫(kù)為例
其核心代碼
message.info('This is a normal message')他是API的方式進(jìn)行調(diào)用組件，以平常使用components注冊(cè)組件，之后在template中使用的方式不太相同
想要實(shí)現(xiàn)這個(gè)，其實(shí)并不困難
但在之前我想聲明一下：ant-design-vue 的 message 做個(gè)type分類，有info、success、error等。但為了讀者方便理解，我們統(tǒng)一就用message來(lái)進(jìn)行調(diào)用，讀者可以根據(jù)本文提供的demo源碼自行進(jìn)行調(diào)整（貼一下 ant-design-vue 源碼）
首先，我們?cè)?components 目錄下創(chuàng)建 message 目錄，同時(shí)創(chuàng)建 Message.vue 和 index.js 文件
然后在 Message.vue 中寫(xiě)
<!-- Message.vue -->
<template>
<div>{{ content }}</div>
</template>
<script>
export default {
name: 'Message',
props: {
content: {
type: String,
default: ''
}
}
}
</script>再者在 index.js 中寫(xiě)
// index.js
import { render, createVNode } from 'vue'
import Message from './Message.vue'
export default function message (content) {
const div = document.createElement('div')
const vm = createVNode(Message, {
content
})
render(vm, div)
document.body.appendChild(div)
}最后在 app.vue 引入使用
<!-- app.vue -->
<template>
</template>
<script>
import message from './components/message'
export default{
setup() {
message('消息組件1')
message('消息組件2')
}
}
</script>效果：
ok，這樣就實(shí)現(xiàn)了以API的方式進(jìn)行調(diào)用組件
其核心代碼其實(shí)只有以下
const div = document.createElement('div')
const vm = createVNode(Message, {
content
})
render(vm, div)
document.body.appendChild(div)createVNode 可以認(rèn)為就是h函數(shù)，支持直接轉(zhuǎn)成虛擬dom對(duì)象
再去調(diào)用 render，渲染至div下，再將div插入body中
由于我們做的是全局組件，應(yīng)該不被任何因素干擾，比如 vue-router
但是上面例子我們會(huì)發(fā)現(xiàn)，我們只要調(diào)用一個(gè) message 方法，就要?jiǎng)?chuàng)建一個(gè)div插入至body，這顯然不是符合vue數(shù)據(jù)驅(qū)動(dòng)視圖的理念
那，接下里進(jìn)行改造
先從 Message.vue 文件開(kāi)始
我們先定義一個(gè)消息列表messages，之后提供添加 add 和刪除delete消息列兩方法，再暴露add方法出去
當(dāng)然，刪除消息是需要根據(jù)id進(jìn)行刪除，可不能瞎刪
<!-- Message.vue -->
<script>
import { ref, unref } from 'vue'
export default {
name: 'Message',
setup (props, { expose }) {
// 消息列表
const messages = ref([])
let id = 0
// 生成id
const uuid = () => `message_${id++}`
// 添加消息對(duì)象
const add = (message) => {
const id = uuid()
const _message = {
...message,
id
}
unref(messages).push(_message)
const { duration = 3 } = message
// 設(shè)置定時(shí)器
const timer = setTimeout(() => {
clearTimeout(timer)
remove(id)
}, duration * 1000)
}
// 根據(jù) id 刪除消息對(duì)象
const remove = (id) => {
messages.value = unref(messages).filter(message => message.id !== id)
}
// 暴露出add 和 remove
expose({
add
})
return {
messages
}
}
}
</script>用v-for把消息列表渲染出來(lái)，同時(shí)使用transition-group做一些列表過(guò)渡動(dòng)畫(huà)
<!-- Message.vue -->
<template>
<transition-group
class="message"
tag="div"
>
<div
class="message-content"
v-for="message in messages"
:key="message.id"
>
{{ message.content }}
</div>
</transition-group>
</template>再編寫(xiě)一點(diǎn)消息列表樣式和其彈出動(dòng)畫(huà)樣式
<!-- Message.vue -->
<style scoped>
.message {
position: fixed;
z-index: 999;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.message-content {
padding: 8px 16px;
border-radius: 3px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
background: #fff;
margin-bottom: 20px;
}
.v-enter-active,
.-leave-active {
transition: all 200ms ease-in;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
transform: translateY(-30px);
}
</style>再改造一下入口文件
之前我們發(fā)現(xiàn)在 app.vue 中調(diào)用一次 message方法，就會(huì)一次 dom 操作，那我們使用閉包寫(xiě)一個(gè)單例模式進(jìn)行改造
再者我們?cè)?Message.vue 暴露出add的方法可以直接進(jìn)行操作消息列表
// index.js
import { render, createVNode } from 'vue'
import Message from './Message.vue'
let vm
// 使用單例模式，不再重新插入body
function getMessageInstance () {
if (vm) return
const div = document.createElement('div')
vm = createVNode(Message)
render(vm, div)
document.body.appendChild(div)
}
export default function message (content = '', duration) {
getMessageInstance()
vm.component.exposed.add({
content,
duration
})
}最后在 app.vue 文件中隨便編寫(xiě)一些測(cè)試代碼
<!-- app.vue -->
<template>
<button @click="onClick">測(cè)試</button>
</template>
<script>
import message from './components/message'
export default{
setup() {
message('消息組件1', 4)
message('消息組件2', 2)
let index = 3
const onClick = () => {
message(`消息組件${index++}`)
}
return {
onClick
}
}
}
</script>看看最終效果
好，這就是全局提示組件設(shè)計(jì)大致思路。
回顧一下會(huì)發(fā)現(xiàn)，其實(shí)Vue的組件開(kāi)發(fā)依舊繞不開(kāi) JavaScript，可見(jiàn) JavaScript 在前端的份量。
總結(jié)
到此這篇關(guān)于Vue全局提示組件的文章就介紹到這了,更多相關(guān)Vue全局提示組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue 虛擬列表的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法
今天小編就為大家分享一篇vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue中axios的封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue3中的provide、inject 的用法,需要的朋友可以參考下2023-03-03
vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐
本文主要介紹了vue+webrtc(騰訊云) 實(shí)現(xiàn)直播功能的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
當(dāng)協(xié)議,域名,端口其中某一個(gè)不一致的時(shí)候,就會(huì)產(chǎn)生跨域問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中該如何解決跨域問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue父組件如何獲取子組件中的變量，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue中@路徑無(wú)法跳轉(zhuǎn)到指定文件的解決
這篇文章主要介紹了vue中@路徑無(wú)法跳轉(zhuǎn)到指定文件的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05