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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wanglei1991gao/article/details/80695033
个人分类: vue
上一篇vue组件实践-可搜索下拉框扩展
下一篇vue笔记-provide & inject(二)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