在 Vue2 時寫過一個 toast 插件霹崎。詳見 Vue | 如何封裝一個toast插件。
翻看 Vue2 的 toast 代碼可以發(fā)現(xiàn)核心是這句：
Vue.prototype.$toast = toast
Vue2 的時候會暴露一個 install 方法，并通過全局方法 Vue.use() 使用插件临谱。
install 方法的第一個參數(shù)是 Vue 構(gòu)造器捻激，通過 new Vue() 實例化后资厉，在組件中就能調(diào)用 this.$toast 使用組件了演顾。
Vue3 的 install 方法不是傳入 Vue 構(gòu)造器弯院，沒有原型對象，Vue.prototype 是 undefined纵潦，上面的方式也就沒啥用了徐鹤。
Vue3 出來有段時間了垃环，Vue3 的變化邀层，廣度上或者影響范圍上個人認(rèn)為應(yīng)該是this，在 Vue2 中到處可見 this.$router遂庄，this.$store等代碼寥院。在 Vue3 中，不再推薦這種都往 prototype 中加的方式涛目。
不妨看一看配套的 VueX 的寫法：
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
}
}
這種方式的術(shù)語是Hook秸谢，具體可見 React 的文檔。那么我們期望的 Toast 的使用方式為：
import { useToast } from "./useToast.js";
export default{
setup() {
const Toast = useToast();
Toast("Hello World");
};
}
那么問題來了霹肝，useToast.js 這個文件應(yīng)該如何編寫估蹄。
首先，明確一點我們先將 DOM 搞出來沫换，一個居中的框臭蚁，里面有提示文字。功能代碼讯赏，一定時間消失垮兑，可以使用 setTimeout() 并設(shè)置默認(rèn)事件2000毫秒。
在使用 Vue 時使用的是單文件方式template漱挎，這里不妨采用 h 函數(shù)來寫系枪，一下子高大上起來了呢。
const toastVM = createApp({
setup() {
return () =>
h(
'div',
{
class: [
'lx-toast',
],
style: {
display: state.show ? 'block' : 'none',
background: "#000",
color: "#fff",
width: '100px',
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "8px 10px",
}
},
state.text
);
}
});
核心代碼是：display: state.show ? 'block' : 'none' 根據(jù) state.show 的值來決定是否可以展示磕谅。
對于 state 的定義：
const state = reactive({
show: false, // toast元素是否顯示
text: ''
});
接下來是將 h 好的東西掛到 DOM 中私爷，
const toastWrapper = document.createElement('div');
toastWrapper.id = 'lx-toast';
document.body.appendChild(toastWrapper);
toastVM.mount('#lx-toast');
最后是核心的 useToast 函數(shù)：
export function useToast() {
return function Toast(msg) {
console.log(msg)
// 拿到傳來的數(shù)據(jù)
state.show = true
state.text = msg
setTimeout(() => {
state.show = false
}, 1000);
}
}
暴露函數(shù)可以控制展示文字?jǐn)?shù)據(jù)雾棺，可能還需要控制展示時間等，更多的功能可以進一步擴展当犯。
