Elementui源码学习模仿一个el-message
//默认style.messageBox{min-width:320px;高度：自动；//高度被内容填充拉伸：16px；//加内边距边框：1pxsolid#e9e9e9;位置：固定；//使用固定定位，使位置靠近顶部且居中top:20px;左：50%；转换：translateX(-50%)；//使控件居中box-sizing:border-box;边界半径：4px；//添加圆角看起来更好background-color:#edf2fc;//过渡效果transition:opacity0.3s,transform0.4s,top0.4s;显示：弹性；//使flexbox垂直居中align-items:center;}//文字居中style.horizo??ntal{justify-content:center;}//成功提示style.success{color:#67c23a;background-color:#f0f9eb;}//警告提示style.warning{color:#e6a23c;background-color:#fdf6ec;}//错误提示style.error{color:#f56c6c;background-color:#fef0f0;}//过渡效果style.message-fade-enter,.message-fade-leave-active{opacity:0;-webkit-transform:翻译(-50%,-100%);transform:translate(-50%,-100%);}问题描述虽然使用工具库在工作中非常有趣和高效，但是我们还是要花时间去看看工具库的源码，因为有些API是不经常用到的会在源码中用到方法，记住这些api方法，可以提高自己的编程能力，有助于以后封装自己的工具库，更好的实现一些需求。需求分析在组件打包之前，我们需要思考待打包组件的应用场景和使用需求，并以此为突破口，更好的实现代码逻辑的应用场景和需求：消息提示傻傻的认为消息是主要是信息提示，应用场景是用户进行了一些操作，比如成功或者失败的交互反馈。因此，我们可以定义要封装的组件有如下需求：需要能够输入信息文本消息参数需要消息信息的类型反馈（成功反馈、警告反馈、错误反馈、一般信息反馈）。type参数需要提示后，可以设置默认消失时长参数，鼠标悬停时保持消息提示，不让它消失。你会发现官方考虑的还是很详细的，给了很多配置项Options参数。但是在我们自己实际的打包组件中，并不需要像官方那样做很多配置项。我们只需要实现常用的配置项即可。保留最有用的功能即可。饿了么UI官方el-message组件：https://element.eleme.cn/#/zh...效果图怎么理解关于这个功能的效果，个人建议可以理解如下，先回顾一下使用不多的API然后clone代码运行（文末附上github代码仓库地址）结合评论，可以快速了解知识点review::class数组用法和:styleusage//html
//jsdata(){return{center:false,//水平文本是否居中，默认为falsetype:"info",//默认信息类型typeArr:["info","success","warning","error"],//共4种类型};},computed:{controlTop(){return{top:`12px`};},}，为什么要提:class的数组用法和:style的用法呢？因为本例中消息绑定了四种样式（成功、警告、错误、信息），需要使用；用户多次点击以触发消息的出现并控制下一条消息如果仓位低于前一个，则需要不断改变下一条消息的top值；知识点回顾transition转场钩子函数//html
//jsmethods:{//...afterLeave(){/*使用这个钩子在这个例子中，这个钩子函数将在过渡消失时被触发。我们可以在钩子函数中写一些js逻辑代码来执行相应的操作*/}//。..}那么，过渡什么时候消失，什么时候出现？最明显的是，当v-show由true变为false，或者由false变为true时，transition的transition钩子函数会自动触发执行。本例中使用transition钩子函数主要是因为当一条消息消失时，需要减少一条消息的计数，所以需要使用这个钩子来执行js逻辑代码。transitionhook详情见官方文档：https://cn.vuejs.org/v2/guide...vue销毁组件的知识点回顾v-if的使用方式官方推荐的是k的最佳使用方式ey一般用的不多this.$destroy(true)vue1.x版本经常用到，从2.x版本开始不支持了，相当于手动去掉this.$el.parentNode。removeChild(this.$el);在这个例子中，关于第3点和第4点，游老师也亲自回答了关于这个问题的问题简单截图如下：问题地址如下：https://github.com/vuejs/vue/……为什么要提这种破坏dom的方法呢？因为我们使用了v-show加transition来控制消息的隐藏和消失，所以效果更流畅，没有使用v-if直接杀掉dom。所以我们需要手动编写代码。transition消失后，当我们看不到消息时，可以偷偷把消息去掉，完成代码。整体代码思路是创建一个消息组件进行继承，使用Vue.extend来继承这个组件。构造函数定义一个函数。函数执行后，使用构造函数创建消息显示。默认情况下，它会在3秒后自动消失。将此功能挂载到原型上并将其公开以方便访问。我对Vue.extend继承不熟悉。是的，你可以先看看作者的另外两篇文章。继承...https://segmentfault.com/a/11...继承...https://segmentfault.com/a/11...使用.vue文件代码//html
信息弹窗成功弹窗警告弹窗错误弹出弹出5秒关闭文??本居中介绍//一种是使用原型链，另一种是引入使用importMyMessagefrom"@/components/index.js";methods:{showMessage1(){this.$myMessage({message:"InformationPopup",type:"info",});},showMessage2(){this.$myMessage({message:"Successpopup",type:"success",});},showMessage3(){this.$myMessage({message:"Warningpopup",type:"warning",});},showMessage4(){this.$myMessage({message:"errorpopup",type:"error",});},showMessage5(){this.$myMessage({message:"弹出5秒关闭",});},showMessage6(){this.$myMessage({message:"居中文本",center:true,});},showMessage7(){MyMessage({message:"简介",type:"success",});},}，通过继承挂载原型代码，方便动态创建文件importVuefrom'vue';importmessageComponentfrom'./src/index.vue'//导入组件以促进继承letMessageConstructor=Vue.extend(messageComponent);//引入消息构造函数，方便newletinstance=null//定义组件实例letcount=0//定义数量统计，知道创建了多少个实例constMyMessage=function(options){if(options.duration&typeofoptions.duration!=='number'){//检查持续时间numbertypeconsole.error('Error!duration必须是数字类型')//如果用户随意传入一个非数字类型的参数，会抛出错误，不会执行后面的代码return}count=count+1//MyMessage函数被调用一次，并添加实例统计次数=newMessageConstructor({//实例化一个组件实例data:options,//数据传递参数，组件数据接收（即传递配置项）propsData:{//propsData传递parameters,count:count,//将统计的数量传递给子组件cutCount:cutCount//传递一个函数，当MyMessage消失时通知外界},});实例.$mount();//实例组件挂载document.body.appendChild(instance.$el);//把这个组件实例的dom元素追加到文档documentinstance.isShowMyMessage=true;//设置组件的isShowMyMessage属性值为true，即让实例出现，即消息出现returninstance;//MyMessage函数执行一次，会返回一个处理过的实例对象}functioncutCount(){//当消息消失时，acount=count-1//外部统计的个数减少一个letmessageBoxDomList=document.querySelectorAll('.messageBox')//然后选择所有的messageDOM元素for(leti=0;i{{iconObj[type]}}{{message}} 