仿写一个el-divider，轻松玩转前端分隔线组件

2024-01-31 10:48:10

在前端开发中，分隔线组件是一种常见的元素，它可以用来将不同内容区域分隔开来，使页面布局更加清晰美观。Element UI 中的 El-divider 组件就是一种常用的分隔线组件，它提供了丰富的属性和方法，可以满足不同场景下的使用需求。

仿写 El-divider 组件

1. 项目初始化

首先，我们需要创建一个新的项目并安装 Element UI。可以使用以下命令：

npx create-vue-app el-divider-demo
cd el-divider-demo
npm install element-ui

2. 组件开发

接下来，我们可以开始开发 El-divider 组件。在 src/components 目录下创建一个新的文件 ElDivider.vue，并在其中写入以下代码：

<template>
  <div class="el-divider">
    <span class="el-divider__line"></span>
    <span class="el-divider__text" v-if="text">{{ text }}</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ElDivider',
  props: {
    text: {
      type: String,
      default: ''
    },
    direction: {
      type: String,
      default: 'horizontal'
    }
  },
  computed: {
    dividerClass() {
      return {
        'el-divider--horizontal': this.direction === 'horizontal',
        'el-divider--vertical': this.direction === 'vertical'
      }
    }
  }
});
</script>

<style lang="scss">
.el-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.el-divider__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e6e6e6;
}

.el-divider__text {
  position: relative;
  padding: 0 10px;
  color: #606266;
  background-color: #fff;
}

.el-divider--horizontal {
  flex-direction: row;
}

.el-divider--vertical {
  flex-direction: column;
  height: 100%;
}
</style>

3. 使用组件

在 src/App.vue 文件中，我们可以使用刚刚开发的 El-divider 组件。

<template>
  <div class="app">
    <el-divider>默认分割线</el-divider>
    <el-divider text="带文字的分割线"></el-divider>
    <el-divider direction="vertical">垂直分割线</el-divider>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App'
});
</script>

<style lang="scss">
.app {
  padding: 20px;
}
</style>