当前位置：首页 > news >正文

Element Plus常见基础组件（二）

news 2025/7/30 10:17:06

Link 超链接

一、Link 组件基础介绍

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

二、核心 API 详解

1. Attributes（属性）

属性名	类型	默认值	说明
`type`	`‘primary’	‘success’	‘warning’
`underline`	`boolean`	`true`	是否显示下划线（hover时）
`disabled`	`boolean`	`false`	是否禁用状态
`href`	`string`	-	原生 `href` 属性，设置后会渲染为 `<a>` 标签
`icon`	`string	Component`	-
`target`	`‘_blank’	‘_self’	‘_parent’

2. Slots（插槽）

插槽名	说明
`default`	链接文本内容
`icon`	自定义图标（覆盖 `icon` 属性）

3. Events（事件）

事件名	参数	说明
`click`	`(e: MouseEvent) => void`	点击链接时触发（禁用状态下不触发）

四、使用场景与代码示例

场景 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>

四、常见问题解决方案

省略号不生效？
- 检查容器是否设置宽度，或添加 style="width: 200px"。
- 多行省略需同时启用 truncated 和 line-clamp。
自定义标签渲染异常？
- 避免使用自闭合标签（如 <img>），仅支持双标签如 <div>、<p>。

动态修改文本样式：

<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 详解

height

设置容器固定高度

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

max-height

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

tag (v2.4.0+)

自定义外层容器标签

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

always
- 总是显示滚动条（不自动隐藏）
```
<el-scrollbar always>...</el-scrollbar>
```

view-style

自定义内容容器样式

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

view-class

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

三、高级用法

嵌套布局

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

横向滚动

<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>

动态更新内容

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）

方法名	说明
`setScrollTop(scrollTop)`	设置垂直滚动位置
`setScrollLeft(scrollLeft)`	设置水平滚动位置
`update()`	强制重绘滚动条

// 滚动到指定位置
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;
}

六、注意事项

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

完整示例（组合使用）

<el-scrollbarref="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 详解

属性名	类型	默认值	说明
`size`	small / default / large	default	预设间距尺寸（小/中/大）
`spacing`	number / number[]	-	自定义间距值（支持数组设置不同方向）
`direction`	horizontal / vertical	horizontal	排列方向
`alignment`	start / end / center / baseline	center	对齐方式
`wrap`	boolean	false	超出是否换行
`fill`	boolean	false	子项宽度是否填充容器
`fill-ratio`	number	100	填充比例（fill=true 时生效）
`separator`	string / VNode	-	分隔符元素

三、实用场景 & 代码示例

垂直布局

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

自定义间距

<!-- 统一间距 -->
<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>

自动换行

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

分隔符

<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>

填充布局

<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>

复杂对齐方案

<!-- 顶部对齐 -->
<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>

五、实践技巧

表单布局优化

<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>

列表项分隔

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

结合卡片布局

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

按钮组间距

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

查看全文

http://www.lryc.cn/news/603779.html