-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
154 lines (143 loc) · 6.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch-with-loading</title>
<style>
body {
padding: 0 0.5em 100px;
background: #fff;
}
pre {
padding: 12px 1em;
margin: 1em 0;
background-color: #f5f7f9;
font-family: Consolas, monospace;
font-size: 100%;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 4px;
box-shadow: inset 1px 0 #e3e5e8, inset 0 1px #e3e5e8, inset -1px 0 #eaf0f5, inset 0 -1px #eaf0f5;
tab-size: 2;
}
blockquote {
font-family: 'kaiti', 'STKaiti';
border-left: solid silver;
background-color: #ffffe0;
padding: 0.5em 1em;
background-color: beige;
margin: 0;
}
.green{
color: green;
}
button,
input {
margin: 5px;
}
p {
font-size: 12px;
}
a, .blue, a.dark[href]:hover {
color: #2a80eb;
}
a, a:hover {
text-decoration: none;
}
</style>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/LightTip.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Button.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Loading.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/LightTip.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Loading.js"></script>
</head>
<body>
<h1>fetch-with-loading</h1>
<blockquote>这里采用定时器模拟</blockquote>
<h3>github</h3>
<a href="https://github.com/yued-fe/fetch-with-loading">https://github.com/yued-fe/fetch-with-loading</a>
<h3>常规用法</h3>
<pre>window.fetch = new fetchWithLoading();</pre>
<button class="ui-button" data-type="primary" onclick="fetch1(Math.random()*200, this)">很快的请求</button>
<button class="ui-button" data-type="success" onclick="fetch1(200+Math.random()*1000, this)">正常请求</button>
<button class="ui-button" data-type="warning" onclick="fetch1(3000+Math.random()*10000, this)">很长时间的请求</button>
<h3>自定义提示</h3>
<pre>window.fetch = new fetchWithLoading(<span class="green">['请求中...','还在请求中...','可能会有点慢...','快好了，还等会...']</span>);
<span class="green">//请求</span>
fetch('/list').then(res => console.log(res))</pre>
<button class="ui-button" data-type="warning" onclick="fetch2(3000+Math.random()*10000, this)">自定义提示</button>
<h3>全部配置项</h3>
<pre>window.fetch = new fetchWithLoading({
tips: ['请求中...','还在请求中...','可能会有点慢...','别着急...','马上就好了...'],
timestep: 2000, <span class="green">//表示每隔多长时间更换提示信息</span>
delay: 200, <span class="green">//表示在多长时间内完成请求可无需显示提示信息</span>
duration: 500, <span class="green">//表示出现提示信息后，至少显示多长时间</span>
});
<span class="green">//请求</span>
fetch('/list').then(res => console.log(res))
</pre>
<button class="ui-button" data-type="primary" onclick="fetch3(Math.random()*200, this)">很快的请求</button>
<button class="ui-button" data-type="success" onclick="fetch3(200+Math.random()*1000, this)">正常请求</button>
<button class="ui-button" data-type="warning" onclick="fetch3(3000+Math.random()*10000, this)">很长时间的请求</button>
<h3>自定义样式</h3>
<pre>.toast{
<span class="green">/*toast*/</span>
background: #fff;
color: #333;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}</pre>
<button class="ui-button" data-type="primary" onclick="addCss(this)">加载以上 CSS</button>
<script src="./fetch-with-loading.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script>
window.fetch_custom1 = new fetchWithLoading({},timeout);
window.fetch_custom2 = new fetchWithLoading(['请求中...','还在请求中...','可能会有点慢...','快好了，还等会...'],timeout);
window.fetch_custom3 = new fetchWithLoading({
tips: ['请求中...','还在请求中...','可能会有点慢...','别着急...','马上就好了...'],
timestep: 2000,
delay: 200,
duration: 500,
},timeout);
// window.axios = new fetchWithLoading({}, axios);
function timeout(delay) {
return new Promise(resolve => {
setTimeout(() => resolve(true), delay);
});
}
function fetch1(time, el){
el.disabled = true;
fetch_custom1(time).then(res => {
el.disabled = false;
new LightTip().success('请求成功，耗时'+time+'ms');
})
}
function fetch2(time, el){
el.disabled = true;
fetch_custom2(time).then(res => {
el.disabled = false;
new LightTip().success('请求成功，耗时'+time+'ms');
})
}
function fetch3(time, el){
el.disabled = true;
fetch_custom3(time).then(res => {
el.disabled = false;
new LightTip().success('请求成功，耗时'+time+'ms');
})
}
function addCss(el){
const style = document.createElement('style');
style.textContent = `.toast{
background: #fff;
color: #333;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}`
document.querySelector('head').appendChild(style);
el.innerText = 'CSS 加载完毕，重新测试以上案例'
el.disabled = true;
}
</script>
</body>
</html>