【项目经验】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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/100428.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LEARN GIT

概念 基础概念 本地电脑 代码区&#xff1a;工作区间&#xff0c;放代码的地方 暂存区&#xff1a;git所管理的暂存区域 本地仓库&#xff1a;git所管理的本机的硬盘区域 远程电脑 远程仓库&#xff1a;github、gitee 代码提交管理的过程 代码区------->暂存区-------&…

Python 套接字编程完整指南

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 连接设备以交换信息是网络的全部意义所在。套接字是有效网络通信的重要组成部分&#xff0c;因为它们是用于通过本地或全球网络以及同一台计算机上的不同进程在设备之间传输消息的基本概念。它们提供了一个低级接口&am…

视频监控/视频汇聚/安防视频监控平台EasyCVR如何将默认快照的raw格式改为jpg/base64格式?

视频监控/视频汇聚/安防视频监控平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频云存储EasyCVR平台能在复…

电梯五方对讲接口说明 Sip五方对讲使用说明

1.2/4线接线模块输出接口;接4方对讲设备:12V&#xff0c;2/4线接线模块供电输入 -:GND&#xff0c;接地 R二/四线R Li二四线L 2.RS-485接口:预留援口&#xff0c;可接读卡器、楼层控制器、探头&#xff0c;需要软件额外开发实现。 3.短路输出接口2:对应短路输入接口&#x…

【AIGC专题】Stable Diffusion 从入门到企业级实战0403

一、前言 本章是《Stable Diffusion 从入门到企业级实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》第03节&#xff0c; 利用Stable Diffusion ControlNet Canny模型精准控制图像生成。本部分内容&#xff0c;位于整个Stable Diffusion生态…

【易售小程序项目】修改“我的”界面前端实现;查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】

文章目录 “我的”界面修改效果界面实现界面整体代码 查看已发布商品界面效果商品数据表后端上架、下架商品ControllerMapper 界面整体代码back方法 编辑商品、商品发布、保存草稿后端商品校验方法Controller 页面整体代码 同项目其他文章 “我的”界面修改 效果 界面实现 界…

【算法】冒泡排序

冒泡排序 冒泡排序代码实现代码优化 排序&#xff1a; 排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a; 假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&…

Lesson5-2:OpenCV视频操作---视频追踪

学习目标 理解meanshift的原理知道camshift算法能够使用meanshift和Camshift进行目标追踪 1.meanshift 1.1原理 m e a n s h i f t meanshift meanshift算法的原理很简单。假设你有一堆点集&#xff0c;还有一个小的窗口&#xff0c;这个窗口可能是圆形的&#xff0c;现在你可…

eclipse进入断点之后,一直卡死,线程一直在运行【记录一种情况】

问题描述: 一直卡死在某个断点处&#xff0c;取消断点也是卡死在这边的进程处。 解决方式&#xff1a; 将JDK的使用内存进行了修改 ① 打开eclipse&#xff0c;window->preference->Java->Installed JREs&#xff0c;选中使用的jdk然后点击右侧的edit&#xff0c;在…

C++初阶:C++入门

目录 一.iostream文件 二.命名空间 2.1.命名空间的定义 2.2.命名空间的使用 三.C的输入输出 四.缺省参数 4.1.缺省参数概念 4.2.缺省参数分类 4.3.缺省参数注意事项 4.4.缺省参数用途 五.函数重载 5.1.重载函数概念 5.2.C支持函数重载的原理--名字修饰(name Mangl…

Socks5 与 HTTP 代理在网络安全中的应用

目录 Socks5和HTTP代理在网络安全中的应用。 Socks5代理和HTTP代理的优点和缺点。 选择合适的代理IP需要考虑的因素&#xff1a; 总结 在网络安全领域中&#xff0c;Socks5和HTTP代理都扮演着重要的角色。作为两种不同的代理技术&#xff0c;它们在网络安全中的应用各有特点…

界面控件DevExpress WPF(v23.2)下半年发展路线图

本文主要概述了DevExpress官方在下半年&#xff08;v23.2&#xff09;中一些与DevExpress WPF相关的开发计划。 通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 DevExpress …