-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
470 lines (285 loc) · 113 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Healer Space</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:type" content="website">
<meta property="og:title" content="Healer Space">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Healer Space">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="wwy">
<meta name="twitter:card" content="summary">
<link rel="alternate" href="/atom.xml" title="Healer Space" type="application/atom+xml">
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
<meta name="generator" content="Hexo 6.3.0"></head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Healer Space</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a class="nav-icon" href="/atom.xml" title="RSS 订阅"><span class="fa fa-rss"></span></a>
<a class="nav-icon nav-search-btn" title="搜索"><span class="fa fa-search"></span></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="搜索"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://example.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-notes" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2023/06/27/notes/" class="article-date">
<time class="dt-published" datetime="2023-06-27T06:04:00.000Z" itemprop="datePublished">2023-06-27</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2023/06/27/notes/">笔记</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
<h3 id="1-原生-去掉空格"><a href="#1-原生-去掉空格" class="headerlink" title="1-原生 去掉空格"></a>1-原生 去掉空格</h3><p>console.log(str.replace(/^\s*/g,’’),’去掉左边空格 ‘);<br>console.log(str.replace(/\s*$/g,’’),’去掉右边空格’);<br>console.log(str.replace(/^\s*|\s*$/g, ‘’),’去掉首尾空格’);<br>console.log(str1.replace(/\s*/g,””),’去掉所有空格(包含中间空格)’);</p>
<h3 id="2-时间戳和时间的转换"><a href="#2-时间戳和时间的转换" class="headerlink" title="2-时间戳和时间的转换"></a>2-时间戳和时间的转换</h3><p>let mydate = new Date(); //生成当前时间</p>
<p>let time = mydate.getFullYear() + “-“ + (mydate.getMonth()+1) + “-“ + mydate.getDate() + “ “ + “00:00:00”</p>
<p>let sev = mydate.getTime()； //转时间戳</p>
<p>最近n天计算</p>
<p>// let sev = new Date(mydate.getTime()-7<em>24</em>60<em>60</em>1000)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">changeTime</span>(<span class="params">t</span>) {</span><br><span class="line"> <span class="comment">// t:时间戳</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>(t);</span><br><span class="line"> <span class="keyword">var</span> Y = date.<span class="title function_">getFullYear</span>() + <span class="string">'/'</span>;</span><br><span class="line"> <span class="comment">// var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';</span></span><br><span class="line"> <span class="keyword">var</span> M = (date.<span class="title function_">getMonth</span>()+<span class="number">1</span>).<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="number">0</span>) + <span class="string">'/'</span>;</span><br><span class="line"> <span class="keyword">var</span> D = date.<span class="title function_">getDate</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="number">0</span>) + <span class="string">' '</span>;</span><br><span class="line"> <span class="keyword">var</span> h = date.<span class="title function_">getHours</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="number">0</span>) + <span class="string">':'</span>;</span><br><span class="line"> <span class="keyword">var</span> m = date.<span class="title function_">getMinutes</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">var</span> s = date.<span class="title function_">getSeconds</span>(); </span><br><span class="line"> <span class="keyword">return</span> Y+M+D+h+m</span><br><span class="line">},</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="3-js-改变样式"><a href="#3-js-改变样式" class="headerlink" title="3-js 改变样式"></a>3-js 改变样式</h3><p>div.style.cssText=’width:250px;height:250px;border:1px red solid;’;</p>
<h3 id="4-yarn-打包-vue-：（vite"><a href="#4-yarn-打包-vue-：（vite" class="headerlink" title="4-yarn 打包 vue ：（vite)"></a>4-yarn 打包 vue ：（vite)</h3><p>yarn build;</p>
<p>配置 vite.config.js</p>
<p>base属性，hash模式不用nginx history模式要整nginx</p>
<p>hash模式 base直接配置成 相对路径 base:”./“ 或者 base:”/asset/…” 找到直接的文件目录 （不能直接用绝对路径 “/”）</p>
<h3 id="5-npm-打包vue"><a href="#5-npm-打包vue" class="headerlink" title="5-npm 打包vue"></a>5-npm 打包vue</h3><p>npm run build</p>
<p>打包时 路由关闭 history 模式</p>
<h3 id="6-vue3-配置全局变量"><a href="#6-vue3-配置全局变量" class="headerlink" title="6-vue3 配置全局变量"></a>6-vue3 配置全局变量</h3><p>在main.js 文件</p>
<p>基本配置</p>
<p>import { createApp } from ‘vue’</p>
<p>import App from ‘./App.vue’</p>
<p>const app = createApp(App)</p>
<p>import router from ‘./router/router’</p>
<p><strong>import axios from ‘axios’；//axios 全局配置</strong></p>
<p><strong>app.config.globalProperties.$axios = axios</strong> </p>
<p>vue 组件使用：</p>
<p>import { getCurrentInstance } from ‘vue’;</p>
<p>const { proxy } =getCurrentInstance();</p>
<p>proxy.$axios.post()</p>
<h3 id="7-vue3-setup-发起请求"><a href="#7-vue3-setup-发起请求" class="headerlink" title="7-vue3 setup 发起请求"></a>7-vue3 setup 发起请求</h3><p>需要引入</p>
<p>import { getCurrentInstance } from ‘vue’;</p>
<p>const { proxy } =getCurrentInstance();</p>
<h3 id="8-获取地址栏参数"><a href="#8-获取地址栏参数" class="headerlink" title="8-获取地址栏参数"></a>8-获取地址栏参数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> mylocation = <span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">href</span></span><br><span class="line"><span class="comment">// 工具函数 getUrlParams 参数href值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getUrlParams</span>(<span class="params">str</span>) {</span><br><span class="line"> <span class="keyword">let</span> arr = str.<span class="title function_">split</span>(<span class="string">"?"</span>)[<span class="number">1</span>].<span class="title function_">split</span>(<span class="string">"&"</span>);</span><br><span class="line"> <span class="keyword">let</span> obj = {}</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < arr.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">let</span> key = arr[i].<span class="title function_">split</span>(<span class="string">"="</span>)[<span class="number">0</span>]</span><br><span class="line"> <span class="keyword">let</span> value = arr[i].<span class="title function_">split</span>(<span class="string">"="</span>)[<span class="number">1</span>]</span><br><span class="line"> obj[key] = value</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> obj</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> paramsArr = <span class="title function_">getUrlParams</span>(mylocation)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(paramsArr);</span><br></pre></td></tr></table></figure>
<h3 id="9-时间格式-Android和IOS的兼容问题"><a href="#9-时间格式-Android和IOS的兼容问题" class="headerlink" title="9-时间格式 Android和IOS的兼容问题"></a>9-时间格式 Android和IOS的兼容问题</h3><p>返回的时间格式数据 比如: 2022-06-02 15:56:07 在苹果设备上使用需要处理成 2022/06/02 15:56:07</p>
<p>苹果兼容问题 replace(/-/g,’/‘)</p>
<p>currentDate.value = new Date(new Date(res.data.data.endTime.replace(/-/g,’/‘)).getTime()+1000<em>60</em>60)</p>
<h3 id="10-echarts图注意事项"><a href="#10-echarts图注意事项" class="headerlink" title="10-echarts图注意事项"></a>10-echarts图注意事项</h3><p>全局缩放会(zoom)影响eacharts图表的箭头(点这指那)</p>
<h3 id="11-静态资源文件放在puclic"><a href="#11-静态资源文件放在puclic" class="headerlink" title="11-静态资源文件放在puclic"></a>11-静态资源文件放在puclic</h3><p>在index.html中引入 直接 /auto.js</p>
<h3 id="12-电话正则"><a href="#12-电话正则" class="headerlink" title="12-电话正则"></a>12-电话正则</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.</span></span><br><span class="line"><span class="keyword">let</span> reg_tel = <span class="regexp">/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(reg_tel.<span class="title function_">test</span>(phone)){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'电话号码符合要求'</span>)</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'请输入正确的电话号码'</span>)</span><br><span class="line">}</span><br><span class="line"><span class="comment">//2.</span></span><br><span class="line"><span class="keyword">var</span> myreg = <span class="regexp">/^[1][3,4,5,7,8,9][0-9]{9}$/</span>;</span><br><span class="line"><span class="keyword">if</span> (!myreg.<span class="title function_">test</span>(phones)) {</span><br><span class="line"> <span class="comment">//手机号格式错误</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">//手机号格式正确</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="13-普通参数转表单参数"><a href="#13-普通参数转表单参数" class="headerlink" title="13-普通参数转表单参数"></a>13-普通参数转表单参数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//部分关键代码</span></span><br><span class="line"><span class="keyword">var</span> formDate = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"></span><br><span class="line"> formDate.<span class="title function_">append</span>(<span class="string">'name'</span>,<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line"></span><br><span class="line"> formDate.<span class="title function_">append</span>(<span class="string">'pwd'</span>,<span class="variable language_">this</span>.<span class="property">pwd</span>);</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">axios</span>({</span><br><span class="line"></span><br><span class="line"> <span class="attr">method</span>: <span class="string">'post'</span>,</span><br><span class="line"></span><br><span class="line"> <span class="attr">url</span>: <span class="variable language_">this</span>.<span class="property">$baseUrl</span>+<span class="string">"api/site_message/save"</span>,</span><br><span class="line"></span><br><span class="line"> <span class="attr">data</span>: formDate,</span><br><span class="line"></span><br><span class="line"> <span class="attr">headers</span>: { <span class="string">'content-type'</span>: <span class="string">'application/x-www-form-urlencoded'</span> },</span><br><span class="line"></span><br><span class="line"> }).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"></span><br><span class="line"> }).<span class="title function_">catch</span>(<span class="function"><span class="params">e</span>=></span>{</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line"></span><br><span class="line"> });</span><br></pre></td></tr></table></figure>
<h3 id="14-上传图片转网络地址"><a href="#14-上传图片转网络地址" class="headerlink" title="14-上传图片转网络地址"></a>14-上传图片转网络地址</h3><p>拿到这个对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//e.target.files[0]</span></span><br><span class="line"><span class="title class_">File</span> { </span><br><span class="line"> <span class="attr">name</span>: <span class="string">'***'</span>, </span><br><span class="line"> <span class="attr">lastModified</span>: <span class="number">1540088122000</span>,</span><br><span class="line"> <span class="attr">lastModifiedDate</span>: <span class="title class_">Sun</span> <span class="title class_">Oct</span> <span class="number">21</span> <span class="number">2018</span> <span class="number">10</span>:<span class="number">15</span>:<span class="number">22</span> <span class="variable constant_">GMT</span>+<span class="number">0800</span> (中国标准时间),</span><br><span class="line"> <span class="attr">size</span>: <span class="number">49058</span>, </span><br><span class="line"> <span class="attr">type</span>: <span class="string">"image/jpeg"</span></span><br><span class="line"> …}</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> formData.<span class="title function_">append</span>(<span class="string">'upload'</span>, file)</span><br></pre></td></tr></table></figure>
<p>(1).原生方式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//html部分 </span></span><br><span class="line"><input type=<span class="string">"file"</span> name=<span class="string">""</span> accept=<span class="string">"image/*"</span> id=<span class="string">""</span> @change=<span class="string">"test"</span>></span><br><span class="line"> <span class="comment">//js</span></span><br><span class="line"> <span class="title function_">test</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">var</span> file = e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(file);</span><br><span class="line"> <span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> formData.<span class="title function_">append</span>(<span class="string">'upload'</span>, file)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$ajax</span>.<span class="title function_">post</span>(<span class="string">"https://meizi.scrstv.com/a/material/uploadAll"</span>,formData).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">data</span>);<span class="comment">//网络地址</span></span><br><span class="line"> }).<span class="title function_">catch</span>(<span class="function"><span class="params">e</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line"> })</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<p>(2).vant组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html部分</span></span><br><span class="line"><van-uploader :after-read=<span class="string">"afterRead"</span> preview-image /></span><br><span class="line"><span class="comment">//js部分</span></span><br><span class="line"> <span class="title function_">afterRead</span>(<span class="params">file</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(file.<span class="property">file</span>);</span><br><span class="line"> <span class="keyword">var</span> tarFile = file.<span class="property">file</span>;</span><br><span class="line"> <span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> formData.<span class="title function_">append</span>(<span class="string">'upload'</span>, tarFile)</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$ajax</span>.<span class="title function_">post</span>(<span class="string">"https://meizi.scrstv.com/a/material/uploadAll"</span>,formData).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">data</span>.<span class="property">data</span>);</span><br><span class="line"> <span class="comment">// this.mypic = res.data.data</span></span><br><span class="line"> }).<span class="title function_">catch</span>(<span class="function"><span class="params">e</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line"> })</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">补充： 图片文件转base64 转网络路径</span><br><span class="line"><input type=<span class="string">"file"</span> name=<span class="string">""</span> id=<span class="string">""</span> accept=<span class="string">"image/*"</span> @change=<span class="string">"chan($event)"</span>></span><br><span class="line"></span><br><span class="line"> <span class="title function_">chan</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">let</span> file = e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">fileByBase64</span>(file,<span class="function">(<span class="params">base64</span>)=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(base64);</span><br><span class="line"> <span class="keyword">var</span> url = base64.<span class="title function_">split</span>(<span class="string">","</span>)[<span class="number">1</span>];</span><br><span class="line"> <span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> formData.<span class="title function_">append</span>(<span class="string">'baseArr'</span>, url)</span><br><span class="line"> <span class="title function_">mybaseTopic</span>(formData).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line"> }).<span class="title function_">catch</span>(<span class="function"><span class="params">e</span>=></span>{</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 文件转base64</span></span><br><span class="line"> <span class="title function_">fileByBase64</span>(<span class="params">file, callback</span>){</span><br><span class="line"> <span class="keyword">let</span> reader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line"> <span class="comment">// 传入一个参数对象即可得到基于该参数对象的文本内容</span></span><br><span class="line"> reader.<span class="title function_">readAsDataURL</span>(file);</span><br><span class="line"> reader.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params">e</span>) {</span><br><span class="line"> <span class="comment">// target.result 该属性表示目标对象的DataURL</span></span><br><span class="line"> <span class="title function_">callback</span>(e.<span class="property">target</span>.<span class="property">result</span>)</span><br><span class="line"> </span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> </span><br></pre></td></tr></table></figure>
<h3 id="15-时间戳转天小时分秒"><a href="#15-时间戳转天小时分秒" class="headerlink" title="15-时间戳转天小时分秒"></a>15-时间戳转天小时分秒</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><script type=<span class="string">"text/javascript"</span>> </span><br><span class="line"> <span class="keyword">var</span> date1= <span class="string">'2022/05/01 00:00:00'</span>; <span class="comment">//开始时间</span></span><br><span class="line"> <span class="keyword">var</span> date2 = <span class="keyword">new</span> <span class="title class_">Date</span>(); <span class="comment">//结束时间</span></span><br><span class="line"> <span class="keyword">var</span> date3 = date2.<span class="title function_">getTime</span>() - <span class="keyword">new</span> <span class="title class_">Date</span>(date1).<span class="title function_">getTime</span>(); <span class="comment">//时间差的毫秒数 </span></span><br><span class="line"> <span class="comment">//------------------------------</span></span><br><span class="line"> <span class="comment">//计算出相差天数</span></span><br><span class="line"> <span class="keyword">var</span> days=<span class="title class_">Math</span>.<span class="title function_">floor</span>(date3/(<span class="number">24</span>*<span class="number">3600</span>*<span class="number">1000</span>))</span><br><span class="line"> <span class="comment">//计算出小时数</span></span><br><span class="line"> <span class="keyword">var</span> leave1=date3%(<span class="number">24</span>*<span class="number">3600</span>*<span class="number">1000</span>) <span class="comment">//计算天数后剩余的毫秒数</span></span><br><span class="line"> <span class="keyword">var</span> hours=<span class="title class_">Math</span>.<span class="title function_">floor</span>(leave1/(<span class="number">3600</span>*<span class="number">1000</span>))</span><br><span class="line"> <span class="comment">//计算相差分钟数</span></span><br><span class="line"> <span class="keyword">var</span> leave2=leave1%(<span class="number">3600</span>*<span class="number">1000</span>) <span class="comment">//计算小时数后剩余的毫秒数</span></span><br><span class="line"> <span class="keyword">var</span> minutes=<span class="title class_">Math</span>.<span class="title function_">floor</span>(leave2/(<span class="number">60</span>*<span class="number">1000</span>))</span><br><span class="line"> <span class="comment">//计算相差秒数</span></span><br><span class="line"> <span class="keyword">var</span> leave3=leave2%(<span class="number">60</span>*<span class="number">1000</span>) <span class="comment">//计算分钟数后剩余的毫秒数</span></span><br><span class="line"> <span class="keyword">var</span> seconds=<span class="title class_">Math</span>.<span class="title function_">round</span>(leave3/<span class="number">1000</span>)</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">" 相差 "</span>+days+<span class="string">"天 "</span>+hours+<span class="string">"小时 "</span>+minutes+<span class="string">" 分钟"</span>+seconds+<span class="string">" 秒"</span>)</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<h3 id="16-vue图片转为File文件类型"><a href="#16-vue图片转为File文件类型" class="headerlink" title="16-vue图片转为File文件类型"></a>16-vue图片转为File文件类型</h3><p><strong>步骤：</strong></p>
<ul>
<li>先把<code>图片路径</code>转为<code>base64</code>格式 </li>
<li>再把<code>base64</code>转为<code>File文件</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">使用：</span><br><span class="line"> <span class="title function_">handleImgToBase64</span>(<span class="string">'图片地址'</span>)</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* url: 图片路径 cb: callback */</span></span><br><span class="line"> <span class="title function_">handleImgToBase64</span>(<span class="params">url, cb</span>) {</span><br><span class="line"> <span class="keyword">let</span> that = <span class="variable language_">this</span>;</span><br><span class="line"> <span class="keyword">var</span> image = <span class="keyword">new</span> <span class="title class_">Image</span>();</span><br><span class="line"> image.<span class="property">crossOrigin</span> = <span class="string">''</span>;</span><br><span class="line"> image.<span class="property">src</span> = url;</span><br><span class="line"> image.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> base64 = that.<span class="title function_">imageToBase64</span>(image); <span class="comment">//图片转base64</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(base64)<span class="comment">//拿到base64</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">let</span> file = that.<span class="title function_">base64ToFile</span>(base64, <span class="string">'file'</span>); <span class="comment">//base64转File</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(file);</span><br><span class="line"> <span class="comment">// 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】</span></span><br><span class="line"> <span class="comment">// cb && typeof cb == 'function' && cb(file);</span></span><br><span class="line"> <span class="keyword">return</span> file;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">imageToBase64</span>(<span class="params">img</span>) {</span><br><span class="line"> <span class="comment">// Vue.prototype.$imageToBase64 = img => { //定义全局</span></span><br><span class="line"> <span class="keyword">var</span> canvas = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">"canvas"</span>);</span><br><span class="line"> canvas.<span class="property">width</span> = img.<span class="property">width</span>;</span><br><span class="line"> canvas.<span class="property">height</span> = img.<span class="property">height</span>;</span><br><span class="line"> <span class="keyword">var</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">"2d"</span>);</span><br><span class="line"> ctx.<span class="title function_">drawImage</span>(img, <span class="number">0</span>, <span class="number">0</span>, img.<span class="property">width</span>, img.<span class="property">height</span>);</span><br><span class="line"> <span class="keyword">var</span> ext = img.<span class="property">src</span>.<span class="title function_">substring</span>(img.<span class="property">src</span>.<span class="title function_">lastIndexOf</span>(<span class="string">"."</span>) + <span class="number">1</span>).<span class="title function_">toLowerCase</span>();</span><br><span class="line"> <span class="keyword">var</span> dataURL = canvas.<span class="title function_">toDataURL</span>(<span class="string">"image/jpeg"</span> + ext);</span><br><span class="line"> <span class="keyword">return</span> dataURL;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">base64ToFile</span>(<span class="params">urlData, fileName</span>){</span><br><span class="line"> <span class="keyword">let</span> arr = urlData.<span class="title function_">split</span>(<span class="string">','</span>);</span><br><span class="line"> <span class="keyword">let</span> mime = arr[<span class="number">0</span>].<span class="title function_">match</span>(<span class="regexp">/:(.*?);/</span>)[<span class="number">1</span>];</span><br><span class="line"> <span class="keyword">let</span> bytes = <span class="title function_">atob</span>(arr[<span class="number">1</span>]); <span class="comment">// 解码base64</span></span><br><span class="line"> <span class="keyword">let</span> n = bytes.<span class="property">length</span></span><br><span class="line"> <span class="keyword">let</span> ia = <span class="keyword">new</span> <span class="title class_">Uint8Array</span>(n);</span><br><span class="line"> <span class="keyword">while</span> (n--) {</span><br><span class="line"> ia[n] = bytes.<span class="title function_">charCodeAt</span>(n);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">File</span>([ia], fileName, { <span class="attr">type</span>: mime });</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h3 id="17-图片文字水印"><a href="#17-图片文字水印" class="headerlink" title="17-图片文字水印"></a>17-图片文字水印</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br></pre></td><td class="code"><pre><span class="line"><button @click="test">按钮</button></span><br><span class="line"></span><br><span class="line">methods:{</span><br><span class="line"> test() {</span><br><span class="line"> this.handleImgToBase64(this.hx)</span><br><span class="line"> },</span><br><span class="line"> //</span><br><span class="line"> handleImgToBase64(url) {</span><br><span class="line"> let that = this;</span><br><span class="line"> var image = new Image();</span><br><span class="line"> image.crossOrigin = '';</span><br><span class="line"> image.src = url;</span><br><span class="line"> image.onload = function () {</span><br><span class="line"> let base64 = that.imageToBase64(image,); //图片转base64</span><br><span class="line"> // console.log(base64,666);</span><br><span class="line"> let file = that.base64ToFile(base64, 'file'); //base64转File</span><br><span class="line"> that.addWatermark1(file)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> //2.base64转File</span><br><span class="line"> base64ToFile(urlData, fileName){</span><br><span class="line"> let arr = urlData.split(',');</span><br><span class="line"> let mime = arr[0].match(/:(.*?);/)[1];</span><br><span class="line"> let bytes = atob(arr[1]); // 解码base64</span><br><span class="line"> let n = bytes.length</span><br><span class="line"> let ia = new Uint8Array(n);</span><br><span class="line"> while (n--) {</span><br><span class="line"> ia[n] = bytes.charCodeAt(n);</span><br><span class="line"> }</span><br><span class="line"> return new File([ia], fileName, { type: mime });</span><br><span class="line"> },</span><br><span class="line"> // 1.图片转base64</span><br><span class="line"> imageToBase64(img) {</span><br><span class="line"> // Vue.prototype.$imageToBase64 = img => { //定义全局</span><br><span class="line"> var canvas = document.createElement("canvas");</span><br><span class="line"> canvas.width = img.width;</span><br><span class="line"> canvas.height = img.height;</span><br><span class="line"> var ctx = canvas.getContext("2d");</span><br><span class="line"> ctx.drawImage(img, 0, 0, img.width, img.height);</span><br><span class="line"> var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();</span><br><span class="line"> var dataURL = canvas.toDataURL("image/jpeg" + ext);</span><br><span class="line"> return dataURL;</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //4-Base64转成canvas</span><br><span class="line"> async imgToCanvas(base64,callback) {</span><br><span class="line"> // 创建img元素</span><br><span class="line"> const img = document.createElement('img')</span><br><span class="line"> img.setAttribute('src', base64)</span><br><span class="line"> await new Promise((resolve) => (img.onload = resolve))</span><br><span class="line"> // 创建canvas DOM元素，并设置其宽高和图片一样</span><br><span class="line"> const canvas3 = document.createElement('canvas')</span><br><span class="line"></span><br><span class="line"> canvas3.width = img.width</span><br><span class="line"> canvas3.height = img.height</span><br><span class="line"> // 坐标(0,0) 表示从此处开始绘制，相当于偏移。</span><br><span class="line"> canvas3.getContext('2d').drawImage(img, 0, 0)</span><br><span class="line"> callback(canvas3)</span><br><span class="line"> // return canvas3</span><br><span class="line"> },</span><br><span class="line"> //. 给canvas添加水印</span><br><span class="line"> addWatermark(canvas, text) {</span><br><span class="line"> const ctx = canvas.getContext('2d')</span><br><span class="line"> ctx.fillStyle = 'rgba(0,0,0,.5)';//颜色 透明度</span><br><span class="line"> // ctx.rotate(-0.05);//旋转</span><br><span class="line"> ctx.textBaseline = 'middle';</span><br><span class="line"> ctx.font = 16 + 'px Arial';//文字大小</span><br><span class="line"> // ctx.font = this.value_daxiao + 'px Arial';//文字大小</span><br><span class="line"> ctx.textAlign = 'center'</span><br><span class="line"></span><br><span class="line"> // ctx.fillText(text,ctx.canvas.width /2, ctx.canvas.height / 2);</span><br><span class="line"> ctx.fillText(text,700, 39);</span><br><span class="line"> return canvas</span><br><span class="line"> },</span><br><span class="line"> // canvas转成img</span><br><span class="line"> convasToImg(canvas, type) {</span><br><span class="line"> // 新建Image对象，可以理解为DOM</span><br><span class="line"> let image = new Image()</span><br><span class="line"> // canvas.toDataURL 返回的是一串Base64编码的URL</span><br><span class="line"> // 指定格式 PNG</span><br><span class="line"> image.src = canvas.toDataURL(type)</span><br><span class="line"> return image</span><br><span class="line"> },</span><br><span class="line"> // 3333333333333333333333333333333333333333333</span><br><span class="line"> async addWatermark1(file) {</span><br><span class="line"> let that = this;</span><br><span class="line"> let blob = {};</span><br><span class="line"> const _URL = window.URL || window.webkitURL;</span><br><span class="line"> const img = new Image();</span><br><span class="line"> img.src = _URL.createObjectURL(file);</span><br><span class="line"> await new Promise(resolve => {</span><br><span class="line"> img.onload = async () => {</span><br><span class="line"> const canvas = document.createElement('canvas');</span><br><span class="line"> canvas.width = img.width;</span><br><span class="line"> canvas.height = img.height;</span><br><span class="line"> const context = canvas.getContext('2d');</span><br><span class="line"> context.drawImage(img, 0, 0);</span><br><span class="line"> // 水印图片</span><br><span class="line"> const watermarkImg = new Image();</span><br><span class="line"> watermarkImg.src = that.myimg; // logo</span><br><span class="line"> await new Promise(resolve => {</span><br><span class="line"> watermarkImg.onload = () => {</span><br><span class="line"> //绘制图片</span><br><span class="line"> context.drawImage(watermarkImg, 600, 0);</span><br><span class="line"> const base64 = canvas.toDataURL('image/png');</span><br><span class="line"> console.log(base64,456);</span><br><span class="line"></span><br><span class="line"> // 2. 调用方法2：把base64转换为Canvas</span><br><span class="line"> that.imgToCanvas(base64,async (tempCanvas)=>{</span><br><span class="line"> console.log(tempCanvas);</span><br><span class="line"> let word = '我是水印'</span><br><span class="line"> const canvas = that.addWatermark(tempCanvas, word) //3.调用方法3： 写入水印到Canvas</span><br><span class="line"> // canvas转成img</span><br><span class="line"> const img = that.convasToImg(canvas, 'image/png') //4. 调用方法4：把Canvas转换为image文件</span><br><span class="line"> // console.log(img.src,6);</span><br><span class="line"> var url = img.src.split(",")[1];</span><br><span class="line"> var formData = new FormData();</span><br><span class="line"> formData.append('baseArr', url);</span><br><span class="line"> mybaseTopic(formData).then(res=>{</span><br><span class="line"> console.log(res)</span><br><span class="line"> }).catch(e=>{</span><br><span class="line"> console.log(e);</span><br><span class="line"> })</span><br><span class="line"> }) </span><br><span class="line"></span><br><span class="line"> resolve();</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> resolve();</span><br><span class="line"> };</span><br><span class="line"> });</span><br><span class="line"> return new File([blob], file.name, {</span><br><span class="line"> type: file.type,</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h3 id="18-保留两位小数"><a href="#18-保留两位小数" class="headerlink" title="18-保留两位小数"></a>18-保留两位小数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">precision</span>(<span class="params">num</span>) {</span><br><span class="line"> <span class="keyword">let</span> z = <span class="built_in">parseInt</span>(num)</span><br><span class="line"> <span class="keyword">let</span> len = <span class="number">4</span></span><br><span class="line"> <span class="keyword">if</span>(z.<span class="title function_">toString</span>().<span class="property">length</span>><span class="number">2</span>) {</span><br><span class="line"> len = z.<span class="title function_">toString</span>().<span class="property">length</span>*<span class="number">1</span>+<span class="number">2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">parseFloat</span>(num.<span class="title function_">toPrecision</span>(len));</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h3 id="19-vue路由传递对象"><a href="#19-vue路由传递对象" class="headerlink" title="19-vue路由传递对象"></a>19-vue路由传递对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>传 </span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line"> <span class="attr">path</span>: <span class="string">"/test"</span>,</span><br><span class="line"> <span class="attr">query</span>: {</span><br><span class="line"> <span class="attr">param</span>:<span class="built_in">encodeURIComponent</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="variable language_">this</span>.<span class="property">ok</span>)),</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"><span class="number">2.</span>接收</span><br><span class="line"> <span class="title function_">created</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> urlObj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="built_in">decodeURIComponent</span>(<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">param</span>))</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<h3 id="20-文字一行显示"><a href="#20-文字一行显示" class="headerlink" title="20-文字一行显示"></a>20-文字一行显示</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"> //多行</span><br><span class="line"><span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="comment">/* 不要设置高度 */</span></span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line"> <span class="comment">/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */</span></span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="comment">/* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */</span></span><br><span class="line"> -webkit-line-clamp: <span class="number">3</span>;</span><br><span class="line"> <span class="comment">/* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */</span></span><br><span class="line"> -webkit-box-orient: vertical; </span><br><span class="line"> }</span><br><span class="line">//单行</span><br><span class="line"><span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">white-space</span>:nowrap;//文字不换行</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line"> }</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="21-保留两位小数"><a href="#21-保留两位小数" class="headerlink" title="21-保留两位小数"></a>21-保留两位小数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//num: 123（number/string）</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">pointTwo</span>(<span class="params">num</span>) {</span><br><span class="line"> <span class="keyword">let</span> newNum = num.<span class="title function_">toString</span>();</span><br><span class="line"> <span class="keyword">let</span> arr = newNum.<span class="title function_">split</span>(<span class="string">'.'</span>)</span><br><span class="line"> <span class="keyword">if</span>(!arr[<span class="number">1</span>]) {</span><br><span class="line"> <span class="comment">//整数</span></span><br><span class="line"> arr[<span class="number">1</span>] = <span class="string">'00'</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(arr[<span class="number">1</span>] && arr[<span class="number">1</span>].<span class="title function_">toString</span>().<span class="property">length</span> < <span class="number">2</span>) {</span><br><span class="line"> <span class="comment">//一位小数</span></span><br><span class="line"> arr[<span class="number">1</span>] = arr[<span class="number">1</span>].<span class="title function_">toString</span>().<span class="title function_">padEnd</span>(<span class="number">2</span>,<span class="number">0</span>)</span><br><span class="line"> }</span><br><span class="line"> newNum = arr.<span class="title function_">join</span>(<span class="string">'.'</span>)</span><br><span class="line"> <span class="keyword">return</span> newNum</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="22-查找A字符串是否包含B字符串"><a href="#22-查找A字符串是否包含B字符串" class="headerlink" title="22-查找A字符串是否包含B字符串"></a>22-查找A字符串是否包含B字符串</h3><p><strong>方法一: indexOf() (推荐)</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"123"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">indexOf</span>(<span class="string">"2"</span>) != -<span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line"><span class="comment">//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。</span></span><br></pre></td></tr></table></figure>
<p><strong>方法二:match()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"123"</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="title class_">RegExp</span>(<span class="regexp">/3/</span>);</span><br><span class="line"><span class="keyword">if</span>(str.<span class="title function_">match</span>(reg)){</span><br><span class="line"> <span class="comment">//包含；</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。</span></span><br></pre></td></tr></table></figure>
<p><strong>方法三: search()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"123"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">search</span>(<span class="string">"2"</span>) != -<span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line"><span class="comment">//search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。</span></span><br></pre></td></tr></table></figure>
<p><strong>方法四: test()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"123"</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="title class_">RegExp</span>(<span class="regexp">/3/</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(reg.<span class="title function_">test</span>(str) != -<span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line"><span class="comment">//test() 方法用于检索字符串中指定的值。返回 true 或 false。</span></span><br></pre></td></tr></table></figure>
<p><strong>方法五:exec()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"123"</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="title class_">RegExp</span>(<span class="regexp">/3/</span>);</span><br><span class="line"><span class="keyword">if</span>(reg.<span class="title function_">exec</span>(str)){</span><br><span class="line"> <span class="comment">//包含；</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。</span></span><br></pre></td></tr></table></figure>
<p><strong>方法六:includes()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组和字符串都拥有该方法</span></span><br><span class="line">str_arr.<span class="title function_">includes</span>(<span class="string">'xxx'</span>, start)</span><br></pre></td></tr></table></figure>
<h3 id="23-jq-添加类名（选中样式）"><a href="#23-jq-添加类名（选中样式）" class="headerlink" title="23-jq 添加类名（选中样式）"></a>23-jq 添加类名（选中样式）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不能用箭头函数</span></span><br><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">addClass</span>(<span class="string">'selected'</span>).<span class="title function_">siblings</span>().<span class="title function_">removeClass</span>(<span class="string">'selected'</span>)</span><br></pre></td></tr></table></figure>
<h3 id="24-async-x2F-await-基本使用"><a href="#24-async-x2F-await-基本使用" class="headerlink" title="24-async/await 基本使用"></a>24-async/await 基本使用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="title function_">ajaxstart</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">await</span> <span class="variable language_">this</span>.<span class="title function_">first</span>()</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">second</span>()</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">first</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resole,reject</span>)=></span>{</span><br><span class="line"> <span class="title function_">getName</span>({<span class="attr">id</span>:<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">fillingId</span>}).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="keyword">if</span>(res.<span class="property">status</span> == <span class="number">200</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'先执行'</span>)</span><br><span class="line"> <span class="title function_">resole</span>()</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"><span class="title function_">second</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'后执行'</span>)</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<h3 id="25-前端压缩图片"><a href="#25-前端压缩图片" class="headerlink" title="25-前端压缩图片"></a>25-前端压缩图片</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue</span></span><br><span class="line"><span class="comment">// 参数：file: file文件 也就是e.target.files[0]； callback:处理函数</span></span><br><span class="line"> <span class="title function_">compressImg</span>(<span class="params">file,callback</span>) {</span><br><span class="line"> <span class="keyword">let</span> disposeFile = file;</span><br><span class="line"> <span class="keyword">if</span> (<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(file) === <span class="string">'[object Blob]'</span>) {</span><br><span class="line"> disposeFile = <span class="keyword">new</span> <span class="title class_">File</span>([file], file.<span class="property">name</span>, { <span class="attr">type</span>: file.<span class="property">type</span> });</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> read = <span class="keyword">new</span> <span class="title class_">FileReader</span>(),</span><br><span class="line"> _that = <span class="variable language_">this</span>;</span><br><span class="line"> <span class="keyword">const</span> fileSize = <span class="built_in">parseFloat</span>(<span class="built_in">parseInt</span>(disposeFile[<span class="string">'size'</span>]) / <span class="number">1024</span> / <span class="number">1024</span>).<span class="title function_">toFixed</span>(<span class="number">2</span>);</span><br><span class="line"> <span class="comment">// 小于8M不压缩</span></span><br><span class="line"> <span class="keyword">if</span> (fileSize < <span class="number">8</span>){</span><br><span class="line"> <span class="keyword">return</span> file</span><br><span class="line"> }</span><br><span class="line"> read.<span class="title function_">readAsDataURL</span>(disposeFile);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> read.<span class="property">onload</span> = <span class="function">(<span class="params">e</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> img = <span class="keyword">new</span> <span class="title class_">Image</span>();</span><br><span class="line"> img.<span class="property">src</span> = e.<span class="property">target</span>.<span class="property">result</span>;</span><br><span class="line"> img.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> w = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="variable language_">this</span>.<span class="property">width</span> / <span class="number">2</span>),</span><br><span class="line"> h = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="variable language_">this</span>.<span class="property">height</span> / <span class="number">2</span>);</span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'canvas'</span>);</span><br><span class="line"> <span class="keyword">const</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">'2d'</span>);</span><br><span class="line"> <span class="keyword">let</span> base64;</span><br><span class="line"> canvas.<span class="title function_">setAttribute</span>(<span class="string">'width'</span>, w);</span><br><span class="line"> canvas.<span class="title function_">setAttribute</span>(<span class="string">'height'</span>, h);</span><br><span class="line"> ctx.<span class="title function_">drawImage</span>(<span class="variable language_">this</span>, <span class="number">0</span>, <span class="number">0</span>, w, h);</span><br><span class="line"> <span class="comment">// console.log(w, h);</span></span><br><span class="line"> <span class="keyword">if</span> (fileSize < <span class="number">1</span>) {</span><br><span class="line"> <span class="comment">// 如果图片小于一兆 那么不执行压缩操作</span></span><br><span class="line"> base64 = canvas.<span class="title function_">toDataURL</span>(disposeFile[<span class="string">'type'</span>], <span class="number">1</span>);</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (fileSize > <span class="number">1</span> && fileSize < <span class="number">2</span>) {</span><br><span class="line"> <span class="comment">// 如果图片大于1M并且小于2M 那么压缩0.5</span></span><br><span class="line"> base64 = canvas.<span class="title function_">toDataURL</span>(disposeFile[<span class="string">'type'</span>], <span class="number">0.5</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 如果图片超过2m 那么压缩0.2</span></span><br><span class="line"> base64 = canvas.<span class="title function_">toDataURL</span>(disposeFile[<span class="string">'type'</span>], <span class="number">0.2</span>);</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">let</span> filew = _that.<span class="title function_">dataURLtoFile</span>(base64, disposeFile.<span class="property">name</span>)</span><br><span class="line"> <span class="title function_">callback</span>(filew)</span><br><span class="line"></span><br><span class="line"> };</span><br><span class="line"> };</span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="title function_">reject</span>(disposeFile);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//将base64编码转回file文件</span></span><br><span class="line"> <span class="title function_">dataURLtoFile</span>(<span class="params">dataurl, fileName</span>) {</span><br><span class="line"> <span class="comment">// console.log(dataurl,4567);</span></span><br><span class="line"> <span class="keyword">var</span> arr = dataurl.<span class="title function_">split</span>(<span class="string">','</span>),</span><br><span class="line"> mime = arr[<span class="number">0</span>].<span class="title function_">match</span>(<span class="regexp">/:(.*?);/</span>)[<span class="number">1</span>],</span><br><span class="line"> bstr = <span class="title function_">atob</span>(arr[<span class="number">1</span>]),</span><br><span class="line"> n = bstr.<span class="property">length</span>,</span><br><span class="line"> u8arr = <span class="keyword">new</span> <span class="title class_">Uint8Array</span>(n);</span><br><span class="line"> <span class="keyword">while</span> (n--) {</span><br><span class="line"> u8arr[n] = bstr.<span class="title function_">charCodeAt</span>(n);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">File</span>([u8arr], fileName, {</span><br><span class="line"> <span class="attr">type</span>: mime,</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//调用实例 vant上传组件 触发函数afterRead 相当于input change事件</span></span><br><span class="line"> <span class="title function_">afterRead</span>(<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">var</span> _that = <span class="variable language_">this</span></span><br><span class="line"> _that.<span class="title function_">compressImg</span>(data.<span class="property">file</span>,<span class="keyword">function</span>(<span class="params">file</span>) {</span><br><span class="line"> <span class="keyword">var</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"> formData.<span class="title function_">append</span>(<span class="string">'upload'</span>, file)</span><br><span class="line"> <span class="title function_">upload</span>(formData).<span class="title function_">then</span>(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="keyword">if</span>(res.<span class="property">status</span> == <span class="number">200</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> }</span><br><span class="line"> }).<span class="title function_">catch</span>(<span class="function"><span class="params">e</span>=></span>{</span><br><span class="line"></span><br><span class="line"> })</span><br><span class="line"> });</span><br><span class="line"> </span><br></pre></td></tr></table></figure>
<h3 id="26-纯css-三角形"><a href="#26-纯css-三角形" class="headerlink" title="26-纯css 三角形"></a>26-纯css 三角形</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.san</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">100px</span> solid;</span><br><span class="line"> <span class="attribute">border-color</span>: orangered skyblue gold yellowgreen;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="27-拨打电话"><a href="#27-拨打电话" class="headerlink" title="27-拨打电话"></a>27-拨打电话</h3><p style="color: green;">
小程序/ 微信浏览器/普通浏览器 直接使用a标签 <br>
app 需要调用函数 <br>
见项目 p14-2 help 文件
</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 小程序/ 微信浏览器/普通浏览器 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"tel:02883226310"</span> <span class="attr">class</span>=<span class="string">"call1"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>平台热线<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./img/a.png"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="comment"><!-- app --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">onclick</span>=<span class="string">"callPhone1()"</span> <span class="attr">style</span>=<span class="string">'display:none'</span> <span class="attr">class</span>=<span class="string">"call3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>平台热线<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./img/a.png"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="28-VConsole"><a href="#28-VConsole" class="headerlink" title="28-VConsole"></a>28-VConsole</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">//在index.html 引入</span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vConsole/3.12.1/vconsole.min.js"</span> <span class="attr">type</span>=<span class="string">"application/javascript"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">var</span> c = <span class="keyword">new</span> <span class="title class_">VConsole</span>()</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="29-提示窗函数"><a href="#29-提示窗函数" class="headerlink" title="29-提示窗函数"></a>29-提示窗函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">mytip</span> (title,time) {</span><br><span class="line"> <span class="keyword">let</span> mydiv = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'div'</span>);</span><br><span class="line"> mydiv.<span class="property">innerHTML</span> = title;</span><br><span class="line"> mydiv.<span class="property">style</span>.<span class="property">cssText</span>=<span class="string">`</span></span><br><span class="line"><span class="string"> position: absolute;</span></span><br><span class="line"><span class="string"> top: 50%; </span></span><br><span class="line"><span class="string"> left: 50%;</span></span><br><span class="line"><span class="string"> transform: translateX(-50%);</span></span><br><span class="line"><span class="string"> background-color:rgba(0,0,0,.8);</span></span><br><span class="line"><span class="string"> color:#fff;</span></span><br><span class="line"><span class="string"> padding:10px 20px;</span></span><br><span class="line"><span class="string"> `</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(mydiv)</span><br><span class="line"> <span class="keyword">var</span> timer = <span class="built_in">setTimeout</span>(<span class="function">()=></span>{</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">removeChild</span>(mydiv)</span><br><span class="line"> <span class="built_in">clearTimeout</span>(timer)</span><br><span class="line"> },time)</span><br><span class="line">}</span><br><span class="line"><span class="comment">//jq</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">mytip</span> (title,time) {</span><br><span class="line"> <span class="keyword">var</span> str = <span class="string">''</span></span><br><span class="line"> str = <span class="string">`</span></span><br><span class="line"><span class="string"> <div class='tips' </span></span><br><span class="line"><span class="string"> style="</span></span><br><span class="line"><span class="string"> position: absolute;top: 50%;</span></span><br><span class="line"><span class="string"> left: 50%;</span></span><br><span class="line"><span class="string"> transform: translateX(-50%);</span></span><br><span class="line"><span class="string"> background-color:rgba(0,0,0,.8);</span></span><br><span class="line"><span class="string"> color:#fff;</span></span><br><span class="line"><span class="string"> padding:10px 20px;</span></span><br><span class="line"><span class="string"> "></span></span><br><span class="line"><span class="string"> <span class="subst">${title}</span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> `</span></span><br><span class="line"> $(<span class="string">'body'</span>).<span class="title function_">append</span>(str)</span><br><span class="line"> <span class="keyword">var</span> timer = <span class="built_in">setTimeout</span>(<span class="function">()=></span>{</span><br><span class="line"> $(<span class="string">'.tips'</span>).<span class="title function_">remove</span>()</span><br><span class="line"> <span class="built_in">clearTimeout</span>(timer)</span><br><span class="line"> },time)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="30-vue-深度修改样式"><a href="#30-vue-深度修改样式" class="headerlink" title="30-vue 深度修改样式"></a>30-vue 深度修改样式</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">sass语法:</span><br><span class="line"> ::v-deep .searchContainer {</span><br><span class="line"> width: 100%;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">less语法:</span><br><span class="line"> :deep(.searchContainer) { // 要注意小括号和花括号中间的空格，没有空格有时候会报错</span><br><span class="line"> width: 100%;</span><br><span class="line"> }</span><br><span class="line"> 或者</span><br><span class="line"> ::deep .searchContainer {</span><br><span class="line"> width: 100%;</span><br><span class="line"> }</span><br><span class="line"> 或者</span><br><span class="line"> /deep/ .searchContainer{</span><br><span class="line"> width: 100%;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h3 id="31-git"><a href="#31-git" class="headerlink" title="31-git"></a>31-git</h3><p>git用户名：www</p>
<p>pwd:wwy7***.0</p>
<p>提交代码</p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_44256848/article/details/123812716">https://blog.csdn.net/weixin_44256848/article/details/123812716</a></p>
<p>git pull<br>git add .<br>git commit -m ‘描述’<br>git push</p>
<p>更新代码</p>
<p><strong>git stash</strong> </p>
<p><strong>git fetch –all</strong></p>
<p><strong>git pull</strong></p>
<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/congcongerhuo/p/16810726.html">https://www.cnblogs.com/congcongerhuo/p/16810726.html</a></p>
<p>第一次拉取代码</p>
<p>git init</p>
<p>git remote add origin <a target="_blank" rel="noopener" href="http://10.143.132.221:18090/wjm/edu-cloud-vue-app.git">http://10.143.132.221:18090/wjm/edu-cloud-vue-app.git</a></p>
<p>git fetch origin dev</p>
<p>git checkout -b dev origin/dev</p>
<p>git pull origin dev</p>
<hr>
<p>首先，操作之前一定要看清分支！！</p>
<p>其次，提交代码之前一定要先更新代码！！</p>
<p>git branch —–查看当前分支</p>
<p>git pull —–更新代码到本地 </p>
<p>提交代码：</p>
<p>1、在本地修改相应文件（或者文件新旧替换）</p>
<p>2、git add <strong>/</strong>/文件名 （文件修改路径）</p>
<p>（注意路径要写对）</p>
<p>3、git status —-查看当前本地文件信息</p>
<p>4、 git commit -m “更改信息备注”</p>
<p>5、git push ——–提交代码到当前分支</p>
<p>（我一般git push 之前会看一下commit状态：git status）</p>
<p>到此Git提交代码就完成啦！</p>
<p>git 报错</p>
<p>1.执行 git pull 时：.error: Your local changes to the following files would be overwritten by merge:….php<br>Please, commit your changes or stash them before you can merge.</p>
<h3 id="32-图片填充"><a href="#32-图片填充" class="headerlink" title="32-图片填充"></a>32-图片填充</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">object-fit</span>:cover</span><br></pre></td></tr></table></figure>
<h3 id="33-video"><a href="#33-video" class="headerlink" title="33-video"></a>33-video</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">video</span>::-webkit-media-controls-fullscreen-button {</span><br><span class="line"> <span class="attr">display</span>: none</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-mute-button {</span><br><span class="line"> <span class="attr">display</span>: none</span><br><span class="line">}</span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-volume-slider {</span><br><span class="line"> <span class="attr">display</span>: none</span><br><span class="line">}</span><br><span class="line"><span class="attr">video</span>::-internal-media-controls-overflow-button{</span><br><span class="line"> <span class="attr">display</span>: none</span><br><span class="line">}</span><br><span class="line"><span class="attr">video</span>::-webkit-media-controls-toggle-closed-captions-button {</span><br><span class="line"> <span class="attr">display</span>: none;</span><br><span class="line">}</span><br><span class="line"><span class="attr">video</span>:-webkit-media-controls-volume-control-container{</span><br><span class="line"> <span class="attr">display</span>: none;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><video :src=<span class="string">"videoFlagUrl"</span> controls </span><br><span class="line"> controlslist=<span class="string">"nodownload nofullscreen noremoteplayback noplaybackrate"</span></span><br><span class="line"> disablePictureInPicture></span><br><span class="line"></video></span><br></pre></td></tr></table></figure>
<h3 id="34-轮播图-echarts图"><a href="#34-轮播图-echarts图" class="headerlink" title="34-轮播图+echarts图"></a>34-轮播图+echarts图</h3><p> echarts图表隐藏之后再展示出现变形</p>
<p><strong>解决方法：</strong></p>
<ol>
<li></li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var dom = document.getElementById( "jindu" );</span><br><span class="line">var myChart = echarts.init(dom);</span><br><span class="line">option = {</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">myChart.setOption(option);</span><br><span class="line">$(window).resize(myChart.resize);</span><br></pre></td></tr></table></figure>
<p>2.在图表要显示的地方添加代码：$(window).trigger(‘resize’);</p>
<h3 id="35-grid布局基本使用"><a href="#35-grid布局基本使用" class="headerlink" title="35-grid布局基本使用"></a>35-grid布局基本使用</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">display</span>: grid;</span><br><span class="line"><span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">4</span>, <span class="number">24%</span>);</span><br><span class="line"><span class="attribute">grid-row</span>-<span class="attribute">gap</span>: .<span class="number">15rem</span>;//行间隔</span><br><span class="line"><span class="attribute">grid-column</span>-<span class="attribute">gap</span>: <span class="number">1%</span>;//列间隔</span><br><span class="line">place-items: center center;</span><br></pre></td></tr></table></figure>
<h3 id="36-vant-list-注意事项"><a href="#36-vant-list-注意事项" class="headerlink" title="36-vant list 注意事项"></a>36-vant list 注意事项</h3><p>如果没有加载完 就切换tab 不会触发重新加载</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">解决办法(切换时间为例)：$nextTick</span><br><span class="line"><span class="title function_">changetime</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">finished</span> = <span class="literal">true</span></span><br><span class="line"> <span class="variable language_">this</span>.$nextTick(<span class="function">()=></span>{</span><br><span class="line"> <span class="comment">// 重新加载数据 </span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">onLoad</span>()</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</div>
<footer class="article-footer">
<a data-url="http://example.com/2023/06/27/notes/" data-id="clje1llzi0002o0u7dzxjburg" data-title="笔记" class="article-share-link"><span class="fa fa-share">分享</span></a>
</footer>
</div>
</article>
<article id="post-first" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2023/06/27/first/" class="article-date">
<time class="dt-published" datetime="2023-06-27T05:32:00.000Z" itemprop="datePublished">2023-06-27</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2023/06/27/first/">我的HexoDemo第一篇文章</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
<h1 id="巅峰见证虚伪的拥护，黄昏见证虔诚的信徒"><a href="#巅峰见证虚伪的拥护，黄昏见证虔诚的信徒" class="headerlink" title="巅峰见证虚伪的拥护，黄昏见证虔诚的信徒"></a>巅峰见证虚伪的拥护，黄昏见证虔诚的信徒</h1><p>这是我的博客第一篇文章，请大家多多支持我！</p>
</div>
<footer class="article-footer">
<a data-url="http://example.com/2023/06/27/first/" data-id="clje1llyz0000o0u77v7ieayl" data-title="我的HexoDemo第一篇文章" class="article-share-link"><span class="fa fa-share">分享</span></a>
</footer>
</div>
</article>
<article id="post-hello-world" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<div class="article-meta">
<a href="/2023/06/26/hello-world/" class="article-date">
<time class="dt-published" datetime="2023-06-26T07:14:45.648Z" itemprop="datePublished">2023-06-26</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="p-name article-title" href="/2023/06/26/hello-world/">Hello World</a>
</h1>
</header>
<div class="e-content article-entry" itemprop="articleBody">
<p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="/~https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://example.com/2023/06/26/hello-world/" data-id="clje1llza0001o0u7fe8ufe1n" data-title="Hello World" class="article-share-link"><span class="fa fa-share">分享</span></a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">归档</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/06/">六月 2023</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">最新文章</h3>
<div class="widget">
<ul>
<li>
<a href="/2023/06/27/notes/">笔记</a>
</li>
<li>
<a href="/2023/06/27/first/">我的HexoDemo第一篇文章</a>
</li>
<li>
<a href="/2023/06/26/hello-world/">Hello World</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2023 wwy<br>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="/js/jquery-3.6.4.min.js"></script>
<script src="/fancybox/jquery.fancybox.min.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>