效果图
直接上代码
<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>
