vue指令如何實現氣泡提示（附程式碼）

這篇文章帶給大家的內容是關於vue指令如何實現氣泡提示（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

菜鳥學習之路

//L6zt github
自己 在造組件輪子，也就是瞎搞。
自己寫了個slider組件，想加個氣泡提示。為了復用和省事特此寫了個指令來解決。
預覽位址
專案位址github 

#我對指令的理解:前不久看過一部分vnode實作源碼，奈何資質有限...看不懂。
vnode的生命週期-----> 產生前、生成後、產生真正dom、更新 vnode、更新dom 、 銷毀。
而Vue的指令則是依賴vnode 的生命週期， 無非也是有以上類似的鉤子。
程式碼效果
 指令掛A元素上，預設產生一個氣泡容器B插入到body 裡面，B 會取得元素A 的位置資訊和自己的
大小訊息，經過一些列的運算，B 元素會定位到A 的中間上位置。當滑鼠放到 A 上 B 就會顯示出來，離開就會消失。

以下程式碼

氣泡指令

#

import { on , off , once, contains, elemOffset, position, addClass, removeClass } from '../utils/dom';
import Vue from 'vue'
const global = window;
const doc = global.document;
const top = 15;
export default {
  name : 'jc-tips' ,
  bind (el , binding , vnode) {
    // 确定el 已经在页面里 为了获取el 位置信信 
    Vue.nextTick(() => {
      const { context } = vnode;
      const { expression } = binding;
      // 气泡元素根结点
      const fWarpElm = doc.createElement('p');
      // handleFn 气泡里的子元素（自定义）
      const handleFn = binding.expression && context[expression] || (() => '');
      const createElm = handleFn();
      fWarpElm.className = 'hide jc-tips-warp';
      fWarpElm.appendChild(createElm);
      doc.body.appendChild(fWarpElm);
      // 给el 绑定元素待其他操作用
      el._tipElm = fWarpElm;
      el._createElm = createElm;
      // 鼠标放上去的 回调函数
      el._tip_hover_fn = function(e) {
        // 删除节点函数
          removeClass(fWarpElm, 'hide');
          fWarpElm.style.opacity = 0;
          // 不加延迟 fWarpElm的大小信息 （元素大小是 0 0）---> 删除 class 不是立即渲染
          setTimeout(() => {
            const offset = elemOffset(fWarpElm);
            const location = position(el);
            fWarpElm.style.cssText =  `left: ${location.left  - offset.width / 2}px; top: ${location.top - top - offset.height}px;`;
            fWarpElm.style.opacity = 1;
          }, 16);
      };
      //鼠标离开 元素 隐藏 气泡
      const handleLeave = function (e) {
        fWarpElm.style.opacity = 0;
        // transitionEnd 不太好应该加入兼容
        once({
          el,
          type: 'transitionEnd',
          fn: function() {
            console.log('hide');
            addClass(fWarpElm, 'hide');
          }
        })
      };
      el._tip_leave_fn =  handleLeave;
      // 解决 slider 移动结束 提示不消失
      el._tip_mouse_up_fn = function (e) {
        const target = e.target;
        console.log(target);
        if (!contains(fWarpElm, target) && el !== target) {
          handleLeave(e)
        }
      };
      on({
        el,
        type: 'mouseenter',
        fn: el._tip_hover_fn
      });
      on({
        el,
        type: 'mouseleave',
        fn: el._tip_leave_fn
      });
      on({
        el: doc.body,
        type: 'mouseup',
        fn: el._tip_mouse_up_fn
      })
    });
  } ,
  // 气泡的数据变化 依赖于 context[expression] 返回的值
  componentUpdated(el , binding , vnode) {
    const { context } = vnode;
    const { expression } = binding;
    const handleFn = expression && context[expression] || (() => '');
    Vue.nextTick( () => {
      const createNode = handleFn();
      const fWarpElm = el._tipElm;
      if (fWarpElm) {
        fWarpElm.replaceChild(createNode, el._createElm);
        el._createElm = createNode;
        const offset = elemOffset(fWarpElm);
        const location = position(el);
        fWarpElm.style.cssText =  `left: ${location.left  - offset.width / 2}px; top: ${location.top - top - offset.height}px;`;
      }
    })
  },
 // 删除 事件
  unbind (el , bind , vnode) {
    off({
      el: dov.body,
      type: 'mouseup',
      fn: el._tip_mouse_up_fn
    });
    el = null;
  }
}

slider 元件

<template>
    <p>
        <section>
        </section>
            <i>
            </i>
    </p>
</template>

