Element Plus常见基础组件（二）

Link 超链接

一、Link 组件基础介绍

<el-link> 是 Element Plus 提供的链接组件，用于渲染可点击的文本链接，支持路由跳转、禁用状态、下划线控制、图标集成等功能。

二、核心 API 详解

1. Attributes（属性）

2. Slots（插槽）

3. Events（事件）

四、使用场景与代码示例

场景 1：基础文字链接

<template>
  <el-link type="primary">默认链接</el-link>
  <el-link type="success">成功链接</el-link>
</template>

场景 2：禁用状态 & 下划线控制

<el-link disabled>禁用链接</el-link>
<el-link :underline="false">无下划线链接</el-link>

场景 3：带图标的链接

<el-link icon="el-icon-edit">编辑</el-link>

<!-- 自定义图标 -->
<el-link>
  <template #icon>
    <CustomIcon />
  </template>
  自定义图标链接
</el-link>

场景 4：跳转链接

<!-- 普通跳转 -->
<el-link href="https://element-plus.org" target="_blank">
  Element Plus 官网
</el-link>

<!-- Vue Router 跳转 -->
<el-link :href="{ path: '/home' }" router>
  首页（需开启 router 属性）
</el-link>

场景 5：点击事件处理

<template>
  <el-link @click="handleClick">点我触发事件</el-link>
</template>

<script setup>
const handleClick = () => {
  console.log('Link clicked!');
};
</script>

五、高级技巧

1. 自定义链接样式

通过 class 或内联样式覆盖：

<el-link 
  style="font-weight: bold; font-size: 16px;"
  class="custom-link"
>
  自定义样式
</el-link>

<style>
.custom-link {
  margin-right: 10px;
}
.custom-link:hover {
  color: #ff0000;
}
</style>

2. 与路由深度集成

在 Vue Router 项目中，启用 router 属性实现路由跳转：

<el-link :href="{ name: 'UserProfile' }" router>
  用户资料页
</el-link>

3. 响应点击状态

结合 :active-class 控制点击效果：

.el-link:active {
  opacity: 0.7;
  transform: scale(0.98);
}

Text 文字

一、Text 组件核心 API 详解

1. type 属性

• 作用：设置文本的语义化颜色样式，用于表示不同状态（如成功、警告等）。

• 可选值：default（默认灰色）、primary（主题蓝）、success（成功绿）、warning（警告黄）、danger（错误红）、info（信息灰）。

• 用法示例：

  <el-text type="success">操作成功</el-text> <!-- 绿色文本 -->
  <el-text type="danger">账号异常</el-text>   <!-- 红色文本 -->
  

2. size 属性

• 作用：控制文本的预设尺寸，适配不同场景的视觉层次。

• 可选值：large（18px）、default（16px）、small（14px）。

• 用法示例：

  <el-text size="large">标题文本</el-text>  <!-- 大号字体 -->
  <el-text size="small">辅助说明</el-text> <!-- 小号字体 -->
  

3. truncated 属性

• 作用：当文本超出容器宽度时，自动显示省略号（...），需配合固定宽度使用。

• 类型：boolean（默认为 false）。

• 用法示例：

  <div style="width: 200px;">
    <el-text truncated>这是一段超长的文本内容，超出容器部分会被省略...</el-text>
  </div>
  

4. tag 属性

• 作用：自定义渲染的 HTML 标签，适应不同语义结构（如将文本渲染为 <p>、<h1> 等）。

• 类型：string（支持合法 HTML 标签名）。

• 用法示例：

  <el-text tag="h2">章节标题</el-text> <!-- 渲染为 <h2> 标签 -->
  <el-text tag="p">段落内容</el-text>  <!-- 渲染为 <p> 标签 -->
  

5. line-clamp 属性

• 作用：限制多行文本的最大行数，超出部分显示省略号（需结合 truncated 使用）。

• 类型：number（如 2 表示最多显示两行）。

• 用法示例：

  <el-text :line-clamp="2" truncated>
    这是多行文本内容，超过两行部分会被折叠并显示省略号...
  </el-text>
  

二、API 组合使用场景

场景 1：状态提示 + 省略号

<el-text type="warning" truncated> 
  警告：磁盘空间不足，请及时清理...
</el-text>

场景 2：自定义标签 + 尺寸控制

<el-text tag="h3" size="large" class="section-title">
  用户协议条款
</el-text>

场景 3：多行省略 + 语义化类型

<el-text type="info" :line-clamp="3" truncated>
  本条款详细说明了用户权利与义务，请仔细阅读...
</el-text>

三、进阶技巧与注意事项

1. 样式覆盖

