vue 分割线

<template>
  <div>
    <!-- 使用 el-divider 组件作为分割线 -->
    <el-divider></el-divider>

    <!-- 分割线带文字 -->
    <el-divider content-position="left">左侧文本</el-divider>
    <el-divider>居中文本</el-divider>
    <el-divider content-position="right">右侧文本</el-divider>

    <!-- 自定义样式 -->
    <el-divider direction="vertical"></el-divider>
  </div>
</template>

<script>
export default {
  name: 'DividerExample'
}
</script>

<style scoped>
/* 可以自定义样式 */
.el-divider--vertical {
  height: 2em;
}
</style>

解释说明：

1. <el-divider> 组件：这是 Element UI 提供的一个简单易用的分割线组件。

   • 不带任何属性时，它会生成一条水平的分割线。
   • content-position 属性可以设置为 left、center 或 right，用于在分割线上添加文本，并控制文本的位置。
   • direction="vertical" 可以创建垂直方向的分割线。

2. 样式自定义：通过 CSS 可以进一步自定义分割线的样式，例如调整垂直分割线的高度等。

如果你没有安装 Element UI，可以通过以下命令安装：

npm install element-ui -S

然后在项目中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);