vue-设置元素初始高度指令

在web开发中，可能会接收到UI要求的页面元素的高度需要沾满满屏的需求，本文就在此需求的驱动下产生

一、自定义指令代码：

class InitScreenH {

    /**
     * 构造函数
     */
    constructor() {
        this.clasName = 'InitScreenH';
    }

    get getClassName() {
        return this.clasName;
    }

    set setClassName(name) {
        this.clasName = name;
    }

    static install(Vue, options) {
        Vue.directive('init-screen-h', {
            bind (el, binding, vnode, oldVnode) {
                //偏差高度，比如header的高度
                let offsetH;
                offsetH = binding.value?binding.value:0;
                //计算并设置el的高度
                el.style.minHeight = window.innerHeight - offsetH + 'px';
            }
        });
    }

}

export default InitScreenH;

二、使用

import InitScreenH from '@/wishstack-web/directive/InitScreenH'
Vue.use(InitScreenH);

<div v-init-screen-h="125"></div>