• 全局主题色修改（覆盖 CSS 变量）：

  :root {
    --el-text-color-primary: #ff5722; /* 修改主色文本 */
  }
  

• 局部样式增强：

  <el-text class="custom-text">自定义样式</el-text>
  <style scoped>
  .custom-text {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }
  </style>
  

2. 按需引入（优化体积）

通过插件自动按需加载，减少打包体积：

// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()], // 自动引入 Text 等组件
    }),
  ],
});

3. 国际化支持

通过 config-provider 统一设置多语言文本：

<template>
  <el-config-provider :locale="zhCn">
    <el-text>已提交</el-text>
  </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
</script>

四、常见问题解决方案

1. 省略号不生效？

   • 检查容器是否设置宽度，或添加 style="width: 200px"。
   • 多行省略需同时启用 truncated 和 line-clamp。

2. 自定义标签渲染异常？

   • 避免使用自闭合标签（如 <img>），仅支持双标签如 <div>、<p>。

3. 动态修改文本样式：

   <el-text :type="status === 'error' ? 'danger' : 'success'">
     {{ message }}
   </el-text>
   

五、完整代码示例

<template>
  <!-- 基础用法 -->
  <el-text>默认文本</el-text>
  
  <!-- 状态文本 + 尺寸 -->
  <el-text type="warning" size="large">高危操作警告</el-text>
  
  <!-- 单行省略 -->
  <div style="width: 150px">
    <el-text truncated>这是一段超长的单行文本...</el-text>
  </div>
  
  <!-- 多行省略 -->
  <el-text :line-clamp="2" truncated style="width: 300px">
    多行文本超过两行将折叠，适用于长内容摘要展示。
  </el-text>
  
  <!-- 自定义标签 -->
  <el-text tag="h2" class="title">章节标题</el-text>
</template>

<style scoped>
.title {
  border-bottom: 2px solid var(--el-color-primary);
  padding-bottom: 5px;
}
</style>

Scrollbar 滚动条

一、基础用法

<el-scrollbar height="300px">
  <div v-for="i in 50" :key="i">
    第 {{ i }} 行内容（基本滚动）
  </div>
</el-scrollbar>

二、核心 API 详解

1. height

   • 设置容器固定高度

   <el-scrollbar height="200px">...</el-scrollbar>
   

2. max-height

   <el-scrollbar max-height="60vh">...</el-scrollbar>
   

3. tag (v2.4.0+)

   • 自定义外层容器标签

   <el-scrollbar tag="section">...</el-scrollbar>
   

4. always

   • 总是显示滚动条（不自动隐藏）

   <el-scrollbar always>...</el-scrollbar>
   

5. view-style

   • 自定义内容容器样式

   <el-scrollbar :view-style="{ padding: '20px' }">...</el-scrollbar>
   

6. view-class

   <el-scrollbar view-class="custom-view">...</el-scrollbar>
   

三、高级用法

1. 嵌套布局

   <el-scrollbar>
     <div class="container">
       <el-scrollbar height="200px">
         <!-- 嵌套滚动区 -->
       </el-scrollbar>
     </div>
   </el-scrollbar>
   

2. 横向滚动

   <el-scrollbar>
     <div style="white-space: nowrap;">
       <div v-for="i in 20" :key="i" style="display: inline-block; width: 200px;">
         横向内容 {{ i }}
       </div>
     </div>
   </el-scrollbar>
   

3. 动态更新内容

   const scrollbarRef = ref(null)
   const items = ref([...Array(30).keys()])
   
   const loadMore = () => {
     items.value.push(...Array(10).keys())
     nextTick(() => {
       scrollbarRef.value?.setScrollTop(10000) // 滚动到底部
     })
   }
   

   <el-scrollbar ref="scrollbarRef" height="400px">
     <div v-for="item in items">{{ item }}</div>
   </el-scrollbar>
   <el-button @click="loadMore">加载更多</el-button>
   

四、暴露的方法（Ref API）

// 滚动到指定位置
scrollbarRef.value.setScrollTop(200)

// 监听滚动事件
const handleScroll = ({ scrollTop, scrollLeft }) => {
  console.log('垂直位置:', scrollTop)
}

五、样式定制（SCSS）

// 修改滚动条轨道
.el-scrollbar__bar {
  &.is-vertical {
    width: 6px !important; // 加粗垂直滚动条
  }

  .el-scrollbar__thumb {
    background-color: #f56c6c; // 滑块颜色
    border-radius: 10px; // 滑块圆角
  }
}

// 移除水平滚动条
.el-scrollbar__bar.is-horizontal {
  display: none;
}

六、注意事项

