element UI 关于el-drawer抽屉中的‘生命周期’顺序,以及什么时机可以获取到内部元素

807 阅读1分钟

免责声明:标题里的生命周期带引号,因为感觉和vue的生命周期有点相似。

阅读须知:下面两组代码只有 对destroy-on-close属性的处理有区别,一个是 true,一个是false
在每组对照图片中都能发现我打开关闭el-drawer抽屉两次,主要是为了查看第二次打开抽屉,open 能否获取抽屉的子元素

    <el-drawer
      title="el-抽屉"
      :visible.sync="showDrawer"
      direction="rtl"
      :before-close="(done)=>{mycon('before-close');done()}"
      @open="mycon('open')"
      @opened="mycon('opened')"
      @close="mycon('colose')"
      @closed="mycon('colosed')"
    >
    </el-drawer>

image.png 小结一下:

如果destroy-on-close = false,即在关闭 Drawer 之后子元素全部不销毁,那么在closed,以及后续open中都可以获取到抽屉子元素

    <el-drawer
      title="el-抽屉"
      :visible.sync="showDrawer"
      direction="rtl"
      destroy-on-close
      :before-close="(done)=>{mycon('before-close');done()}"
      @open="mycon('open')"
      @opened="mycon('opened')"
      @close="mycon('colose')"
      @closed="mycon('colosed')"
    >
    </el-drawer>

image.png

小结一下:

如果destroy-on-close = true,即在关闭 Drawer 之后子元素全部销毁,那么在closed,以及后续open中都不可以获取到抽屉子元素