Vue3 Element Plus封装一个抽屉组件

介绍

抽屉组件是一种常用的交互方式，可以在页面上展示一部分内容并且通过滑动的方式暂时隐藏起来。在Vue3和Element Plus的基础上，我们可以很方便地封装一个抽屉组件，使其更加易于使用和定制化。

准备工作

在开始封装之前，请确保你已经安装了Vue3和Element Plus，并且建立了Vue3的项目。

npm install vue@next
npm install element-plus

功能

我们打算封装一个具有以下功能的抽屉组件：

• 可以通过传入props来设置抽屉的标题、宽度、是否可见等属性
• 提供一个插槽，用户可以在抽屉内部自定义内容
• 可以通过事件通知父组件抽屉的打开和关闭操作

实现步骤

1. 创建一个Drawer组件

在你的项目中，创建一个名为Drawer.vue的组件文件。

<template>
  <el-drawer
    :title="title"
    :width="width"
    :visible="visible"
    :before-close="beforeClose"
    @open="handleOpen"
    @close="handleClose"
  >
    <slot></slot>
  </el-drawer>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Drawer',
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '30%'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['open', 'close'],
  setup(props, { emit }) {
    const visibleRef = ref(props.visible);

    watch(() => props.visible, (newVal) => {
      visibleRef.value = newVal;
    });

    const beforeClose = (done) => {
      emit('close');
      done();
    };

    const handleOpen = () => {
      emit('open');
    };

    const handleClose = () => {
      emit('close');
    };

    return {
      visibleRef,
      beforeClose,
      handleOpen,
      handleClose
    };
  }
};
</script>

2. 使用封装的Drawer组件

在你的父组件中使用封装好的Drawer组件：

<template>
  <div>
    <el-button @click="showDrawer">打开抽屉</el-button>
    <Drawer
      :visible="visible"
      :title="title"
      :width="width"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- 自定义内容 -->
      <div style="padding: 20px;">
        <p>这是一个抽屉组件</p>
      </div>
    </Drawer>
  </div>
</template>

<script>
import Drawer from './Drawer.vue';

export default {
  components: {
    Drawer
  },
  data() {
    return {
      visible: false,
      title: '抽屉标题',
      width: '50%'
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    handleOpen() {
      console.log('抽屉已打开');
    },
    handleClose() {
      this.visible = false;
      console.log('抽屉已关闭');
    }
  }
};
</script>

3. 样式美化

在最外层的Vue组件中，可以通过为抽屉组件设置一些样式来美化它。比如，可以设置抽屉的宽度、背景颜色等。

<style>
.drawer-wrapper {
  background-color: #f0f0f0;
}
</style>

4. 编写文档

在你的项目中，可以编写一份文档来介绍如何使用这个封装好的抽屉组件，并提供一些代码示例。

# 抽屉组件使用文档

## 安装

首先，你需要安装Vue和Element Plus。

npm install vue@next npm install element-plus

## 引入组件

你可以在需要使用抽屉组件的地方引入它。

```vue
<template>
  ...
  <Drawer
    :visible="visible"
    :title="title"
    width="50%"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 自定义内容 -->
    ...
  </Drawer>
  ...
</template>

<script>
import Drawer from './Drawer.vue';

export default {
  components: {
    Drawer
  },
  data() {
    return {
      visible: false,
      title: '抽屉标题'
    };
  },
  methods: {
    handleOpen() {
      console.log('抽屉已打开');
    },
    handleClose() {
      this.visible = false;
      console.log('抽屉已关闭');
    }
  }
};
</script>

属性

事件

## 总结

使用Vue3和Element Plus，我们可以很方便地封装一个抽屉组件。通过传入props设置抽屉的属性，并提供插槽供用户自定义内容，还可以通过事件通知父组件抽屉的打开和关闭操作。这样，我们可以更加轻松地使用和定制化抽屉组件，提高开发效率。

本文来自极简博客，作者：开发者故事集，转载请注明原文链接：Vue3 Element Plus封装一个抽屉组件