Tooltip组件拆解

khlbat 发布于2019-08-23 14:54 / 744人阅读

摘要：的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。

Element的组件拆解之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的html
    this.newVue.node = (
         {
                this.show()
            }}
            onMouseLeave={() => {
                this.hide()
            }}
            v-show={this.showPopper}
        >
            {this.$slots.default}
        
    )   
   // 抛出自定义内容做固定展示在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
    }
}

}

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

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

例如：

上左

render中return的就是

上左
这快内容

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

简化后的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传过去就好了

PC:原声组件对很多细节做了处理我只是简单对还原对组件功能，若想知细节请去官网下载elementUI

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101332.html

Tooltip组件拆解

摘要：的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件在 packages/tooltip目录下。这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...

miya 2019-08-30 15:55 评论0 收藏0
Tooltip组件拆解

摘要：的组件拆解之的中的组件在目录下。这个组件核心部分是分别涉略了。 Element的组件拆解之Tooltipelement ui的中的 toolpic组件在 packages/tooltip目录下。这个组件核心部分是 showImg(https://segmentfault.com/img/bVbnFjF?w=332&h=214); toolpic 分别涉略了。《main.js vue...

marser 2019-08-02 14:10 评论0 收藏0
精读《Tableau 探索式模型》

摘要：比如我们对调与会怎样我们得到了三个不同类目近个月的趋势，之所以是折线图，因为图表的维度轴列是连续的。在正式介绍标记区域前，先理解一下为何会发生这种转变表格类组件是双维度组件，折线图是单维度组件。 1. 引言 Tableau 探索式分析功能非常强大，各种功能组合似乎有着无限的可能性。今天笔者会分析这种探索式模型解题思路，一起看看这种探索式分析功能是如何做到的。 2. 精读要掌握探索式...

curried 2019-08-26 11:01 评论0 收藏0
手把手教你撸个vue2.0弹窗组件

摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。手把手教你撸个vue2.0弹窗组件在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍预览地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 评论0 收藏0