封装组件——抽屉drawer（vue+element）

最新推荐文章于 2024-08-16 00:53:06 发布

爱吃松果的美美

最新推荐文章于 2024-08-16 00:53:06 发布

阅读量1.3k

点赞数

分类专栏：封装组件文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/116567453

版权

本文介绍如何在Vue.js项目中结合Element UI库，封装一个可复用的抽屉组件Drawer。通过组件化实现页面功能模块的解耦，提升代码复用性和维护性。内容包括组件的结构设计、属性定义、事件处理以及如何在父组件中调用和控制抽屉的显示与隐藏。

摘要由CSDN通过智能技术生成

<template>

  <el-drawer :title="title"
             :size='size'
             :visible.sync="showDrawer"
             ref='drawer'
             destroy-on-close
             :before-close='dbeforeClose'
             :append-to-body="appendBody"
             :wrapperClosable="wrapperClosable">
    <template #title>
      <!-- <slot name="anotherTitle"></slot> -->
      <slot name="title"></slot>
    </template>

    <div class="drawer-content"
         :style="{height: footerHide?'calc(100vh - 160px)':'calc(100vh - 220px)'}">
      <slot>

      </slot>
    </div>
    <div v-if="!footerHide"
         class="mt10 drawer-footer"
         :class="footerStyle ? 'footStyle' : ''">
      <div style="width:95%; text-align:right">
        <el-form size='small'>
          <el-button size="small"