Vue$mount实战之实现消息弹窗组件-创新互联

之前的项目一直在使用Element-UI框架，element中的Notification、Message组件使用时不需要在html写标签，而是使用js调用。那时就很疑惑，为什么element ui使用this.$notify、this.$message就可以实现这样的功能？

创新互联2013年开创至今，公司以成都网站设计、网站建设、外贸网站建设、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千多家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

1、实现消息弹窗组件的几个问题

• 如何在任何组件中使用this.$message就可以显示消息？
• 如何将消息的dom节点插入到body中？
• 同时出现多个消息弹窗时，消息弹窗的z-index如何控制？

2、效果预览

3、代码实现

PMessage.vue

本文标题：Vue$mount实战之实现消息弹窗组件-创新互联
路径分享：http://kswsj.com/article/dpcjch.html