【项目经验】elementui抽屉（从下到上方向）实现向上拉伸

效果图

直接上代码

<template>
    <div>
        <el-button @click="drawerBtn" type="primary" style="margin-left: 16px;">
            点我打开
        </el-button>

        <el-drawer title="我是标题" :modal="false" :wrapperClosable="false" :visible.sync="drawer" :with-header="false"
            :direction="btt" v-drawerDrag>
            <div class="box">
                <div class="text">bug天选之子</div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import Vue from 'vue'
Vue.directive('drawerDrag', {
    bind (el, binding, vnode, oldVnode) {
        // 抽屉可拉伸的最小高度
        let minHeight = 200;
        const dragDom = el.querySelector('.el-drawer');
        // console.log("抽屉的Dom", dragDom);
        // 创建上拉按钮并添加到抽屉里面
        const resizeELT = document.createElement("div");
        dragDom.appendChild(resizeELT);
        // 上拉按钮的样式
        resizeELT.style.cursor = 'n-resize';
        resizeELT.style.position = 'absolute';
        resizeELT.style.height = '10px';
        resizeELT.style.width = '100%';
        resizeELT.style.left = '0px';
        resizeELT.style.top = '0px';
        // resizeELT.style.background = 'red'
        // console.log(resizeELT);

        // 上边拉伸鼠标按下事件
        resizeELT.onmousedown = (e) => {
            console.log("jinlail");
            let ELoffSetTop = dragDom.offsetTop;
            let clientY = e.clientY;
            let elH = dragDom.clientHeight;
            document.onmousemove = function (e) {
                // 鼠标移动时禁止默认事件
                e.preventDefault();
                if (clientY > ELoffSetTop && clientY < ELoffSetTop + 10) {
                    // 向上拉
                    if (clientY > e.clientY) {
                        dragDom.style.height = elH + (clientY - e.clientY) + 'px';
                        console.log(dragDom.style.height);
                    }
                    // 向下拉
                    if (clientY < e.clientY) {
                        if (dragDom.clientHeight < minHeight) {
                            // 小于最小高度，不操作
                        } else {
                            dragDom.style.height = elH - (e.clientY - clientY) + 'px';
                            console.log(dragDom.style.height);
                        }
                    }
                }
            }
            // 结束时移除事件
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
})
export default {
    name: 'WorkspaceJsonAboutView',

    data () {
        return {
            drawer: false,
            btt: 'btt',
            closeFalg: false
        };
    },

    mounted () {

    },

    methods: {
        drawerBtn () {
            this.drawer = true;
        }
    },
};
</script>

<style lang="less" scoped>
// 复制的时候可以不用复制css代码
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../assets/img/火焰.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.text {
    flex: 0 0 100%;
    font-size: 50px;
    font-weight: 900;
    color: #00000000;
    text-align: center;
    font-family: 'Lato', sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-bottom: 1px solid #d4d7ff;
    border-top: 1px solid #d4d7ff;
    /*这里更换你的背景图片*/
    background: url("../assets/img/火焰.jpg");
    background-clip: text;
    -webkit-background-clip: text;
}
</style>