element-ui中el-drawer 实现头部底部固定中间区域滚动

qq_42753983

已于 2023-05-12 14:33:33 修改

阅读量1.7k

点赞数 1

文章标签： ui javascript css

于 2023-05-12 14:25:39 首次发布

本文链接：https://blog.csdn.net/qq_42753983/article/details/130641510

版权

文章展示了如何在Vue.js应用中使用el-drawer组件，并通过自定义样式去掉默认的header，同时创建了包含标题和关闭按钮的demo__header结构，实现了一个无内置header的抽屉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重构el-drawer样式本身的header去掉

<el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
      <div class="demo">
		   <div class="demo__header">
			    <div class="demo__header__title">标题</div>
					<div class="demo__header__close" @click="handleClose">
						&times;
					</div>
				</div>
            </div>
            <div class="demo__body">
				<div style="height:700px">
            </div>
            <div class="demo__footer text-right"></div>
       </div>
</el-drawer>

样式如下
.demo {
	display: flex;
	flex-direction: column;
	height: 100%;
	&__header {
		flex: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 35px 20px;
		// border-bottom: 1px solid #d3d4d5;
		&__title {
			flex: auto;
			font-family: PingFangSC-Medium;
			font-size: 24px;
			color: #333333;
			letter-spacing: 0;
			color: #3ccba3;
			font-weight: bold;
		}
		&__close {
			color: #979797;
			font-size: 26px;
			flex: none;
			cursor: pointer;
		}
	}
	&__body {
		flex: auto;
		overflow-x: hidden;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 15px 20px;
	}
	&__footer {
		flex: none;
		box-sizing: border-box;
		padding: 10px 20px;
		background: #f9f8f8;
		// border: 1px solid #ededed;
		// box-shadow: 0 -1px 4px 1px rgba(0, 0, 0, 0.14);
	}
}

效果图如下