You've already forked pure-component
782 lines
34 KiB
HTML
782 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>UI组件库使用示例</title>
|
|
<script src="index.js"></script>
|
|
<style>
|
|
:root {
|
|
--primary-color: #3297f3;
|
|
--secondary-color: #7983ff;
|
|
--success-color: #4caf50;
|
|
--warning-color: #ff9800;
|
|
--danger-color: #f44336;
|
|
--light-bg: #f5f7fa;
|
|
--dark-text: #333;
|
|
--light-text: #666;
|
|
--border-radius: 8px;
|
|
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f0f2f5;
|
|
color: var(--dark-text);
|
|
line-height: 1.6;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
color: white;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
opacity: 0.9;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.components-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.component-card {
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
padding: 25px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.component-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.component-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.component-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.component-title {
|
|
font-size: 1.4rem;
|
|
color: var(--dark-text);
|
|
}
|
|
|
|
.component-description {
|
|
color: var(--light-text);
|
|
margin-bottom: 20px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.component-demo {
|
|
background: var(--light-bg);
|
|
padding: 20px;
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 20px;
|
|
min-height: 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.code-block {
|
|
background: #2d2d2d;
|
|
color: #f8f8f2;
|
|
border-radius: var(--border-radius);
|
|
padding: 15px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9rem;
|
|
overflow-x: auto;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.code-comment {
|
|
color: #75715e;
|
|
}
|
|
|
|
.code-tag {
|
|
color: #f92672;
|
|
}
|
|
|
|
.code-attr {
|
|
color: #a6e22e;
|
|
}
|
|
|
|
.code-value {
|
|
color: #e6db74;
|
|
}
|
|
|
|
.btn {
|
|
background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
margin: 5px;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.example-row {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin: 10px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
margin-top: 40px;
|
|
color: var(--light-text);
|
|
font-size: 0.9rem;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.components-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.component-demo {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>UI组件库使用示例</h1>
|
|
<p class="subtitle">展示自定义Web组件库中搜索框、下拉框、泡泡列表、对话框、模态框、选项卡、提示条和加载中组件的用法</p>
|
|
</header>
|
|
|
|
<div class="components-grid">
|
|
<!-- 搜索框组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">S</div>
|
|
<h2 class="component-title">搜索框 (ui-search)</h2>
|
|
</div>
|
|
<p class="component-description">支持实时搜索、清除功能、回车触发和自定义样式。适用于任何需要用户输入的搜索场景。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-search id="demoSearch" placeholder="搜索产品..."></ui-search>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="document.getElementById('demoSearch').clear()">清空搜索框</button>
|
|
<button class="btn" onclick="toggleSearchDisabled()">切换禁用状态</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-search</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"productSearch"</span><br />
|
|
<span class="code-attr">placeholder</span>=<span class="code-value">"搜索产品..."</span><br />
|
|
<span class="code-attr">max</span>=<span class="code-value">"50"</span><br />
|
|
></<span class="code-tag">ui-search</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 带前缀/后缀插槽 --></span><br />
|
|
<<span class="code-tag">ui-search</span> <span class="code-attr">placeholder</span>=<span class="code-value">"带图标的搜索"</span>><br />
|
|
<<span class="code-tag">span</span> <span class="code-attr">slot</span>=<span class="code-value">"prefix"</span>>🔍</<span class="code-tag">span</span>><br />
|
|
<<span class="code-tag">button</span> <span class="code-attr">slot</span>=<span class="code-value">"append"</span>>搜索</<span class="code-tag">button</span>><br />
|
|
</<span class="code-tag">ui-search</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 下拉框组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">D</div>
|
|
<h2 class="component-title">下拉选择框 (ui-select)</h2>
|
|
</div>
|
|
<p class="component-description">提供美观的下拉选择功能，支持选项分组、自定义样式和响应式设计。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-select id="demoSelect" list="选项一,选项二,选项三" value="0,1,2" placeholder="请选择..."></ui-select>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="changeSelectOptions()">更改选项</button>
|
|
<button class="btn" onclick="toggleSelectDisabled()">切换禁用状态</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-select</span> <br />
|
|
<span class="code-attr">list</span>=<span class="code-value">"苹果,香蕉,橙子"</span><br />
|
|
<span class="code-attr">value</span>=<span class="code-value">"apple,banana,orange"</span><br />
|
|
<span class="code-attr">placeholder</span>=<span class="code-value">"选择水果"</span><br />
|
|
></<span class="code-tag">ui-select</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 分组选项 --></span><br />
|
|
<<span class="code-tag">ui-select</span> <span class="code-attr">placeholder</span>=<span class="code-value">"选择城市"</span>><br />
|
|
<<span class="code-tag">dt</span>>中国</<span class="code-tag">dt</span>><br />
|
|
<<span class="code-tag">dd</span>>北京</<span class="code-tag">dd</span>><br />
|
|
<<span class="code-tag">dd</span>>上海</<span class="code-tag">dd</span>><br />
|
|
<<span class="code-tag">dt</span>>美国</<span class="code-tag">dt</span>><br />
|
|
<<span class="code-tag">dd</span>>纽约</<span class="code-tag">dd</span>><br />
|
|
<<span class="code-tag">dd</span>>洛杉矶</<span class="code-tag">dd</span>><br />
|
|
</<span class="code-tag">ui-select</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 泡泡列表组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">B</div>
|
|
<h2 class="component-title">泡泡列表 (ui-bubble-list)</h2>
|
|
</div>
|
|
<p class="component-description">用于展示可选择的标签式选项，支持多行布局、自定义大小和响应式设计。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-bubble-list id="demoBubbles" list="红色,蓝色,绿色" rows="2"></ui-bubble-list>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="changeBubbleOptions()">更改选项</button>
|
|
<button class="btn" onclick="document.getElementById('demoBubbles').setAttribute('current', '1')">选择第二个</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-bubble-list</span> <br />
|
|
<span class="code-attr">list</span>=<span class="code-value">"小,中,大"</span><br />
|
|
<span class="code-attr">value</span>=<span class="code-value">"sm,md,lg"</span><br />
|
|
<span class="code-attr">current</span>=<span class="code-value">"1"</span><br />
|
|
></<span class="code-tag">ui-bubble-list</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 控制行数和大小 --></span><br />
|
|
<<span class="code-tag">ui-bubble-list</span> <br />
|
|
<span class="code-attr">list</span>=<span class="code-value">"选项1,选项2,选项3,选项4,选项5"</span><br />
|
|
<span class="code-attr">rows</span>=<span class="code-value">"2"</span><br />
|
|
<span class="code-attr">size</span>=<span class="code-value">"100px"</span><br />
|
|
></<span class="code-tag">ui-bubble-list</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 对话框组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">A</div>
|
|
<h2 class="component-title">对话框 (ui-dialog)</h2>
|
|
</div>
|
|
<p class="component-description">用于重要操作确认、信息展示或用户输入，支持自定义按钮和内容插槽。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-dialog id="demoDialog" subtitle="操作确认" content="确定要执行此操作吗？" hidden="true"></ui-dialog>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="showDemoDialog()">显示对话框</button>
|
|
<button class="btn btn-outline" onclick="showCustomDialog()">自定义对话框</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-dialog</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"confirmDialog"</span><br />
|
|
<span class="code-attr">subtitle</span>=<span class="code-value">"确认删除"</span><br />
|
|
<span class="code-attr">content</span>=<span class="code-value">"确定要删除此项吗？此操作不可撤销。"</span><br />
|
|
<span class="code-attr">hidden</span>=<span class="code-value">"true"</span><br />
|
|
></<span class="code-tag">ui-dialog</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 自定义内容 --></span><br />
|
|
<<span class="code-tag">ui-dialog</span> <span class="code-attr">id</span>=<span class="code-value">"customDialog"</span> <span class="code-attr">hidden</span>=<span class="code-value">"true"</span>><br />
|
|
<<span class="code-tag">span</span> <span class="code-attr">slot</span>=<span class="code-value">"title"</span>>自定义标题</<span class="code-tag">span</span>><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">slot</span>=<span class="code-value">"content"</span>><br />
|
|
<<span class="code-tag">p</span>>这是自定义内容区域</<span class="code-tag">p</span>><br />
|
|
<<span class="code-tag">input</span> <span class="code-attr">type</span>=<span class="code-value">"text"</span> <span class="code-attr">placeholder</span>=<span class="code-value">"输入内容"</span>><br />
|
|
</<span class="code-tag">div</span>><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">slot</span>=<span class="code-value">"button"</span>><br />
|
|
<<span class="code-tag">button</span> <span class="code-attr">class</span>=<span class="code-value">"dialog-btn"</span>>自定义按钮</<span class="code-tag">button</span>><br />
|
|
</<span class="code-tag">div</span>><br />
|
|
</<span class="code-tag">ui-dialog</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模态框组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">M</div>
|
|
<h2 class="component-title">模态框 (ui-modal)</h2>
|
|
</div>
|
|
<p class="component-description">用于展示重要信息或表单，背景模糊效果，支持平滑动画过渡。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-modal id="demoModal" subtitle="系统消息" content="操作成功完成！" hidden="true"></ui-modal>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="showDemoModal()">显示模态框</button>
|
|
<button class="btn" onclick="showModalWithContent()">带长内容模态框</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-modal</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"infoModal"</span><br />
|
|
<span class="code-attr">subtitle</span>=<span class="code-value">"系统通知"</span><br />
|
|
<span class="code-attr">content</span>=<span class="code-value">"您的账户已成功更新。"</span><br />
|
|
<span class="code-attr">hidden</span>=<span class="code-value">"true"</span><br />
|
|
></<span class="code-tag">ui-modal</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 自定义内容 --></span><br />
|
|
<<span class="code-tag">ui-modal</span> <span class="code-attr">id</span>=<span class="code-value">"customModal"</span> <span class="code-attr">hidden</span>=<span class="code-value">"true"</span>><br />
|
|
<<span class="code-tag">span</span> <span class="code-attr">slot</span>=<span class="code-value">"title"</span>>用户反馈</<span class="code-tag">span</span>><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">slot</span>=<span class="code-value">"content"</span>><br />
|
|
<<span class="code-tag">textarea</span> <span class="code-attr">placeholder</span>=<span class="code-value">"请输入您的反馈..."</span>></<span class="code-tag">textarea</span>><br />
|
|
</<span class="code-tag">div</span>><br />
|
|
</<span class="code-tag">ui-modal</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 选项卡组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">T</div>
|
|
<h2 class="component-title">选项卡 (ui-tab)</h2>
|
|
</div>
|
|
<p class="component-description">用于内容分组和导航，支持描述文本和自定义高亮颜色。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-tab id="demoTab" list="基本信息>个人资料|安全设置>账户安全|通知>消息提醒"></ui-tab>
|
|
<div id="tabContent" style="padding: 15px; text-align: center"> 选项卡内容区域 </div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-tab</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"mainTab"</span><br />
|
|
<span class="code-attr">list</span>=<span class="code-value">"首页|产品|服务|关于"</span><br />
|
|
></<span class="code-tag">ui-tab</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 带描述的选项卡 --></span><br />
|
|
<<span class="code-tag">ui-tab</span> <br />
|
|
<span class="code-attr">list</span>=<span class="code-value">"选项1>描述1|选项2>描述2|选项3>描述3"</span><br />
|
|
></<span class="code-tag">ui-tab</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 内容区域示例 --></span><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">id</span>=<span class="code-value">"tab1Content"</span>>选项卡1内容</<span class="code-tag">div</span>><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">id</span>=<span class="code-value">"tab2Content"</span> <span class="code-attr">style</span>=<span class="code-value">"display:none"</span>>选项卡2内容</<span
|
|
class="code-tag"
|
|
>div</span
|
|
>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提示条组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">N</div>
|
|
<h2 class="component-title">提示条 (ui-tip)</h2>
|
|
</div>
|
|
<p class="component-description">用于显示操作反馈信息，支持多种类型(info/success/warn/error)和自动消失。</p>
|
|
|
|
<div class="component-demo">
|
|
<ui-tip id="demoTip" content="这是一个提示消息" hidden="true"></ui-tip>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="showInfoTip()">信息提示</button>
|
|
<button class="btn" style="background: var(--success-color)" onclick="showSuccessTip()">成功提示</button>
|
|
<button class="btn" style="background: var(--warning-color)" onclick="showWarningTip()">警告提示</button>
|
|
<button class="btn" style="background: var(--danger-color)" onclick="showErrorTip()">错误提示</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 基本用法 --></span><br />
|
|
<<span class="code-tag">ui-tip</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"infoTip"</span><br />
|
|
<span class="code-attr">content</span>=<span class="code-value">"操作成功！"</span><br />
|
|
<span class="code-attr">type</span>=<span class="code-value">"success"</span><br />
|
|
<span class="code-attr">hidden</span>=<span class="code-value">"true"</span><br />
|
|
<span class="code-attr">timeout</span>=<span class="code-value">"3000"</span><br />
|
|
></<span class="code-tag">ui-tip</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 自定义图标 --></span><br />
|
|
<<span class="code-tag">ui-tip</span> <span class="code-attr">id</span>=<span class="code-value">"customTip"</span> <span class="code-attr">hidden</span>=<span class="code-value">"true"</span>><br />
|
|
<<span class="code-tag">span</span> <span class="code-attr">slot</span>=<span class="code-value">"prefix"</span>>🚀</<span class="code-tag">span</span>><br />
|
|
<<span class="code-tag">span</span> <span class="code-attr">slot</span>=<span class="code-value">"content"</span>>自定义图标提示</<span class="code-tag">span</span>><br />
|
|
</<span class="code-tag">ui-tip</span>>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载中组件 -->
|
|
<div class="component-card">
|
|
<div class="component-header">
|
|
<div class="component-icon">L</div>
|
|
<h2 class="component-title">加载指示器 (ui-loading)</h2>
|
|
</div>
|
|
<p class="component-description">用于数据加载、操作等待等场景，支持自定义内容和内联/全局模式。</p>
|
|
|
|
<div class="component-demo" style="position: relative; min-height: 200px">
|
|
<ui-loading id="demoLoading" content="加载中..." hidden="true"></ui-loading>
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="showLoading()">显示加载指示器</button>
|
|
<button class="btn" onclick="showInlineLoading()">内联加载</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<span class="code-comment"><!-- 全屏加载 --></span><br />
|
|
<<span class="code-tag">ui-loading</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"globalLoading"</span><br />
|
|
<span class="code-attr">content</span>=<span class="code-value">"正在加载数据..."</span><br />
|
|
<span class="code-attr">hidden</span>=<span class="code-value">"true"</span><br />
|
|
></<span class="code-tag">ui-loading</span>><br /><br />
|
|
|
|
<span class="code-comment"><!-- 内联加载 --></span><br />
|
|
<<span class="code-tag">div</span> <span class="code-attr">style</span>=<span class="code-value">"position:relative; height:100px;"</span>><br />
|
|
<<span class="code-tag">ui-loading</span> <br />
|
|
<span class="code-attr">id</span>=<span class="code-value">"inlineLoading"</span><br />
|
|
<span class="code-attr">content</span>=<span class="code-value">"处理中..."</span><br />
|
|
<span class="code-attr">hidden</span>=<span class="code-value">"true"</span><br />
|
|
<span class="code-attr">inline</span>=<span class="code-value">"true"</span><br />
|
|
></<span class="code-tag">ui-loading</span>><br />
|
|
</<span class="code-tag">div</span>>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-card">
|
|
<h2 style="text-align: center; margin-bottom: 20px">API请求器使用示例</h2>
|
|
<div class="example-row">
|
|
<button class="btn" onclick="sendGetRequest()">发送GET请求</button>
|
|
<button class="btn" onclick="sendPostRequest()">发送POST请求</button>
|
|
<button class="btn" style="background: var(--warning-color)" onclick="abortRequest()">中止请求</button>
|
|
</div>
|
|
<div id="apiResult" class="code-block" style="min-height: 100px; margin-top: 15px"> 请求结果将显示在这里... </div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>UI组件库 © 2023 | 提供丰富的Web组件和API请求功能</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 初始化UI组件
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const registry = ['ui-search', 'ui-select', 'ui-loading', 'ui-bubble-list', 'ui-dialog', 'ui-modal', 'ui-tab', 'ui-tip']
|
|
const ui = new UI(registry)
|
|
|
|
// 选项卡切换事件
|
|
document.getElementById('demoTab').addEventListener('change', function (e) {
|
|
document.getElementById('tabContent').innerText = `切换到: ${e.detail.innerText}`
|
|
})
|
|
|
|
// 搜索框事件
|
|
document.getElementById('demoSearch').addEventListener('enter', function (e) {
|
|
showInfoTip(`正在搜索: ${e.detail}`)
|
|
})
|
|
|
|
// 下拉框事件
|
|
document.getElementById('demoSelect').addEventListener('change', function (e) {
|
|
showInfoTip(`已选择: ${e.detail.innerText}`)
|
|
})
|
|
|
|
// 泡泡列表事件
|
|
document.getElementById('demoBubbles').addEventListener('change', function (e) {
|
|
showInfoTip(`已选择: ${e.detail.selected}`)
|
|
})
|
|
})
|
|
|
|
// 搜索框禁用状态切换
|
|
function toggleSearchDisabled() {
|
|
const search = document.getElementById('demoSearch')
|
|
const isDisabled = search.getAttribute('disabled') === 'true'
|
|
search.setAttribute('disabled', !isDisabled)
|
|
}
|
|
|
|
// 下拉框禁用状态切换
|
|
function toggleSelectDisabled() {
|
|
const select = document.getElementById('demoSelect')
|
|
const isDisabled = select.getAttribute('disabled') === 'true'
|
|
select.setAttribute('disabled', !isDisabled)
|
|
}
|
|
|
|
// 更改下拉框选项
|
|
function changeSelectOptions() {
|
|
const select = document.getElementById('demoSelect')
|
|
select.setAttribute('list', '红色,绿色,蓝色,黄色')
|
|
select.setAttribute('value', 'red,green,blue,yellow')
|
|
showInfoTip('下拉框选项已更新')
|
|
}
|
|
|
|
// 更改泡泡列表选项
|
|
function changeBubbleOptions() {
|
|
const bubbles = document.getElementById('demoBubbles')
|
|
bubbles.setAttribute('list', '小号,中号,大号,特大号')
|
|
bubbles.setAttribute('value', 'S,M,L,XL')
|
|
showInfoTip('泡泡选项已更新')
|
|
}
|
|
|
|
// 显示对话框
|
|
function showDemoDialog() {
|
|
const dialog = document.getElementById('demoDialog')
|
|
dialog.confirm = function () {
|
|
showSuccessTip('操作已确认')
|
|
}
|
|
dialog.cancel = function () {
|
|
showInfoTip('操作已取消')
|
|
}
|
|
dialog.show()
|
|
}
|
|
|
|
// 显示自定义对话框
|
|
function showCustomDialog() {
|
|
const dialog = document.createElement('ui-dialog')
|
|
dialog.setAttribute('subtitle', '自定义对话框')
|
|
dialog.setAttribute('hidden', 'false')
|
|
|
|
const content = document.createElement('div')
|
|
content.slot = 'content'
|
|
content.innerHTML = `
|
|
<p>这是一个完全动态创建的对话框</p>
|
|
<p>您可以在其中添加任何自定义内容</p>
|
|
<input type="text" placeholder="输入您的名字" style="padding: 8px; width: 100%; margin: 10px 0; border-radius: 4px; border: 1px solid #ddd;">
|
|
`
|
|
|
|
dialog.appendChild(content)
|
|
|
|
dialog.confirm = function () {
|
|
showSuccessTip('自定义对话框已确认')
|
|
document.body.removeChild(dialog)
|
|
}
|
|
|
|
dialog.cancel = function () {
|
|
showInfoTip('自定义对话框已取消')
|
|
document.body.removeChild(dialog)
|
|
}
|
|
|
|
document.body.appendChild(dialog)
|
|
dialog.show()
|
|
}
|
|
|
|
// 显示模态框
|
|
function showDemoModal() {
|
|
const modal = document.getElementById('demoModal')
|
|
modal.open()
|
|
|
|
// 3秒后自动关闭
|
|
setTimeout(() => modal.close(), 3000)
|
|
}
|
|
|
|
// 显示带长内容的模态框
|
|
function showModalWithContent() {
|
|
const modal = document.createElement('ui-modal')
|
|
modal.setAttribute('subtitle', '详细内容')
|
|
modal.setAttribute('hidden', 'false')
|
|
|
|
const content = document.createElement('div')
|
|
content.slot = 'content'
|
|
content.innerHTML = `
|
|
<h3>项目详情</h3>
|
|
<p>这是一个包含详细信息的模态框，可以展示大量内容。</p>
|
|
<p>用户需要仔细阅读并确认这些信息。</p>
|
|
<p>长内容会自动滚动，确保所有信息都能展示出来。</p>
|
|
<p>项目状态: <strong>进行中</strong></p>
|
|
<p>截止日期: 2023-12-31</p>
|
|
<p>负责人: 张经理</p>
|
|
<p>项目描述: 这是一个重要的项目，需要多个团队协作完成。目标是开发一个全新的用户界面组件库。</p>
|
|
`
|
|
|
|
modal.appendChild(content)
|
|
document.body.appendChild(modal)
|
|
modal.open()
|
|
}
|
|
|
|
// 显示提示条
|
|
function showInfoTip(message = '这是一条信息提示') {
|
|
const tip = document.getElementById('demoTip')
|
|
tip.setAttribute('type', 'info')
|
|
tip.setAttribute('content', message)
|
|
tip.show()
|
|
}
|
|
|
|
function showSuccessTip(message = '操作成功！') {
|
|
const tip = document.getElementById('demoTip')
|
|
tip.setAttribute('type', 'success')
|
|
tip.setAttribute('content', message)
|
|
tip.show()
|
|
}
|
|
|
|
function showWarningTip(message = '警告：请注意操作风险') {
|
|
const tip = document.getElementById('demoTip')
|
|
tip.setAttribute('type', 'warn')
|
|
tip.setAttribute('content', message)
|
|
tip.show()
|
|
}
|
|
|
|
function showErrorTip(message = '错误：操作失败') {
|
|
const tip = document.getElementById('demoTip')
|
|
tip.setAttribute('type', 'error')
|
|
tip.setAttribute('content', message)
|
|
tip.show()
|
|
}
|
|
|
|
// 显示加载指示器
|
|
function showLoading() {
|
|
const loading = document.getElementById('demoLoading')
|
|
loading.setAttribute('content', '加载数据中...')
|
|
loading.show()
|
|
|
|
// 3秒后隐藏
|
|
setTimeout(() => loading.hide(), 3000)
|
|
}
|
|
|
|
// 显示内联加载指示器
|
|
function showInlineLoading() {
|
|
const loading = document.createElement('ui-loading')
|
|
loading.setAttribute('content', '处理中...')
|
|
loading.setAttribute('inline', 'true')
|
|
loading.setAttribute('hidden', 'false')
|
|
|
|
const demoArea = document.querySelector('.component-card:last-child .component-demo')
|
|
demoArea.appendChild(loading)
|
|
loading.show()
|
|
|
|
// 3秒后移除
|
|
setTimeout(() => {
|
|
loading.hide()
|
|
setTimeout(() => demoArea.removeChild(loading), 500)
|
|
}, 3000)
|
|
}
|
|
|
|
// API请求示例
|
|
let api = null
|
|
let currentRequest = null
|
|
|
|
// 初始化API
|
|
function initAPI() {
|
|
if (!api) {
|
|
api = new API({
|
|
baseUrl: 'https://jsonplaceholder.typicode.com',
|
|
})
|
|
}
|
|
return api
|
|
}
|
|
|
|
// 发送GET请求
|
|
function sendGetRequest() {
|
|
initAPI()
|
|
const resultEl = document.getElementById('apiResult')
|
|
resultEl.innerHTML = '发送GET请求中...'
|
|
|
|
currentRequest = api.get({
|
|
url: '/todos/1',
|
|
success: function (data) {
|
|
resultEl.innerHTML = `<span class="code-comment">// GET请求成功响应</span><br>${JSON.stringify(data, null, 2)}`
|
|
showSuccessTip('GET请求成功')
|
|
},
|
|
error: function (err) {
|
|
resultEl.innerHTML = `<span style="color:#ff6b6b">请求错误: ${err}</span>`
|
|
showErrorTip('GET请求失败')
|
|
},
|
|
})
|
|
}
|
|
|
|
// 发送POST请求
|
|
function sendPostRequest() {
|
|
initAPI()
|
|
const resultEl = document.getElementById('apiResult')
|
|
resultEl.innerHTML = '发送POST请求中...'
|
|
|
|
currentRequest = api.post({
|
|
url: '/posts',
|
|
data: JSON.stringify({
|
|
title: 'UI组件库示例',
|
|
body: '这是一个演示POST请求的示例',
|
|
userId: 1,
|
|
}),
|
|
headers: {
|
|
'Content-type': 'application/json; charset=UTF-8',
|
|
},
|
|
progress: function (response) {
|
|
resultEl.innerHTML = `上传进度: ${response}`
|
|
},
|
|
success: function (data) {
|
|
resultEl.innerHTML = `<span class="code-comment">// POST请求成功响应</span><br>${JSON.stringify(data, null, 2)}`
|
|
showSuccessTip('POST请求成功')
|
|
},
|
|
error: function (err) {
|
|
resultEl.innerHTML = `<span style="color:#ff6b6b">请求错误: ${err}</span>`
|
|
showErrorTip('POST请求失败')
|
|
},
|
|
})
|
|
}
|
|
|
|
// 中止请求
|
|
function abortRequest() {
|
|
if (currentRequest) {
|
|
api.abort(function () {
|
|
document.getElementById('apiResult').innerHTML = '<span style="color:#ff9800">请求已中止</span>'
|
|
showWarningTip('请求已中止')
|
|
})
|
|
currentRequest = null
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|