348 lines
11 KiB
HTML
348 lines
11 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>Toast 消息提醒组件演示</title>
|
||
<link rel="stylesheet" href="assets/css/reset.css">
|
||
<link rel="stylesheet" href="assets/css/toast.css">
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.demo-container {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
max-width: 800px;
|
||
width: 100%;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
color: #1a1a1a;
|
||
text-align: center;
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.demo-section h2 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.button-group {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.demo-btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
color: white;
|
||
}
|
||
|
||
.demo-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.btn-success {
|
||
background: linear-gradient(135deg, #34C759, #28a745);
|
||
}
|
||
|
||
.btn-error {
|
||
background: linear-gradient(135deg, #FF3B30, #dc3545);
|
||
}
|
||
|
||
.btn-warning {
|
||
background: linear-gradient(135deg, #FF9500, #f39c12);
|
||
}
|
||
|
||
.btn-info {
|
||
background: linear-gradient(135deg, #007AFF, #0056b3);
|
||
}
|
||
|
||
.btn-confirm {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
}
|
||
|
||
.demo-btn:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.code-block {
|
||
background: #f5f5f7;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-top: 10px;
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
font-size: 13px;
|
||
color: #333;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.demo-container {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.button-group {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo-container">
|
||
<h1>🎨 Toast 消息提醒组件</h1>
|
||
<p class="subtitle">iOS风格的优雅消息提示</p>
|
||
|
||
<div class="demo-section">
|
||
<h2>基础消息类型</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-success" onclick="Toast.success('操作成功！')">
|
||
✓ 成功消息
|
||
</button>
|
||
<button class="demo-btn btn-error" onclick="Toast.error('操作失败，请重试')">
|
||
✕ 错误消息
|
||
</button>
|
||
<button class="demo-btn btn-warning" onclick="Toast.warning('请注意检查信息')">
|
||
! 警告消息
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="Toast.info('这是一条提示消息')">
|
||
i 提示消息
|
||
</button>
|
||
</div>
|
||
<div class="code-block">
|
||
Toast.success('操作成功！');
|
||
Toast.error('操作失败，请重试');
|
||
Toast.warning('请注意检查信息');
|
||
Toast.info('这是一条提示消息');
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>自定义显示时长</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-info" onclick="Toast.info('1秒后消失', { duration: 1000 })">
|
||
1秒消失
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="Toast.info('5秒后消失', { duration: 5000 })">
|
||
5秒消失
|
||
</button>
|
||
</div>
|
||
<div class="code-block">
|
||
Toast.info('1秒后消失', { duration: 1000 });
|
||
Toast.info('5秒后消失', { duration: 5000 });
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>不同位置显示</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-info" onclick="Toast.info('顶部居中', { position: 'top-center' })">
|
||
顶部居中
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="Toast.info('顶部右侧', { position: 'top-right' })">
|
||
顶部右侧
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="Toast.info('底部居中', { position: 'bottom-center' })">
|
||
底部居中
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="Toast.info('屏幕中心', { position: 'center' })">
|
||
屏幕中心
|
||
</button>
|
||
</div>
|
||
<div class="code-block">
|
||
Toast.info('顶部居中', { position: 'top-center' });
|
||
Toast.info('顶部右侧', { position: 'top-right' });
|
||
Toast.info('底部居中', { position: 'bottom-center' });
|
||
Toast.info('屏幕中心', { position: 'center' });
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>确认对话框</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-confirm" onclick="showConfirmDialog()">
|
||
显示确认对话框
|
||
</button>
|
||
<button class="demo-btn btn-confirm" onclick="showCustomDialog()">
|
||
自定义对话框
|
||
</button>
|
||
</div>
|
||
<div class="code-block">
|
||
Toast.confirm({
|
||
title: '确认删除',
|
||
message: '删除后无法恢复，确定要删除吗？',
|
||
confirmText: '删除',
|
||
cancelText: '取消'
|
||
}).then(confirmed => {
|
||
if (confirmed) {
|
||
Toast.success('已删除');
|
||
}
|
||
});
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>输入对话框</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-info" onclick="showInputDialog()">
|
||
输入用户名
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="showEmailDialog()">
|
||
输入邮箱
|
||
</button>
|
||
<button class="demo-btn btn-info" onclick="showPhoneDialog()">
|
||
输入手机号
|
||
</button>
|
||
</div>
|
||
<div class="code-block">
|
||
Toast.prompt({
|
||
title: '设置用户名',
|
||
placeholder: '请输入用户名',
|
||
defaultValue: '张三',
|
||
maxLength: 20
|
||
}).then(value => {
|
||
if (value !== null) {
|
||
Toast.success(`用户名已设置为：${value}`);
|
||
}
|
||
});
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>长文本消息</h2>
|
||
<div class="button-group">
|
||
<button class="demo-btn btn-info" onclick="Toast.info('这是一条很长很长的消息，用来测试当消息内容比较多的时候，Toast组件的显示效果如何。')">
|
||
显示长文本
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/toast.js"></script>
|
||
<script>
|
||
function showConfirmDialog() {
|
||
Toast.confirm({
|
||
title: '确认删除',
|
||
message: '删除后无法恢复，确定要删除吗？',
|
||
confirmText: '删除',
|
||
cancelText: '取消'
|
||
}).then(confirmed => {
|
||
if (confirmed) {
|
||
Toast.success('已删除');
|
||
} else {
|
||
Toast.info('已取消');
|
||
}
|
||
});
|
||
}
|
||
|
||
function showCustomDialog() {
|
||
Toast.confirm({
|
||
title: '退出登录',
|
||
message: '确定要退出当前账号吗？',
|
||
confirmText: '确定',
|
||
cancelText: '取消',
|
||
confirmColor: '#FF3B30',
|
||
cancelColor: '#007AFF'
|
||
}).then(confirmed => {
|
||
if (confirmed) {
|
||
Toast.success('已退出登录', { duration: 1500 });
|
||
}
|
||
});
|
||
}
|
||
|
||
function showInputDialog() {
|
||
Toast.prompt({
|
||
title: '设置用户名',
|
||
placeholder: '请输入用户名',
|
||
defaultValue: '',
|
||
maxLength: 20
|
||
}).then(value => {
|
||
if (value !== null && value.trim() !== '') {
|
||
Toast.success(`用户名已设置为：${value}`);
|
||
} else if (value !== null) {
|
||
Toast.warning('用户名不能为空');
|
||
}
|
||
});
|
||
}
|
||
|
||
function showEmailDialog() {
|
||
Toast.prompt({
|
||
title: '设置邮箱',
|
||
placeholder: '请输入邮箱地址',
|
||
defaultValue: '',
|
||
inputType: 'email'
|
||
}).then(value => {
|
||
if (value !== null && value.trim() !== '') {
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (emailRegex.test(value)) {
|
||
Toast.success(`邮箱已设置为：${value}`);
|
||
} else {
|
||
Toast.error('请输入有效的邮箱地址');
|
||
}
|
||
} else if (value !== null) {
|
||
Toast.warning('邮箱不能为空');
|
||
}
|
||
});
|
||
}
|
||
|
||
function showPhoneDialog() {
|
||
Toast.prompt({
|
||
title: '设置手机号',
|
||
placeholder: '请输入11位手机号',
|
||
defaultValue: '',
|
||
inputType: 'tel',
|
||
maxLength: 11
|
||
}).then(value => {
|
||
if (value !== null && value.trim() !== '') {
|
||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||
if (phoneRegex.test(value)) {
|
||
Toast.success(`手机号已设置为：${value}`);
|
||
} else {
|
||
Toast.error('请输入有效的手机号');
|
||
}
|
||
} else if (value !== null) {
|
||
Toast.warning('手机号不能为空');
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|