仿照Element-ui实现一个简易的$message方法
本文仿照element-ui的实现一个类似$message的方法。html部分就比较简单了,只是遍历msgs数组,将每一项传给子组件Msg。这里传入数组msgs的原因是在每次调用resetTop更改数组时,子组件监听不到msg发生的变化,只好将msgs传入,直接从msgs中取相关数据,如果哪位大佬看出问题了希望可以指点下。子组件中逻辑较少,主要是在组件挂载时启动一个定时器,在一定时间后通过emit触发父组件中的resetTop方法将组件关闭。样式部分主要是借鉴了element-ui的样式,以及使用了animation做了简单的动画效果到此为止,除css代码外不到150行实现了消息提示组件。接着,在Vue项目入口文件中使用传送门方法将Msg组件挂载上去就可以在组件中使用了。
下载地址
用户评论