Tooltip组件拆解
时间：2023-03-31 01:36:44
CSS
Element组件拆解Tooltipelementui中的toolpic组件在packages/tooltip目录下。该组件的核心部分在toolpic中单独介绍。《main.js vue-popper.js popup.js vdom.js dom.js》jsjs文件的核心使用的是js，几乎就是main.js，vue-popper.js等都是用elements封装的，调用的都是public方法。vdom.js是在this.$slots.default中找到的，因为this.$slots.default默认返回一个数组。dom.js是添加样式，检测是否有这个样式，获取样式等方法。如果你对ie上的兼容性感兴趣，可以看看main.js:code//main.jsimportPopperfrom'element-ui/src/utils/vue-popper';exportdefault{mixins:[Popper],render(h){//在beforeCreate中初始化vue的htmlthis.newVue.node=({this.show()}}onMouseLeave={()=>{this.hide()}}v-show={this.showPopper}>{this.$slots.default}
)//抛出自定义内容以在html上固定显示returnthis.$slots.default[0]},beforeCreate(){//创建一个新的Vue对象this.newVue=newVue({data:{node:''},render(h){returnthis.node},}).$mount()},mounted(){this.referenceElm=this.$el;this.referenceElm.addEventListener('mouseenter',()=>{this.show()})this.referenceElm.addEventListener('mouseleave',()=>{this.hide()})},方法：{show(){console.log('Passed')this.showPopper=true},hide(){console.log('Leave')this.showPopper=false}}}在生命周期beforeCreate中新建一对vue对象，通过render初始化HTMLfunction然后返回一个对象如：
topleftrender中返回的是upperleft，也就是快速内容vue-popper.js代码：在这个文件的代码核心部分，elementUI还使用了npm库中的popper。js补全官方api和popper.js我把机票的简化版vue-popper.js贴上去从'popper.js'导入popperJs；导出默认值{data(){return{showPopper:false}},watch:{showPopper(val){val?this.createpopper():this.destroyPopper();}}，方法：{createpopper(){document.body.appendChild(this.$refs.popper);newpopperJs(this.referenceElm,this.$refs.popper)}}}这是调用一个toolpic最简单的方法mouseoverandLeaving会显示这个toolpicsummary1.通过main.js生成HTML，在其中添加各种鼠标事件挂载生命周期，改变showPopper的值2.同时将this.$el的当前值赋值给this.referenceElm3。在vue-popper.js中监听showPopper的值。一旦showPopper的值为真，则执行this.createpopper()，否则将被销毁。4.在this.createpopper()函数中，popper组件需要2个参数，然后放上this.$refs。只需将popper和this.referenceElm传递过来即可。PC：原始声音组件处理了很多细节。我只是简单地恢复了组件功能。想了解详情请到官网下载elementUI