1. 容器必须设置固定高度或最大高度才能触发滚动
2. 内容变化后可能需要调用 update() 方法重绘滚动条
3. 使用 always 属性时需配合 height/max-height

完整示例（组合使用）

<el-scrollbar
  ref="scrollbar"
  height="60vh"
  view-class="custom-view"
  @scroll="handleScroll"
>
  <template v-for="i in 100" :key="i">
    <div class="item">{{ i }}. 高级滚动内容示例</div>
  </template>
</el-scrollbar>
import { ref } from 'vue'

const scrollbar = ref(null)

const handleScroll = ({ scrollTop }) => {
  if (scrollTop > 500) {
    console.log('超过500px滚动距离')
  }
}

const scrollToPosition = () => {
  scrollbar.value?.setScrollTop(800)
}
.custom-view {
  padding: 20px;
  background: #f9f9f9;
  
  .item {
    padding: 12px;
    border-bottom: 1px dashed #eee;
    transition: background 0.3s;
    
    &:hover {
      background: #ebf5ff;
    }
  }
}

Space间距

Space 是 Element Plus 中用于高效处理布局间距的核心组件，特别适合处理表单、按钮组、卡片布局等需要均匀间距的场景。

一、基础用法

<el-space>
  <el-button>按钮1</el-button>
  <el-button>按钮2</el-button>
  <el-button>按钮3</el-button>
</el-space>

默认横向排列，间距为 16px

二、核心 API 详解

三、实用场景 & 代码示例

1. 垂直布局

<el-space direction="vertical" size="large">
  <el-card>卡片1</el-card>
  <el-card>卡片2</el-card>
</el-space>

2. 自定义间距

<!-- 统一间距 -->
<el-space :spacing="30">
  <el-tag>标签1</el-tag>
  <el-tag>标签2</el-tag>
</el-space>

<!-- 差异间距 [垂直, 水平] -->
<el-space :spacing="[20, 40]">
  <el-input placeholder="输入1"></el-input>
  <el-input placeholder="输入2"></el-input>
</el-space>

3. 自动换行

<el-space wrap :size="20" style="width: 300px">
  <el-button v-for="i in 8" :key="i">按钮{{i}}</el-button>
</el-space>

4. 分隔符

<el-space separator="|">
  <span>选项1</span>
  <span>选项2</span>
</el-space>

<!-- 自定义分隔符 -->
<el-space :separator="separator">
  <span>首页</span>
  <span>产品</span>
  <span>联系我们</span>
</el-space>

<script setup>
const separator = h('el-divider', { direction: 'vertical' })
</script>

5. 填充布局

<el-space fill style="width: 100%">
  <el-input placeholder="自适应宽度"></el-input>
  <el-button>确定</el-button>
</el-space>

<!-- 比例填充 -->
<el-space fill :fill-ratio="30">
  <el-input></el-input>
  <el-button>按钮</el-button>
</el-space>

6. 复杂对齐方案

<!-- 顶部对齐 -->
<el-space alignment="start" direction="vertical">
  <div style="height: 50px">元素1</div>
  <div>元素2</div>
</el-space>

<!-- 基线对齐（文字场景） -->
<el-space alignment="baseline">
  <h1>标题</h1>
  <span>副标题</span>
</el-space>

四、响应式尺寸设置

import { ref, onMounted } from 'vue'

const spacingSize = ref('default')

onMounted(() => {
  const media = window.matchMedia('(max-width: 768px)')
  spacingSize.value = media.matches ? 'small' : 'large'
  
  media.addEventListener('change', e => {
    spacingSize.value = e.matches ? 'small' : 'large'
  })
})
<el-space :size="spacingSize">
  <!-- 移动端小间距，PC端大间距 -->
</el-space>

五、实践技巧

1. 表单布局优化

<el-space direction="vertical">
  <el-space>
    <el-input placeholder="姓名"></el-input>
    <el-input placeholder="电话"></el-input>
  </el-space>
  <el-space>
    <el-select placeholder="省份"></el-select>
    <el-select placeholder="城市"></el-select>
  </el-space>
</el-space>

2. 列表项分隔

<el-space direction="vertical" :spacing="8">
  <div v-for="item in list" :key="item.id">
    {{ item.title }}
  </div>
</el-space>

3. 结合卡片布局

<el-space wrap :size="24">
  <el-card v-for="i in 6" :key="i" shadow="hover">
    <template #header>卡片{{i}}</template>
    内容区域
  </el-card>
</el-space>

4. 按钮组间距

<el-space :spacing="12" alignment="center">
  <el-button type="primary">提交</el-button>
  <el-button>保存草稿</el-button>
  <el-button plain>取消</el-button>
</el-space>