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