Eelement ui Drawer抽屉插入vue-element-admin子组件页面

代码:

    <!-- 抽屉 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="closeDrawer"
      :size="drawerSize"
      :modal="false"
      :wrapperClosable="false"
    >
      <span>我来啦!</span>
    </el-drawer>

脚本:

data() {
    return {
      // 抽屉属性
      drawerTitle: "标题",
      drawer: false, // false:不显示;true:显示
      direction: "rtl", // 从右到左
      drawerSize: "0px",
    };
  },
  mounted() {
    let that = this;
    var elementResizeDetectorMaker = require("element-resize-detector");
    var erd = elementResizeDetectorMaker();
    // 获取子页面的宽度
    erd.listenTo(document.getElementById("device-main"), function (element) {
      var width = element.offsetWidth;
      that.$nextTick(() => {
        that.drawerSize = width + "px";
      });
    });
  },
methods: {
    // 新增按钮
    addDevice() {
      this.drawer = true; //打开抽屉
    },
    // 关闭抽屉
    closeDrawer() {
      this.drawer = false; //关闭抽屉
    },
  },

样式:

<style lang="scss" scoped>
::v-deep .el-drawer {
  height: calc(100% - 84px);
  margin-top: 84px;
}
::v-deep .el-drawer__wrapper{
  z-index: 8 !important;
}
</style>

效果图: