Element Plus 学习宝典

简体中文

English

简体中文

English

主题

Divider 分割线组件 ​

学习目标 ​

  • 掌握 Element Plus Divider 分割线组件的基础使用
  • 理解分割线在页面布局中的作用和意义
  • 学会分割线的位置控制和方向设置
  • 掌握分割线的样式定制和主题配置
  • 学会在实际项目中合理使用分割线组件
  • 理解分割线的设计原则和最佳实践

详细学习内容 ​

1. Divider 基础使用（20分钟） ​

1.1 基础分割线 ​

vue
<template>
  <div class="divider-demo">
    <h3>基础分割线</h3>
    
    <div class="content-section">
      <p>这是第一段内容，用于演示分割线的基础用法。</p>
      
      <!-- 默认分割线 -->
      <el-divider />
      
      <p>这是第二段内容，分割线将内容进行了清晰的分隔。</p>
      
      <!-- 带文字的分割线 -->
      <el-divider>分割线文字</el-divider>
      
      <p>这是第三段内容，分割线上可以添加文字说明。</p>
      
      <!-- 虚线分割线 -->
      <el-divider border-style="dashed">虚线分割线</el-divider>
      
      <p>这是第四段内容，展示虚线样式的分割线。</p>
      
      <!-- 点线分割线 -->
      <el-divider border-style="dotted">点线分割线</el-divider>
      
      <p>这是第五段内容，展示点线样式的分割线。</p>
    </div>
  </div>
</template>

<style>
.divider-demo {
  margin-bottom: 24px;
}

.content-section {
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
}

.content-section p {
  margin: 16px 0;
  line-height: 1.6;
  color: #606266;
}
</style>

1.2 分割线位置和方向 ​

vue
<template>
  <div class="divider-position-demo">
    <h3>分割线位置和方向</h3>
    
    <!-- 文字位置 -->
    <div class="position-demo">
      <h4>文字位置</h4>
      
      <p>左侧文字分割线</p>
      <el-divider content-position="left">左侧</el-divider>
      
      <p>居中文字分割线（默认）</p>
      <el-divider content-position="center">居中</el-divider>
      
      <p>右侧文字分割线</p>
      <el-divider content-position="right">右侧</el-divider>
    </div>
    
    <!-- 垂直分割线 -->
    <div class="vertical-demo">
      <h4>垂直分割线</h4>
      <div class="vertical-content">
        <span>选项一</span>
        <el-divider direction="vertical" />
        <span>选项二</span>
        <el-divider direction="vertical" />
        <span>选项三</span>
        <el-divider direction="vertical" />
        <span>选项四</span>
      </div>
      
      <div class="vertical-menu">
        <el-button text>首页</el-button>
        <el-divider direction="vertical" />
        <el-button text>产品</el-button>
        <el-divider direction="vertical" />
        <el-button text>服务</el-button>
        <el-divider direction="vertical" />
        <el-button text>关于我们</el-button>
      </div>
    </div>
  </div>
</template>

<style>
.divider-position-demo {
  margin-bottom: 24px;
}

