Vue+Element实现封装抽屉弹框

下面我会详细讲解一下Vue+Element实现封装抽屉弹框的完整攻略。

什么是抽屉弹框

抽屉弹框是一种常用的前端 UI 组件，它可以在页面上弹出一个包含特定内容的抽屉，常用于展示一些额外信息或者提供某些功能。

使用 Element UI 组件库

Vue+Element是目前非常流行的前端开发组合。Element UI 是一款基于 Vue.js 2.0 的饿了么 UI 库，提供了一系列优秀的组件，包括抽屉组件（Drawer）。

要使用 Element UI，我们需要先在项目中引入 Element UI 组件库，可以通过以下方式引入：

<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 Element UI 组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

封装抽屉组件

现在我们来封装一个抽屉组件，代码如下：

<template>
  <el-drawer title="Basic Drawer" :visible="visible" :direction="direction" @close="handleClose">
    <p>Here is some content...</p>
    <p>Here is some content...</p>
    <p>Here is some content...</p>
  </el-drawer>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

这个组件是一个基本的抽屉组件，可以根据传入的参数控制显示/隐藏和方向。

在父组件中使用抽屉组件

我们已经封装好了抽屉组件，现在我们需要在父组件中使用它。代码如下：

<template>
  <div>
    <el-button type="primary" @click="visible = true">Open Drawer</el-button>
    <drawer :visible="visible" @close="visible = false"></drawer>
  </div>
</template>

<script>
import Drawer from './Drawer.vue'
export default {
  components: { Drawer },
  data() {
    return {
      visible: false
    }
  }
}
</script>

这里我们通过一个按钮来打开抽屉，并使用我们封装的 Drawer 组件来显示抽屉内容。同时我们还需要通过监听 Drawer 组件的 close 事件来关闭抽屉。

示例一

现在我们来演示一下如何更改抽屉的方向。在父组件中修改 Drawer 组件的 direction 参数即可，代码如下：

<template>
  <div>
    <el-button type="primary" @click="visible = true">Open Drawer</el-button>
    <drawer :visible="visible" :direction="direction" @close="visible = false"></drawer>
  </div>
</template>

<script>
import Drawer from './Drawer.vue'
export default {
  components: { Drawer },
  data() {
    return {
      visible: false,
      direction: 'rtl'
    }
  }
}
</script>

这里我们将 direction 参数设置为 ‘rtl’，可以看到抽屉的方向从默认的左侧变成了右侧。

示例二

现在我们来演示一下如何自定义抽屉内容。在 Drawer 组件中添加一个 slot，代码如下：

<el-drawer title="Basic Drawer" :visible="visible" :direction="direction" @close="handleClose">
  <slot></slot>
</el-drawer>

然后在父组件中将需要显示的内容放在 Drawer 组件的 slot 中，代码如下：

<template>
  <div>
    <el-button type="primary" @click="visible = true">Open Drawer</el-button>
    <drawer :visible="visible" @close="visible = false">
      <p>Here is some custom content...</p>
      <p>Here is some custom content...</p>
      <p>Here is some custom content...</p>
    </drawer>
  </div>
</template>

<script>
import Drawer from './Drawer.vue'
export default {
  components: { Drawer },
  data() {
    return {
      visible: false,
    }
  }
}
</script>

这里我们像使用普通的组件一样使用 Drawer 组件，并将自己需要的内容放在 Drawer 的 slot 中。

至此，我们已经完成了Vue+Element实现封装抽屉弹框的完整攻略。