el-drawer 设置抽屉内容的滚动显示(非整个抽屉的滚动&包括父子组件传参)

效果图

实现思路

1. 在父组件中加入要执行交互的元素与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>

2. 编写内容组件，弃去原有的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">&times;</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>