在 Vue2 时写过一个 toast 插件。详见 Vue | 如何封装一个toast插件。
翻看 Vue2 的 toast 代码可以发现核心是这句：
Vue.prototype.$toast = toast
Vue2 的时候会暴露一个 install 方法，并通过全局方法 Vue.use() 使用插件。
install 方法的第一个参数是 Vue 构造器，通过 new Vue() 实例化后，在组件中就能调用 this.$toast 使用组件了。
Vue3 的 install 方法不是传入 Vue 构造器，没有原型对象，Vue.prototype 是 undefined，上面的方式也就没啥用了。
Vue3 出来有段时间了，Vue3 的变化，广度上或者影响范围上个人认为应该是this，在 Vue2 中到处可见 this.$router，this.$store等代码。在 Vue3 中，不再推荐这种都往 prototype 中加的方式。
不妨看一看配套的 VueX 的写法：
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
}
}
这种方式的术语是Hook，具体可见 React 的文档。那么我们期望的 Toast 的使用方式为：
import { useToast } from "./useToast.js";
export default{
setup() {
const Toast = useToast();
Toast("Hello World");
};
}
那么问题来了，useToast.js 这个文件应该如何编写。
首先，明确一点我们先将 DOM 搞出来，一个居中的框，里面有提示文字。功能代码，一定时间消失，可以使用 setTimeout() 并设置默认事件2000毫秒。
在使用 Vue 时使用的是单文件方式template，这里不妨采用 h 函数来写，一下子高大上起来了呢。
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' 根据 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 函数：
export function useToast() {
return function Toast(msg) {
console.log(msg)
// 拿到传来的数据
state.show = true
state.text = msg
setTimeout(() => {
state.show = false
}, 1000);
}
}
暴露函数可以控制展示文字数据，可能还需要控制展示时间等，更多的功能可以进一步扩展。