<script>
  import {elemOffset, on, off, once} from "../../utils/dom";
  const global = window;
  const doc = global.document;
  export default {
    props: {
      step: {
        type: [Number],
        default: 0
      },
      rangeEnd: {
        type: [Number],
        required: true
      },
      value: {
        type: [Number],
        required: true
      },
      minValue: {
        type: [Number],
        required: true
      },
      maxValue: {
        type: [Number],
        required: true
      }
    },
    data () {
      return {
        startX: null,
        width: null,
        curValue: 0,
        curStep: 0,
        left: 0,
        tempLeft: 0
      }
    },
    computed: {
      wTov () {
        let step = this.step;
        let width = this.width;
        let rangeEnd = this.rangeEnd;
        if (width) {
          if (step) {
            return width / (rangeEnd / step)
          }
          return width / rangeEnd
        }
        return null
      },
      postValue () {
        let value = null;
        if (this.step) {
          value =  this.step * this.curStep;
        } else {
          value = this.left / this.wTov;
        }
        return value;
      }
    },
    watch: {
       value: {
         handler (value) {
           this.$nextTick(() => {
             let step = this.step;
             let wTov = this.wTov;
             if (step) {
               this.left = value / step * wTov;
             } else {
                this.left = value * wTov;
             }
           })
         },
         immediate: true
       }
    },
    methods: {
      moveStart (e) {
        e.preventDefault();
        const body = window.document.body;
        const _this = this;
        this.startX = e.pageX;
        this.tempLeft = this.left;
        on({
          el: body,
          type: &#39;mousemove&#39;,
          fn: this.moving
        });
        once({
          el: body,
          type: &#39;mouseup&#39;,
          fn: function() {
            console.log(&#39;end&#39;);
            _this.$emit(&#39;input&#39;, _this.postValue);
            off({
              el: body,
              type: &#39;mousemove&#39;,
              fn: _this.moving
            })
          }
        })
      },
      moving(e) {
        let curX = e.pageX;
        let step = this.step;
        let rangeEnd = this.rangeEnd;
        let width = this.width;
        let tempLeft = this.tempLeft;
        let startX = this.startX;
        let wTov = this.wTov;
        if (step !== 0) {
          let all = parseInt(rangeEnd / step);
          let curStep = (tempLeft + curX - startX) / wTov;
          curStep > all && (curStep = all);
          curStep < 0 && (curStep = 0);
          curStep = Math.round(curStep);
          this.curStep = curStep;
          this.left = curStep * wTov;
        } else {
          let left = tempLeft + curX - startX;
          left < 0 && (left = 0);
          left > width && (left = width);
          this.left = left;
        }
      },
      createNode () {
        const fElem = document.createElement(&#39;i&#39;);
        const textNode = document.createTextNode(this.postValue.toFixed(2));
        fElem.appendChild(textNode);
       return fElem;
      }
    },
    mounted () {
      this.width = elemOffset(this.$el).width;
    }
  };
</script>

<style>
    .jc-slider-cmp {
        position: relative;
        display: inline-block;
        width: 100%;
        border-radius: 4px;
        height: 8px;
        background: #ccc;
        .jc-slider-dot {
            position: absolute;
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #333;
            cursor: pointer;
        }
        .slider-active-bg {
            position: relative;
            height: 100%;
            border-radius: 4px;
            background: red;
        }
    }
</style>

############################################ ###../utils/dom######

const global = window;
export const on = ({el, type, fn}) => {
         if (typeof global) {
             if (global.addEventListener) {
                 el.addEventListener(type, fn, false)
            } else {
                 el.attachEvent(`on${type}`, fn)
            }
         }
    };
    export const off = ({el, type, fn}) => {
        if (typeof global) {
            if (global.removeEventListener) {
                el.removeEventListener(type, fn)
            } else {
                el.detachEvent(`on${type}`, fn)
            }
        }
    };
    export const once = ({el, type, fn}) => {
        const hyFn = (event) => {
            try {
                fn(event)
            }
             finally  {
                off({el, type, fn: hyFn})
            }
        }
        on({el, type, fn: hyFn})
    };
    // 最后一个
    export const fbTwice = ({fn, time = 300}) => {
        let [cTime, k] = [null, null]
        // 获取当前时间
        const getTime = () => new Date().getTime()
        // 混合函数
        const hyFn = () => {
            const ags = argments
            return () => {
                clearTimeout(k)
                k = cTime =  null
                fn(...ags)
            }
        };
        return () => {
            if (cTime == null) {
                k = setTimeout(hyFn(...arguments), time)
                cTime = getTime()
            } else {
                if ( getTime() - cTime  {
            return item !== className
        })
        el.className =     classList.join(' ')
    };
    export const delay = ({fn, time}) => {
        let oT = null
        let k = null
        return () => {
            // 当前时间
            let cT = new Date().getTime()
            const fixFn = () => {
                k = oT = null
                fn()
            }
            if (k === null) {
                oT = cT
                k = setTimeout(fixFn, time)
                return
            }
            if (cT - oT  {
        let top  = 0;
        let left = 0;
        let offsetParent = son;
        while (offsetParent !== parent) {
            let dx = offsetParent.offsetLeft;
            let dy = offsetParent.offsetTop;
            let old = offsetParent;
            if (dx === null) {
                return {
                    flag: false
                }
            }
            left += dx;
            top += dy;
      offsetParent = offsetParent.offsetParent;
            if (offsetParent === null && old !== global.document.body) {
                return {
                    flag: false
                }
            }
        }
        return  {
            flag: true,
            top,
            left
        }
    };
    export  const getElem = (filter) => {
        return Array.from(global.document.querySelectorAll(filter));
    };
    export const elemOffset = (elem) => {
        return {
            width: elem.offsetWidth,
            height: elem.offsetHeight
        }
    };

#######

以上是vue指令如何實現氣泡提示（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！