@cw-devops/bk-magic-vue/lib/directives/transfer-dom.js

基于蓝鲸 Magicbox 和 Vue 的前端组件库

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.library = {}));
}(this, function (exports) { 'use strict';

  function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
    return _extends.apply(this, arguments);
  }

  function getTarget(node) {
    if (node === void 0) {
      node = document.body;
    }
    if (node === true) {
      return document.body;
    }
    return node instanceof window.Node ? node : document.querySelector(node);
  }
  var transferDom = {
    inserted: function inserted(el, _ref, vnode) {
      var value = _ref.value;
      if (el.dataset.transfer !== 'true') {
        return false;
      }
      el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
      var parentNode = el.parentNode;
      if (!parentNode) {
        return;
      }
      var home = document.createComment('');
      var hasMovedOut = false;
      if (value !== false) {
        parentNode.replaceChild(home, el);
        getTarget(value).appendChild(el);
        hasMovedOut = true;
      }
      if (!el.__transferDomData) {
        el.__transferDomData = {
          parentNode: parentNode,
          home: home,
          target: getTarget(value),
          hasMovedOut: hasMovedOut
        };
      }
    },
    componentUpdated: function componentUpdated(el, _ref2) {
      var value = _ref2.value;
      if (el.dataset.transfer !== 'true') {
        return false;
      }
      var ref$1 = el.__transferDomData;
      if (!ref$1) {
        return;
      }
      var parentNode = ref$1.parentNode;
      var home = ref$1.home;
      var hasMovedOut = ref$1.hasMovedOut;
      if (!hasMovedOut && value) {
        parentNode.replaceChild(home, el);
        getTarget(value).appendChild(el);
        el.__transferDomData = _extends({}, el.__transferDomData, {
          hasMovedOut: true,
          target: getTarget(value)
        });
      } else if (hasMovedOut && value === false) {
        parentNode.replaceChild(el, home);
        el.__transferDomData = _extends({}, el.__transferDomData, {
          hasMovedOut: false,
          target: getTarget(value)
        });
      } else if (value) {
        getTarget(value).appendChild(el);
      }
    },
    unbind: function unbind(el) {
      if (el.dataset.transfer !== 'true') {
        return false;
      }
      el.className = el.className.replace('v-transfer-dom', '');
      var ref$1 = el.__transferDomData;
      if (!ref$1) {
        return;
      }
      if (el.__transferDomData.hasMovedOut === true) {
        el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el);
      }
      el.__transferDomData = null;
    }
  };
  transferDom.install = function (Vue) {
    Vue.directive('bk-transfer-dom', transferDom);
  };

  exports.default = transferDom;

  Object.defineProperty(exports, '__esModule', { value: true });

}));