当前位置：首页 > VUE

vue 分隔线实现

2026-02-24 23:38:23VUE

在Vue中实现分隔线（Divider）可以通过多种方式完成，以下列举几种常见方法：

使用HTML原生标签

直接使用HTML的<hr>标签实现分隔线，适用于简单场景：

<hr class="my-divider">

通过CSS自定义样式：

.my-divider {
  border: 0;
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}

使用UI框架组件

主流UI框架如Element UI、Ant Design Vue等均提供内置分隔线组件：

Element UI示例

<el-divider></el-divider>
<!-- 带文字的分隔线 -->
<el-divider content-position="center">文字说明</el-divider>

Ant Design Vue示例

<a-divider />
<!-- 带文字的分隔线 -->
<a-divider>文字说明</a-divider>

自定义Vue组件

创建可复用的分隔线组件（如Divider.vue）：

<template>
  <div class="divider" :style="style">
    <span v-if="$slots.default" class="divider-text">
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    color: { type: String, default: '#dcdfe6' },
    height: { type: String, default: '1px' },
    margin: { type: String, default: '16px 0' }
  },
  computed: {
    style() {
      return {
        'background-color': this.color,
        height: this.height,
        margin: this.margin
      }
    }
  }
}
</script>

<style scoped>
.divider {
  position: relative;
  border: none;
}
.divider-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: white;
}
</style>

使用方式：

<Divider />
<Divider>自定义文字</Divider>
<Divider color="#f00" height="2px" margin="30px 0"/>

动态样式控制

通过Vue的响应式特性动态调整分隔线样式：

vue 分隔线实现

<template>
  <hr :style="{
    height: dividerHeight,
    backgroundColor: isDark ? '#333' : '#eee'
  }">
</template>

<script>
export default {
  data() {
    return {
      dividerHeight: '2px',
      isDark: false
    }
  }
}
</script>

以上方法可根据项目需求选择，UI框架方案适合快速开发，自定义组件则更灵活可控。