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

代码:

    
    
      我来啦!
    

脚本:

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; //关闭抽屉
    },
  },

样式:

效果图: