el-drawer 设置抽屉内容的滚动显示(非整个抽屉的滚动&包括父子组件传参)
效果图实现思路在父组件中加入要执行交互的元素与el-drawer组件,还有我们要放在el-drawer中的内容组件<template><div class="home">//执行交互的元素(这里用的是按钮)<el-button @click="drawer = true" type="primary">点我打开</el-button>// el-dr
·
效果图
实现思路
- 在父组件中加入要执行交互的元素与el-drawer组件,还有我们要放在el-drawer中的内容组件
<template>
<div class="home">
//执行交互的元素(这里用的是按钮)
<el-button @click="drawer = true" type="primary">点我打开</el-button>
// el-drawer组件
<el-drawer
:visible.sync="drawer"
:direction="direction"
size="992px"
:with-header="false"
>
// 内容组件(注意这里传参时候要加.sync)
<drawer-demo :show.sync="drawer"></drawer-demo>
</el-drawer>
</div>
</template>
<script>
// 引入内容组件
import drawerDemo from "../components/drawer-demo";
export default {
name: "Home",
data() {
return {
drawer: false,
direction: "rtl",//这里设置抽屉从哪个方向滑出
};
},
// 注册内容组件
components: { drawerDemo }
};
</script>
<style lang="less">
.home {
.el-drawer {
outline: none;
&__body {
height: 100%;
overflow: hidden;
}
}
}
</style>
- 编写内容组件,弃去原有的el-drawer中自带的header,重新编写一整套header、body和footer,这里的footer是固定的,整个中间body部分滚动由flex实现
<template>
<div class="demo">
// 内容组件中的头(包括标题和关闭图标)
<div class="demo__header">
<div class="demo__header__title">Demo</div>
<div class="demo__header__close" @click="close">×</div>
</div>
// 内容组件中的主体内容
<div class="demo__body">
<div style="height:400px">这是第一个例子</div>
<div style="height:400px">这是第二个例子</div>
</div>
// 内容组件中固定的footer
<div class="demo__footer text-right">
<el-button type="primary" size="small">上一条</el-button>
<el-button type="primary" size="small">下一条</el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
close() {
// 这里给父组件传参,用来关闭el-drawer
this.$emit("update:show", false);
},
},
}
</script>
<style lang="less">
.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: 15px 20px;
border-bottom: 1px solid #d3d4d5;
&__title {
flex: auto;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
letter-spacing: 0;
}
&__close {
color: #979797;
font-size: 22px;
flex: none;
cursor: pointer;
}
}
&__body {
flex: auto;
overflow-x: hidden;
overflow-y: auto;
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);
}
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)