ten-design-vue/lib/affix/affix.js

ten-vue

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = require("./util");

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = require("lodash/isUndefined");

/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/affix/affix.vue?vue&type=template&id=761cb65e&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.placeholderStyles)?_c('div',{style:(_vm.placeholderStyles)}):_vm._e(),_c('div',{ref:"child",staticClass:"ten-affix",class:_vm.className,style:(_vm.styles)},[_vm._t("default")],2)])}
var staticRenderFns = []


// CONCATENATED MODULE: ./src/components/affix/affix.vue?vue&type=template&id=761cb65e&

// EXTERNAL MODULE: external "lodash/isUndefined"
var isUndefined_ = __webpack_require__(1);
var isUndefined_default = /*#__PURE__*/__webpack_require__.n(isUndefined_);

// EXTERNAL MODULE: external "./util"
var external_util_ = __webpack_require__(0);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/affix/affix.vue?vue&type=script&lang=js&
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//


var affixvue_type_script_lang_js_name = 'ten-affix';
/* harmony default export */ var affixvue_type_script_lang_js_ = ({
  name: affixvue_type_script_lang_js_name,
  props: {
    /**
     * 监听滚动的元素(默认为window)，传入选择器字符串如'#parent'
     */
    target: String,

    /**
     * 距离窗口顶部达到指定偏移量后触发
     */
    offsetTop: {
      type: Number,
      default: 0
    },

    /**
     * 距离窗口底部达到指定偏移量后触发
     */
    offsetBottom: {
      type: Number
    },

    /**
     * 自定义className
     */
    className: {
      type: String,
      default: ''
    }
  },
  data: function data() {
    return {
      styles: null,
      placeholderStyles: null,
      lastStatus: external_util_["affixStatus"].none,
      shouldCompute: true
    };
  },
  mounted: function mounted() {
    this.resizeObserver = null;
    this.intersectionObserver = null;
    this.targetEl = window;
    this.init();
    this.targetEl.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy: function beforeDestroy() {
    this.removeResizeListener();
    this.removeInterListener();
    this.targetEl.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    init: function init() {
      if (this.target) {
        this.targetEl = document.querySelector(this.target);
      }

      this.addResizeListener();
      this.addInterListener();
    },
    addResizeListener: function addResizeListener() {
      if (Object(external_util_["isSuperResizeObserver"])()) {
        this.resizeObserver = new ResizeObserver(this.updatePosition);
        this.resizeObserver.observe(document.documentElement);
      } else {
        window.addEventListener('resize', this.updatePosition);
      }
    },
    removeResizeListener: function removeResizeListener() {
      if (Object(external_util_["isSuperResizeObserver"])()) {
        this.resizeObserver.disconnect();
      } else {
        window.removeEventListener('resize', this.updatePosition);
      }
    },
    addInterListener: function addInterListener() {
      var _this = this;

      if (Object(external_util_["isSuperIntersectionObserver"])()) {
        this.intersectionObserver = new IntersectionObserver(function (inters) {
          var _inters = _slicedToArray(inters, 1),
              inter = _inters[0];

          _this.shouldCompute = inter.isIntersecting;
          _this.shouldCompute && _this.updatePosition();
        });
        this.intersectionObserver.observe(this.$el);
      }
    },
    removeInterListener: function removeInterListener() {
      if (Object(external_util_["isSuperIntersectionObserver"])()) {
        this.intersectionObserver.disconnect();
      }
    },
    getFixedPos: function getFixedPos() {
      var elRect = Object(external_util_["getRect"])(this.$el);
      var targetElRect = Object(external_util_["getRect"])(this.targetEl);
      var hasOffsetTop = ('offsetTop' in this.$vnode.componentOptions.propsData);
      var hasOffsetBottom = ('offsetBottom' in this.$vnode.componentOptions.propsData);
      var fixedTop;
      var fixedBottom;

      if (!hasOffsetTop && hasOffsetBottom) {
        if (targetElRect.bottom - elRect.bottom <= this.offsetBottom) {
          fixedBottom = window.innerHeight - targetElRect.bottom + this.offsetBottom;
        }
      } else {
        if (elRect.top - targetElRect.top <= this.offsetTop) {
          fixedTop = this.offsetTop + targetElRect.top;
        }
      }

      return [fixedTop, fixedBottom];
    },
    updatePosition: function updatePosition() {
      var _this$getFixedPos = this.getFixedPos(),
          _this$getFixedPos2 = _slicedToArray(_this$getFixedPos, 2),
          fixedTop = _this$getFixedPos2[0],
          fixedBottom = _this$getFixedPos2[1];

      var force = !!this.target;
      var isNone = isUndefined_default()(fixedTop) && isUndefined_default()(fixedBottom);

      if (!force) {
        if (this.lastStatus === external_util_["affixStatus"].none && isNone || this.lastStatus === external_util_["affixStatus"].fixed && !isNone) return;
      }
      /**
       * fixed状态变更时的回调
       *
       * @param {Boolean} 当前是否fixed
       */


      this.$emit('change', !isNone);

      if (isNone) {
        this.lastStatus = external_util_["affixStatus"].none;
        this.styles = null;
        this.placeholderStyles = null;
      } else {
        this.lastStatus = external_util_["affixStatus"].fixed;

        var _getRect = Object(external_util_["getRect"])(this.$refs.child),
            width = _getRect.width,
            height = _getRect.height,
            left = _getRect.left;

        var nextStyles = {
          zIndex: 10,
          width: "".concat(width, "px"),
          height: "".concat(height, "px"),
          left: "".concat(left, "px"),
          position: 'fixed'
        };
        this.placeholderStyles = {
          width: "".concat(width, "px"),
          height: "".concat(height, "px")
        };

        if (!isUndefined_default()(fixedTop)) {
          this.styles = _objectSpread(_objectSpread({}, nextStyles), {}, {
            top: "".concat(fixedTop, "px")
          });
        }

        if (!isUndefined_default()(fixedBottom)) {
          this.styles = _objectSpread(_objectSpread({}, nextStyles), {}, {
            bottom: "".concat(fixedBottom, "px")
          });
        }
      }
    },
    handleScroll: function handleScroll() {
      this.shouldCompute && this.updatePosition();
    }
  }
});
// CONCATENATED MODULE: ./src/components/affix/affix.vue?vue&type=script&lang=js&
 /* harmony default export */ var affix_affixvue_type_script_lang_js_ = (affixvue_type_script_lang_js_); 
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () {
        injectStyles.call(
          this,
          (options.functional ? this.parent : this).$root.$options.shadowRoot
        )
      }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functional component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}

// CONCATENATED MODULE: ./src/components/affix/affix.vue





/* normalize component */

var component = normalizeComponent(
  affix_affixvue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* harmony default export */ var affix = __webpack_exports__["default"] = (component.exports);

/***/ })
/******/ ]);