UI组件交互
UI组件是构建用户界面的基础元素，通过丰富的交互行为提供更好的用户体验。
常用交互组件
| 组件类型 | 交互行为 | 使用场景 |
|---|---|---|
| 按钮(Button) | 点击、悬停、按下、禁用状态 | 触发操作、提交表单、页面跳转 |
| 下拉菜单(Dropdown) | 展开/收起、选项选择、搜索过滤 | 导航菜单、选项选择、分类筛选 |
| 标签页(Tabs) | 切换内容、显示/隐藏面板 | 内容分类、功能分区、多步骤流程 |
| 模态框(Modal) | 显示/隐藏、背景遮罩、焦点管理 | 确认操作、详细信息展示、表单填写 |
组件状态管理
正常状态
组件的默认外观和行为
悬停状态
鼠标悬停时的视觉反馈
激活状态
组件被点击或选中时的状态
禁用状态
不可交互时的视觉表现
UI组件实现方式
原生JavaScript
直接操作DOM元素，手动管理组件状态
// HTML:
<div class="tabs-container">
<div class="tab-buttons">
<button class="tab-btn active" data-tab="tab1">标签1</button>
<button class="tab-btn" data-tab="tab2">标签2</button>
<button class="tab-btn" data-tab="tab3">标签3</button>
</div>
<div class="tab-content">
<div id="tab1" class="tab-panel active">内容1</div>
<div id="tab2" class="tab-panel">内容2</div>
<div id="tab3" class="tab-panel">内容3</div>
</div>
</div>
// JavaScript:
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');
tabButtons.forEach(button => {
button.addEventListener('click', handleTabClick);
});
function handleTabClick(event) {
const clickedTab = event.target;
const tabId = clickedTab.dataset.tab;
// 移除所有激活状态
tabButtons.forEach(btn => btn.classList.remove('active'));
tabPanels.forEach(panel => panel.classList.remove('active'));
// 激活当前标签
clickedTab.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
Vue.js实现
使用响应式数据管理组件状态，更简洁
<!-- Vue模板 -->
<template>
<div class="tabs-container">
<div class="tab-buttons">
<button
v-for="tab in tabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="{ 'active': activeTab === tab.id }"
class="tab-btn">
{{ tab.title }}
</button>
</div>
<div class="tab-content">
<div
v-for="tab in tabs"
:key="tab.id"
v-show="activeTab === tab.id"
class="tab-panel">
{{ tab.content }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{ id: 'tab1', title: '标签1', content: '内容1' },
{ id: 'tab2', title: '标签2', content: '内容2' },
{ id: 'tab3', title: '标签3', content: '内容3' }
]
}
}
}
</script>
<style>
.tab-panel {
/* 样式定义 */
}
</style>