当前位置：首页 > VUE

vue实现分割线

2026-01-20 22:14:56VUE

使用 HTML 和 CSS 实现分割线

在 Vue 中，可以通过纯 HTML 和 CSS 快速实现分割线。使用 <hr> 标签是最简单的方式，结合 CSS 可以自定义样式。

<template>
  <div>
    <hr class="divider" />
  </div>
</template>

<style scoped>
.divider {
  border: none;
  height: 1px;
  background-color: #e0e0e0;
  margin: 16px 0;
}
</style>

使用组件封装分割线

将分割线封装为可复用的 Vue 组件，方便在项目中多次调用。

<template>
  <div class="divider"></div>
</template>

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

<style scoped>
.divider {
  border: none;
  height: 1px;
  background-color: #e0e0e0;
  margin: 16px 0;
}
</style>

使用时直接引入组件：

<template>
  <div>
    <Divider />
  </div>
</template>

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

export default {
  components: { Divider }
}
</script>

支持动态样式

通过 Props 传递样式参数，实现分割线的动态配置。

vue实现分割线

<template>
  <div 
    class="divider" 
    :style="{
      height: thickness + 'px',
      backgroundColor: color,
      margin: margin
    }"
  ></div>
</template>

<script>
export default {
  name: 'Divider',
  props: {
    thickness: {
      type: Number,
      default: 1
    },
    color: {
      type: String,
      default: '#e0e0e0'
    },
    margin: {
      type: String,
      default: '16px 0'
    }
  }
}
</script>

调用时传入参数：

<Divider :thickness="2" color="#ff0000" margin="24px 0" />

使用第三方 UI 库

如果项目中使用 UI 库（如 Element UI、Vuetify 或 Ant Design Vue），可以直接调用其提供的分割线组件。

以 Element UI 为例：

vue实现分割线

<template>
  <el-divider></el-divider>
</template>

<script>
import { ElDivider } from 'element-plus';

export default {
  components: { ElDivider }
}
</script>

垂直分割线

通过调整 CSS 实现垂直分割线，适用于菜单或布局分隔。

<template>
  <div class="vertical-divider"></div>
</template>

<style scoped>
.vertical-divider {
  width: 1px;
  height: 100%;
  background-color: #e0e0e0;
  margin: 0 8px;
}
</style>

虚线分割线

通过 CSS 的 border-style 属性实现虚线效果。

<template>
  <div class="dashed-divider"></div>
</template>

<style scoped>
.dashed-divider {
  border: none;
  height: 1px;
  border-top: 1px dashed #ccc;
  margin: 16px 0;
}
</style>

带文本的分割线

在分割线中间添加文本，常用于表单或标题分隔。

<template>
  <div class="divider-with-text">
    <span class="divider-text">Or</span>
  </div>
</template>

<style scoped>
.divider-with-text {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.divider-with-text::before,
.divider-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e0e0e0;
}

.divider-text {
  padding: 0 12px;
  color: #666;
}
</style>

以上方法涵盖了常见的分割线实现需求，可以根据项目需求选择合适的方式。