ElementUI的组件拆解之Tooltip

element ui的中的 toolpic组件在 packages/tooltip目录下。

这个组件核心部分是

toolpic 分别涉略了。《main.js vue-popper.js popup.js vdom.js dom.js》等js文件

核心用到到js差不多就是main.js，vue-popper.js

其他都是element封装好都调用都公共方法

vdom.js

是找到this.$slots.default中都vode

因为this.$slots.default默认返回都是一个数组

dom.js

是添加样式，检测是否有这个样式，获取样式等一些方法，对ie上对兼容等有兴趣可以看看

main.js：代码

//main.js
import Popper from 'element-ui/src/utils/vue-popper';
export default {mixins: [Popper],render (h) {// 初始化beforeCreate中vue的htmlthis.newVue.node = (<divref="popper"onMouseenter={() => {this.show()}}onMouseLeave={() => {this.hide()}}v-show={this.showPopper}>{this.$slots.default}</div>)   // 抛出自定义内容做固定展示在html上return this.$slots.default[0]},beforeCreate () {// 创建一个新的Vue对象this.newVue = new Vue({data: {node: ''},render(h){return this.node},}).$mount()},mounted(){this.referenceElm = this.$el;this.referenceElm.addEventListener('mouseenter',()=>{this.show()})this.referenceElm.addEventListener('mouseleave',()=>{this.hide()})},methods: {show(){console.log('经过啦')this.showPopper = true},hide() {console.log('离开啦')this.showPopper = false}}
}
复制代码

main.js进行了简化

在生命周期beforeCreate中创建一个新对vue对象，

通过render函数初始化HTML 然后 return 一个对象

例如：

 <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"><el-button>上左</el-button></el-tooltip>复制代码

render中return的就是

<el-button>上左</el-button>复制代码

这快内容

vue-popper.js代码：在这个文件的代码核心部分,elementUI也是用npm库里面的popper.js去完成官方api再此我这边已经黏贴了飞机票

简化后的vue-popper.js。

import popperJs from 'popper.js';
export default {data() {return {showPopper: false}},watch: {showPopper(val) {val ? this.createpopper() : this.destroyPopper();}},methods: {createpopper(){document.body.appendChild(this.$refs.popper);new popperJs(this.referenceElm,this.$refs.popper)}}
}复制代码

这是最简单调用方式实现了一个toolpic

鼠标经过和离开会展示这个toolpic

总结

1.通过main.js中生成HTML并在mounted生命周期中添加各种鼠标事件，改变showPopper的值

2.同时把当前对this.$el赋值给this.referenceElm

3.在vue-popper.js对showPopper的值进行监听，一旦showPopper的值为true时执行this.createpopper()，反之则摧毁

4.在this.createpopper()函数中popper组件需要2个参数然后把 this.$refs.popper和 this.referenceElm传过去就好了

PS:只是简单还原了这个功能，具体细节麻烦请下载elementUI

转载于:https://juejin.im/post/5c480d43e51d4551e9610111

ElementUI的组件拆解之Tooltip相关推荐

[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
使用继承思想，去开发一款组件（element-ui collapse组件为例子）
最近在使用element-ui collapse组件的过程中,需要用collapse-item实现拖拽排序,原本组件满足不了,先看下组件的原形.(本文使用的element-ui是用1.4.2版本) 第 ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
elementUI 分页组件Bug ，为什么会 infinity ？
个人项目经验总结: 是因为后台的原因,逻辑少走了一层. 而前端页面初次加载的时候直接提交默认参数,然后后台没有按照提交的参数一致性response返回给前端,而是后台自定义的参数值返回给前端渲染的,所 ...
elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用.API调用.获取服务端数据.并初始化渲染页面:(踩坑一则) 因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页 ...
element-ui表格组件table踩坑总结
table组件中,基本情况简述: element框架的table组件,内容涵盖以下总结知识点,内容比较基础,知识有点交叉.对比学习更易于理解.应用和掌握. 常用UI效果,参考点: table边框设置( ...
Element-ui导航组件NavMenu导航高亮设置
Element-ui导航组件: NavMenu导航HighLight高亮设置 1. 文件navMenu.vue,部分代码参考: <template><div class=" ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...

ElementUI的组件拆解之Tooltip

ElementUI的组件拆解之Tooltip相关推荐

最新文章

热门文章