.position-demo {
  margin-bottom: 32px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.position-demo h4 {
  margin: 0 0 16px 0;
  color: #303133;
}

.position-demo p {
  margin: 16px 0 8px 0;
  color: #606266;
}

.vertical-demo h4 {
  margin: 0 0 16px 0;
  color: #303133;
}

.vertical-content {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.vertical-content span {
  color: #606266;
  font-weight: 500;
}

.vertical-menu {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}
</style>

2. 自定义分割线样式（25分钟） ​

2.1 彩色和渐变分割线 ​

vue
<template>
  <div class="custom-divider-demo">
    <h3>自定义分割线样式</h3>
    
    <!-- 彩色分割线 -->
    <div class="color-dividers">
      <h4>彩色分割线</h4>
      
      <p>主色调分割线</p>
      <el-divider class="primary-divider">主色调</el-divider>
      
      <p>成功色分割线</p>
      <el-divider class="success-divider">成功</el-divider>
      
      <p>警告色分割线</p>
      <el-divider class="warning-divider">警告</el-divider>
      
      <p>危险色分割线</p>
      <el-divider class="danger-divider">危险</el-divider>
    </div>
    
    <!-- 渐变分割线 -->
    <div class="gradient-dividers">
      <h4>渐变分割线</h4>
      
      <p>蓝色渐变</p>
      <el-divider class="gradient-blue">蓝色渐变</el-divider>
      
      <p>紫色渐变</p>
      <el-divider class="gradient-purple">紫色渐变</el-divider>
      
      <p>彩虹渐变</p>
      <el-divider class="gradient-rainbow">彩虹渐变</el-divider>
    </div>
    
    <!-- 图标分割线 -->
    <div class="icon-dividers">
      <h4>图标分割线</h4>
      
      <p>星星分割线</p>
      <el-divider class="icon-divider">
        <el-icon><Star /></el-icon>
      </el-divider>
      
      <p>心形分割线</p>
      <el-divider class="icon-divider heart">
        <el-icon><Heart /></el-icon>
      </el-divider>
      
      <p>设置分割线</p>
      <el-divider class="icon-divider setting">
        <el-icon><Setting /></el-icon>
      </el-divider>
    </div>
  </div>
</template>

<script setup>
import { Star, Heart, Setting } from '@element-plus/icons-vue'
</script>

<style>
.custom-divider-demo {
  margin-bottom: 24px;
}

.color-dividers,
.gradient-dividers,
.icon-dividers {
  margin-bottom: 32px;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 8px;
}

.color-dividers h4,
.gradient-dividers h4,
.icon-dividers h4 {
  margin: 0 0 16px 0;
  color: #303133;
}

.color-dividers p,
.gradient-dividers p,
.icon-dividers p {
  margin: 16px 0 8px 0;
  color: #606266;
}

/* 彩色分割线样式 */
.primary-divider :deep(.el-divider__text) {
  background-color: #fafafa;
  color: #409eff;
  font-weight: 600;
}

.primary-divider :deep(.el-divider--horizontal) {
  border-top-color: #409eff;
  border-top-width: 2px;
}

.success-divider :deep(.el-divider__text) {
  background-color: #fafafa;
  color: #67c23a;
  font-weight: 600;
}

.success-divider :deep(.el-divider--horizontal) {
  border-top-color: #67c23a;
  border-top-width: 2px;
}

.warning-divider :deep(.el-divider__text) {
  background-color: #fafafa;
  color: #e6a23c;
  font-weight: 600;
}

.warning-divider :deep(.el-divider--horizontal) {
  border-top-color: #e6a23c;
  border-top-width: 2px;
}

.danger-divider :deep(.el-divider__text) {
  background-color: #fafafa;
  color: #f56c6c;
  font-weight: 600;
}

.danger-divider :deep(.el-divider--horizontal) {
  border-top-color: #f56c6c;
  border-top-width: 2px;
}

/* 渐变分割线样式 */
.gradient-blue :deep(.el-divider--horizontal) {
  border-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%) 1;
  border-top-width: 3px;
}

.gradient-blue :deep(.el-divider__text) {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.gradient-purple :deep(.el-divider--horizontal) {
  border-image: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%) 1;
  border-top-width: 3px;
}

.gradient-purple :deep(.el-divider__text) {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.gradient-rainbow :deep(.el-divider--horizontal) {
  border-image: linear-gradient(90deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #54a0ff 100%) 1;
  border-top-width: 4px;
}

.gradient-rainbow :deep(.el-divider__text) {
  background: linear-gradient(90deg, #ff6b6b 0%, #feca57 25%, #48dbfb 50%, #ff9ff3 75%, #54a0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* 图标分割线样式 */
.icon-divider :deep(.el-divider__text) {
  background-color: #fafafa;
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #409eff;
  color: #409eff;
}

.icon-divider.heart :deep(.el-divider__text) {
  border-color: #f56c6c;
  color: #f56c6c;
}

.icon-divider.setting :deep(.el-divider__text) {
  border-color: #909399;
  color: #909399;
}

.icon-divider :deep(.el-divider--horizontal) {
  border-top-color: #409eff;
}

.icon-divider.heart :deep(.el-divider--horizontal) {
  border-top-color: #f56c6c;
}

.icon-divider.setting :deep(.el-divider--horizontal) {
  border-top-color: #909399;
}
</style>

3. 实际应用场景（20分钟） ​

3.1 表单分组分割 ​

vue
<template>
  <div class="form-divider-demo">
    <h3>表单分组分割</h3>
    
    <el-form :model="formData" label-width="120px" class="demo-form">
      <!-- 基本信息 -->
      <el-divider content-position="left">
        <el-icon><User /></el-icon>
        <span style="margin-left: 8px;">基本信息</span>
      </el-divider>
      
      <el-form-item label="姓名:">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>
      
      <el-form-item label="邮箱:">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>
      
      <el-form-item label="电话:">
        <el-input v-model="formData.phone" placeholder="请输入电话" />
      </el-form-item>
      
      <!-- 地址信息 -->
      <el-divider content-position="left">
        <el-icon><Location /></el-icon>
        <span style="margin-left: 8px;">地址信息</span>
      </el-divider>
      
      <el-form-item label="省份:">
        <el-select v-model="formData.province" placeholder="请选择省份">
          <el-option label="北京" value="beijing" />
          <el-option label="上海" value="shanghai" />
          <el-option label="广东" value="guangdong" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="城市:">
        <el-input v-model="formData.city" placeholder="请输入城市" />
      </el-form-item>
      
      <el-form-item label="详细地址:">
        <el-input 
          v-model="formData.address" 
          type="textarea" 
          placeholder="请输入详细地址"
          :rows="3"
        />
      </el-form-item>
      
      <!-- 其他设置 -->
      <el-divider content-position="left">
        <el-icon><Setting /></el-icon>
        <span style="margin-left: 8px;">其他设置</span>
      </el-divider>
      
      <el-form-item label="接收通知:">
        <el-switch v-model="formData.notifications" />
      </el-form-item>
      
      <el-form-item label="公开资料:">
        <el-switch v-model="formData.public" />
      </el-form-item>
      
      <el-divider />
      
      <el-form-item>
        <el-button type="primary">保存</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { User, Location, Setting } from '@element-plus/icons-vue'

const formData = reactive({
  name: '',
  email: '',
  phone: '',
  province: '',
  city: '',
  address: '',
  notifications: true,
  public: false
})
</script>

<style>
.form-divider-demo {
  margin-bottom: 24px;
}

.demo-form {
  max-width: 600px;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>

3.2 内容区域分割 ​

vue
<template>
  <div class="content-divider-demo">
    <h3>内容区域分割</h3>
    
    <div class="article-content">
      <!-- 文章标题 -->
      <div class="article-header">
        <h2>Element Plus 设计系统</h2>
        <div class="article-meta">
          <span>作者：Element Team</span>
          <el-divider direction="vertical" />
          <span>发布时间：2024-01-15</span>
          <el-divider direction="vertical" />
          <span>阅读量：1,234</span>
        </div>
      </div>
      
      <el-divider />
      
      <!-- 文章摘要 -->
      <div class="article-summary">
        <h4>摘要</h4>
        <p>Element Plus 是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。</p>
      </div>
      
      <el-divider content-position="left">正文内容</el-divider>
      
      <!-- 文章正文 -->
      <div class="article-body">
        <h4>设计原则</h4>
        <p>一致性、反馈、效率、可控是我们设计组件库的四大原则。</p>
        
        <h4>组件特性</h4>
        <p>丰富的组件和功能，满足绝大部分网站后台需求。</p>
        
        <h4>开发体验</h4>
        <p>友好的 API 设计，自由灵活的使用方式。</p>
      </div>
      
      <el-divider border-style="dashed">相关推荐</el-divider>
      
      <!-- 相关文章 -->
      <div class="related-articles">
        <div class="related-item">
          <h5>Vue 3.0 新特性详解</h5>
          <p>深入了解 Vue 3.0 的 Composition API 和响应式系统。</p>
        </div>
        
        <el-divider direction="vertical" style="height: 60px;" />
        
        <div class="related-item">
          <h5>TypeScript 最佳实践</h5>
          <p>在 Vue 项目中使用 TypeScript 的最佳实践指南。</p>
        </div>
        
        <el-divider direction="vertical" style="height: 60px;" />
        
        <div class="related-item">
          <h5>组件库设计思路</h5>
          <p>如何设计一个易用、可维护的组件库系统。</p>
        </div>
      </div>
      
      <el-divider />
      
      <!-- 文章底部 -->
      <div class="article-footer">
        <div class="tags">
          <el-tag>Vue 3</el-tag>
          <el-tag type="success">Element Plus</el-tag>
          <el-tag type="info">组件库</el-tag>
        </div>
        
        <div class="actions">
          <el-button text><el-icon><Share /></el-icon> 分享</el-button>
          <el-divider direction="vertical" />
          <el-button text><el-icon><Star /></el-icon> 收藏</el-button>
          <el-divider direction="vertical" />
          <el-button text><el-icon><ChatDotRound /></el-icon> 评论</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Share, Star, ChatDotRound } from '@element-plus/icons-vue'
</script>

<style>
.content-divider-demo {
  margin-bottom: 24px;
}

.article-content {
  max-width: 800px;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.article-header h2 {
  margin: 0 0 12px 0;
  color: #303133;
}

.article-meta {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.article-summary {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.article-summary h4 {
  margin: 0 0 8px 0;
  color: #409eff;
}

.article-summary p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.article-body h4 {
  margin: 24px 0 12px 0;
  color: #303133;
}

.article-body p {
  margin: 0 0 16px 0;
  line-height: 1.6;
  color: #606266;
}

.related-articles {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.related-item {
  flex: 1;
}

.related-item h5 {
  margin: 0 0 8px 0;
  color: #303133;
}

.related-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #909399;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 8px;
}

.actions {
  display: flex;
  align-items: center;
}
</style>

4. 设计原则与最佳实践（15分钟） ​

4.1 分割线使用原则 ​

vue
<template>
  <div class="principles-demo">
    <h3>分割线设计原则</h3>
    
    <div class="principle-cards">
      <!-- 原则1：层次分明 -->
      <el-card class="principle-card">
        <template #header>
          <div class="card-header">
            <el-icon class="principle-icon"><Rank /></el-icon>
            <span>层次分明</span>
          </div>
        </template>
        
        <div class="principle-content">
          <p><strong>正确示例：</strong></p>
          <div class="example good">
            <h4>主标题</h4>
            <el-divider />
            <h5>副标题</h5>
            <p>内容段落...</p>
            <el-divider border-style="dashed" />
            <p>补充说明...</p>
          </div>
          
          <p><strong>错误示例：</strong></p>
          <div class="example bad">
            <h4>主标题</h4>
            <el-divider />
            <el-divider />
            <h5>副标题</h5>
            <el-divider />
            <p>内容段落...</p>
          </div>
        </div>
      </el-card>
      
      <!-- 原则2：适度使用 -->
      <el-card class="principle-card">
        <template #header>
          <div class="card-header">
            <el-icon class="principle-icon"><Scale /></el-icon>
            <span>适度使用</span>
          </div>
        </template>
        
        <div class="principle-content">
          <p><strong>建议：</strong></p>
          <ul>
            <li>避免过度使用分割线</li>
            <li>优先考虑空白间距</li>
            <li>重要内容才使用分割线</li>
            <li>保持视觉平衡</li>
          </ul>
        </div>
      </el-card>
      
      <!-- 原则3：语义明确 -->
      <el-card class="principle-card">
        <template #header>
          <div class="card-header">
            <el-icon class="principle-icon"><Document /></el-icon>
            <span>语义明确</span>
          </div>
        </template>
        
        <div class="principle-content">
          <p><strong>分割线类型：</strong></p>
          <div class="semantic-examples">
            <div class="semantic-item">
              <el-divider>章节分割</el-divider>
              <span>用于主要内容分割</span>
            </div>
            <div class="semantic-item">
              <el-divider border-style="dashed">补充信息</el-divider>
              <span>用于次要内容分割</span>
            </div>
            <div class="semantic-item">
              <el-divider border-style="dotted">装饰分割</el-divider>
              <span>用于装饰性分割</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Rank, Scale, Document } from '@element-plus/icons-vue'
</script>

<style>
.principles-demo {
  margin-bottom: 24px;
}

.principle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.principle-card {
  height: fit-content;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.principle-icon {
  margin-right: 8px;
  color: #409eff;
}

.principle-content p {
  margin: 12px 0;
  color: #606266;
}

.principle-content ul {
  margin: 12px 0;
  padding-left: 20px;
  color: #606266;
}

.principle-content li {
  margin: 8px 0;
  line-height: 1.5;
}

.example {
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.example.good {
  border: 1px solid #67c23a;
  background-color: #f0f9ff;
}

.example.bad {
  border: 1px solid #f56c6c;
  background-color: #fef0f0;
}

.example h4,
.example h5 {
  margin: 8px 0;
}

.example p {
  margin: 8px 0;
  font-size: 14px;
}

.semantic-examples {
  margin: 12px 0;
}

.semantic-item {
  margin: 16px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.semantic-item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #909399;
}
</style>

实践练习 ​

练习1：创建个人资料页面（30分钟） ​

创建一个个人资料页面，要求：

  1. 使用分割线分隔不同信息区域
  2. 实现基本信息、联系方式、技能标签等模块
  3. 合理使用不同样式的分割线
  4. 注意分割线的语义化使用

练习2：设计文章详情页（25分钟） ​

设计一个文章详情页面，包含：

  1. 文章标题和元信息
  2. 文章摘要
  3. 正文内容
  4. 相关推荐
  5. 评论区域

要求使用合适的分割线进行内容分组。

练习3：表单分组设计（20分钟） ​

创建一个复杂表单，包含多个分组：

  1. 个人信息组
  2. 联系信息组
  3. 偏好设置组
  4. 权限配置组

使用带图标的分割线进行分组。

学习资源 ​

官方文档 ​

设计参考 ​

  • Material Design 分割线规范
  • Ant Design 分割线设计
  • Human Interface Guidelines

相关组件 ​

  • Space 间距组件
  • Card 卡片组件
  • Layout 布局组件

作业 ​

基础作业（必做） ​

  1. 实现一个包含多种分割线样式的展示页面
  2. 创建一个使用分割线的表单页面
  3. 设计一个文章列表页，合理使用分割线分隔内容

进阶作业（选做） ​

  1. 实现一个自定义分割线组件，支持更多样式选项
  2. 创建一个响应式的内容页面，分割线在不同屏幕尺寸下有不同表现
  3. 设计一个主题切换功能，分割线样式随主题变化

挑战作业（高难度） ​

  1. 实现一个动态分割线组件，支持动画效果
  2. 创建一个分割线样式生成器，可以实时预览效果
  3. 设计一个基于分割线的时间轴组件

总结 ​

通过本节学习，你应该掌握：

  1. 基础使用：

    • 默认分割线的使用
    • 带文字分割线的实现
    • 不同边框样式的应用

  2. 位置控制：

    • 文字位置的设置（左、中、右）
    • 垂直分割线的使用场景
    • 在导航和菜单中的应用

  3. 样式定制：

    • 彩色分割线的实现
    • 渐变效果的应用
    • 图标分割线的设计

  4. 实际应用：

    • 表单分组的最佳实践
    • 内容区域的合理分割
    • 页面布局中的应用技巧

  5. 设计原则：

    • 层次分明的重要性
    • 适度使用的原则
    • 语义明确的必要性

分割线虽然是一个简单的组件，但在页面设计中起着重要的作用。合理使用分割线可以让页面结构更清晰，用户体验更好。在实际项目中，要根据具体的设计需求和用户场景来选择合适的分割线样式和使用方式。

Element Plus Study Guide

Copyright © 2025 edlo.cn - Element Plus Study Guide