[vue3]用element封装一个抽屉组件

高山我梦口香糖

已于 2023-02-27 16:16:25 修改

阅读量1.3k

点赞数 1

分类专栏：封装文章标签： javascript vue.js 开发语言 Powered by 金山文档

于 2023-02-27 16:14:03 首次发布

本文链接：https://blog.csdn.net/Madman528/article/details/129243895

版权

封装专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js中封装一个抽屉组件，该组件常用于后台管理系统。组件支持自定义标题、大小，内容区域超出时会显示滚动条，保持底部按钮始终可见。同时，提供了打开、关闭、确认和取消等操作方法。

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

需求:因为抽屉组件在后台管理系统是非常常见的,那么封装起来怎么样?

可以传入标题,size,提交按钮的文字,传入部分即便超出范围也不会挤掉下面的按钮,会出现滚动条,如图

<template>
  <!-- 抽屉 -->
  <el-drawer :close-on-click-modal="false" v-model="drawer" :size="size" :title="title"
    :destroy-on-close="destroyOnClose">
    <div class="formDrawer">
      <!-- 传入部分 -->
      <div class="body">
        <slot></slot>
      </div>
      <!-- 传入部分 -->
      <!-- 按钮组 -->
      <div class="actions">
        <el-button @click="submit" round class="" color="orange" :loading=loading>{{ confirmText }}</el-button>
        <el-button @click="cancel" round class="">取消</el-button>
      </div>
      <!-- 按钮组 -->
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
// 定义抽屉预设
defineProps({
  title: {
    type: String
  },
  size: {
    type: String,
    default: "45%"
  },
  destroyOnClose: {
    default: false,
    type: Boolean
  },
  confirmText: {
    default: "提交",
    type: String
  }
})
//定义触发事件,就是底部2个按钮
const emit = defineEmits(['submit', 'cancel'])
const drawer = ref(false)
//抽屉的打开与关闭
const open = () => drawer.value = true
const close = () => drawer.value = false
// 抽屉的确认与取消按钮
const submit = () => emit('submit')
const cancel = () => emit('cancel')
let loading = ref(false)
//提交按钮的加载状态
const showloading = () => loading.value = true
const hideloading = () => loading.value = false
// 暴露出去
defineExpose({
  open, close, submit, cancel, showloading, hideloading
})
</script>

<style scoped>
.formDrawer {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  display: flex;
  flex-direction: column;

}

.formDrawer .body {
  /* 让body占满剩余的,这样的话下面两个按钮就自动居下了,然后给它添加超出滚动 */
  flex: 1;
  /* 超出范围就用滚动 */
  overflow-y: auto;
}

.formDrawer .actions {
  margin-bottom: 10px;
}
</style>

在外面咋用?传入结构