创建指令文件使一块内容距页面底部指定的距离

开发项目过程中,想实现页面内一块内容距离页面底部25px的距离,使用css处理较为繁琐,故想到创建一个全局指令文件进行处理。

1.在src文件夹下创建directive/pageDistance文件夹,创建adaptive.js文件:

import ResizeObserver from "resize-observer-polyfill/src/ResizeObserver.js";

const isServer = typeof window === "undefined";

/* istanbul ignore next */
const resizeHandler = function (entries) {
  for (let entry of entries) {
    const listeners = entry.target.__resizeListeners__ || [];
    if (listeners.length) {
      listeners.forEach((fn) => {
        fn();
      });
    }
  }
};

/* istanbul ignore next */
export const addResizeListener = function (element, fn) {
  if (isServer) {
    return;
  }
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

/* istanbul ignore next */
export const removeResizeListener = function (element, fn) {
  if (!element || !element.__resizeListeners__) {
    return;
  }
  element.__resizeListeners__.splice(
    element.__resizeListeners__.indexOf(fn),
    1
  );
  if (!element.__resizeListeners__.length) {
    element.__ro__.disconnect();
  }
};
/**
 * How to use
 * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
 * el-table height is must be set
 *  bottomOffset: 30(default)   // The height of the table from the bottom of the page.
 */

const doResize = (el, binding, vnode) => {
  const { el: $table } = vnode;

  const { value } = binding;
  if (!value.fixedHeader) {
    return;
  }
  const bottomOffset = (value && value.bottomOffset) || 70;
  if (!$table) {
    return;
  }

  const layout = document.getElementById("app");
  setTimeout(() => {
    const height =
      window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
    const layoutHeight = layout.clientHeight;
    layoutHeight > 810
      ? (layout.style.minHeight = "810px")
      : (layout.style.minHeight = "auto");
    $table.style.height = height + 'px';
    // $table.doLayout();
  }, 600);
};

export default {
  beforeMount(el, binding, vnode) {
    el.resizeListener = () => {
      doResize(el, binding, vnode);
    };

    addResizeListener(window.document.body, el.resizeListener);
  },
  mounted(el, binding, vnode) {
    doResize(el, binding, vnode);
  },
  unmounted(el) {
    const layout = document.getElementById("app");
    layout.style.minHeight = "810px";
    removeResizeListener(window.document.body, el.resizeListener);
  },
};


2.创建index.js文件:

import adaptive from './adaptive'

const install = function(Vue) {   
  // 绑定v-adaptive指令
  Vue.directive('adaptive', adaptive)
}

if (window.Vue) {
  window['adaptive'] = adaptive  
  // eslint-disable-next-line no-undef 
  Vue.use(install)
}

adaptive.install = install

export default adaptive

3.在main.js文件里引入:

import adaptive from './directive/pageDistance/index'、
app.use(adaptive)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值