-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
392 lines (188 loc) · 341 KB
/
search.xml
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>vue源码实现（第一章）劫持数据、this访问data</title>
<link href="/article/30a463f1.html"/>
<url>/article/30a463f1.html</url>
<content type="html"><![CDATA[<p>目标：</p><ol><li>理解vue响应式实现原理。</li><li>理解为什么能通过this访问data里的属性。</li></ol><h2 id="vue响应式原理"><a href="#vue响应式原理" class="headerlink" title="vue响应式原理"></a>vue响应式原理</h2><p>“重新定义”data里的属性<br>因为vue2里是对data里的属性重新定义了，相当于把data里面的属性重新重写了一遍，并给属性添加上对应的get，set方法。<br>所以vue3性能在此处会有所提高。</p><h2 id="为什么能通过this访问data里的属性"><a href="#为什么能通过this访问data里的属性" class="headerlink" title="为什么能通过this访问data里的属性"></a>为什么能通过this访问data里的属性</h2><p>在vue源码里vm挂载了一个_data属性，_data就是拷贝的一份data对象，因此在这一步就会形成了只能通过vm._data.xxx访问data对象，所以在vue里就使用了一个proxy函数代理转发。<br><em>以下为简化过的代理实现this访问data的主要代码</em></p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 初始化Vue中的data</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">initData</span>(<span class="params">vm</span>){</span><br><span class="line"> <span class="keyword">let</span> data = vm.<span class="property">$options</span>.<span class="property">data</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 判断data是否为对象</span></span><br><span class="line"> data = <span class="keyword">typeof</span> data === <span class="string">'function'</span> ? data.<span class="title function_">call</span>(vm): data;</span><br><span class="line"> vm.<span class="property">_data</span> = data;</span><br><span class="line"> <span class="comment">// 对数据进行劫持 vue2采用defineProperty</span></span><br><span class="line"> <span class="title function_">observe</span>(data);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 在vue中使用data里的数据的时候，使用的是this.xxx</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> data) {</span><br><span class="line"> <span class="title function_">proxy</span>(vm, <span class="string">'_data'</span>, key);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 代理_data</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">proxy</span>(<span class="params">vm, target, key</span>){</span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(vm, key, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> vm[target][key]; <span class="comment">// 实现this.xxx相当于vm._data.xxx</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">newVal</span>) {</span><br><span class="line"> <span class="keyword">if</span>(newVal === vm[target][key]) <span class="keyword">return</span>;</span><br><span class="line"> <span class="keyword">return</span> vm[target][key] = newVal;</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><em>vue源码defineProperty主要内容（以下并非源码，本人简化过后的）</em></p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Observe</span> {</span><br><span class="line"> <span class="comment">// Object.defineProperty只能劫持已经存在的属性</span></span><br><span class="line"> <span class="comment">// 所以vue会为此单独写一些api解决此问题 如 $set $delete</span></span><br><span class="line"> <span class="title function_">constructor</span> (data) {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">walk</span>(data);</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">walk</span>(<span class="params">data</span>){ <span class="comment">// 循环对象，对属性依次劫持</span></span><br><span class="line"> <span class="comment">// "重新定义" 属性</span></span><br><span class="line"> <span class="comment">// 因为vue2里是对data里重新定义了，相当于把data里面的属性重新重写了一遍</span></span><br><span class="line"> <span class="comment">// 而vue3里是采用了Proxy则不需要。所以vue3对此会性能有所提高</span></span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">keys</span>(data).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =></span> {</span><br><span class="line"> <span class="title function_">definReactive</span>(data, key, data[key])</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>} target 劫持的目标对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>} key 目标对象的key</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>} value 当前值</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">definReactive</span>(<span class="params">target, key, value</span>){ <span class="comment">// 闭包</span></span><br><span class="line"> <span class="title function_">observe</span>(value); <span class="comment">// 递归调用，如果是第一层是对象，则再次进行劫持</span></span><br><span class="line"> <span class="comment">// Object.defineProperty函数里面使用了外部函数的变量，形成闭包</span></span><br><span class="line"> <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(target, key, {</span><br><span class="line"> <span class="title function_">get</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">return</span> value</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">set</span>(<span class="params">newValue</span>){</span><br><span class="line"> <span class="keyword">if</span>(newValue === value) <span class="keyword">return</span>;</span><br><span class="line"> value = newValue;</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="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>} data 使用vue时里的data(){ return{} }</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">observe</span>(<span class="params">data</span>){</span><br><span class="line"> <span class="keyword">if</span>(<span class="keyword">typeof</span> data !== <span class="string">'object'</span> || data == <span class="literal">null</span>){</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Observe</span>(data)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue源码 </category>
</categories>
<tags>
<tag> Vue源码 </tag>
</tags>
</entry>
<entry>
<title>vue3 具名插槽、作用域插槽、动态插槽</title>
<link href="/article/acca74da.html"/>
<url>/article/acca74da.html</url>
<content type="html"><![CDATA[<h2 id="全部效果图"><a href="#全部效果图" class="headerlink" title="全部效果图"></a>全部效果图</h2><p><img src="https://img-blog.csdnimg.cn/87d4e918125f437d941666889e77da7b.png"></p><h2 id="匿名插槽"><a href="#匿名插槽" class="headerlink" title="匿名插槽"></a>匿名插槽</h2><p>子组件slot标签占位符<br>父组件在使用子组件的标签里面插入一个div即可<br><strong>子组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件1<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span>></span><span class="tag"></<span class="name">slot</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineOptions</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'slot-child1'</span></span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#d7e05d</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>父组件代码</strong></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><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 class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slot"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父组件<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color: brown;"</span>></span></span><br><span class="line"> 匿名插槽嵌入的内容</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">child1</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child1 <span class="keyword">from</span> <span class="string">'./components/child1.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.slot</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h2><p><em>具名插槽主要用于父组件使用子组件时，需要插入多个标签到子组件中不同的位置。</em><br>子组件slot标签占位符需要加一个name，表示插槽名。<br>父组件在使用子组件时需要使用template标签，并加入v-slot属性——v-slot:插槽名，简写形式 #插槽名。</p><p><strong>子组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件1<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"border: 1px solid rgb(7, 130, 202);"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"child1"</span>></span><span class="tag"></<span class="name">slot</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">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineOptions</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'slot-child1'</span></span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#d7e05d</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>父组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slot"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父组件<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> #<span class="attr">child1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color: rgb(64, 220, 33);"</span>></span></span><br><span class="line"> 这是具名插槽</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">template</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">child1</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child1 <span class="keyword">from</span> <span class="string">'./components/child1.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.slot</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h2><p>子组件可以将数据传递给父组件的插槽中使用<br>子组件slot标签占位符，添加一个自定义即可传值，如 :data=”item”<br>父组件在使用子组件的标签添加 #default=”{data}”即可使用data数据，或者v-slot=”{data}”也可以。<br>需注意：作用域i插槽不能与匿名插槽一同使用</p><p><strong>子组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件1<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in arr"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>></span></span><br><span class="line"> <span class="comment"><!-- 传值给父组件插槽标签 --></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span> <span class="attr">:data</span>=<span class="string">"item"</span>></span><span class="tag"></<span class="name">slot</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">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineOptions</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'slot-child1'</span></span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">Person</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">id</span>: number</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: string</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">List</span> {</span></span><br><span class="line"><span class="language-javascript"> [<span class="attr">index</span>: number]: <span class="title class_">Person</span></span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> arr = ref<<span class="title class_">List</span>>([</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">id</span>: <span class="number">1</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'张三'</span></span></span><br><span class="line"><span class="language-javascript"> },</span></span><br><span class="line"><span class="language-javascript"> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">id</span>: <span class="number">2</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'李四'</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript">])</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#d7e05d</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>父组件代码</strong></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><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 class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slot"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父组件<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child1</span>></span></span><br><span class="line"> <span class="comment"><!-- 作用域插槽 --></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> #<span class="attr">default</span>=<span class="string">"{data}"</span>></span></span><br><span class="line"> {{ data }}</span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">child1</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child1 <span class="keyword">from</span> <span class="string">'./components/child1.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.slot</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="动态插槽"><a href="#动态插槽" class="headerlink" title="动态插槽"></a>动态插槽</h2><p>动态插槽是将具名插槽的名称动态设置，在子组件定义插槽名称，父组件动态设置需要插入哪个位置。<br>父组件属性设置为 <strong>#[ 名称 ]</strong></p><p><strong>子组件代码</strong></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><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"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件1<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"border: 1px solid rgb(7, 130, 202);"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"child1"</span>></span><span class="tag"></<span class="name">slot</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">slot</span> <span class="attr">name</span>=<span class="string">"child2"</span>></span><span class="tag"></<span class="name">slot</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#d7e05d</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>父组件代码</strong></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><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="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slot"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父组件<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child1</span>></span></span><br><span class="line"> <span class="comment"><!-- 动态插槽 --></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> #[<span class="attr">str</span>]></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color: rgb(220, 33, 142);"</span>></span></span><br><span class="line"> 这是动态插槽{{ str }}</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">template</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">child1</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child1 <span class="keyword">from</span> <span class="string">'./components/child1.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> str = ref<string>(<span class="string">'child2'</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.slot</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue3中的 $ref 和 $parent</title>
<link href="/article/c45b59ea.html"/>
<url>/article/c45b59ea.html</url>
<content type="html"><![CDATA[<h2 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h2><p><strong>效果图结合全部代码看就好理解了</strong><br><img src="https://img-blog.csdnimg.cn/7bf0cea8702a4d16bd473aec1e1e1f44.gif#pic_center"></p><h2 id="ref"><a href="#ref" class="headerlink" title="$ref"></a>$ref</h2><ol><li>在父组件引入时绑定ref ，例如<code><Son ref="son"></Son></code></li><li>父组件获取子组件Son的实例，获取子组件dom与实例，变量名需要与标签上的ref值一致<figure class="highlight typescript"><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="comment">// 获取子组件dom与实例，变量名需要与子组件的ref一致</span></span><br><span class="line"><span class="comment">// Ref<InstanceType<typeof Son> | null> 表示它可以持有Son组件的实例类型或null。</span></span><br><span class="line"><span class="keyword">let</span> son = ref<<span class="title class_">InstanceType</span><<span class="keyword">typeof</span> <span class="title class_">Son</span>> | <span class="literal">null</span>>(<span class="literal">null</span>);</span><br></pre></td></tr></table></figure></li><li>获取子组件的属性和方法，需要在子组件使用defineExpose方法对外暴露</li></ol><figure class="highlight typescript"><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="title function_">defineExpose</span>({</span><br><span class="line"> money, <span class="comment">// 属性</span></span><br><span class="line"> setMoney <span class="comment">// 方法</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><ol start="4"><li>获取子组件参数或调用子组件方法，示例</li></ol><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> son = ref<<span class="title class_">InstanceType</span><<span class="keyword">typeof</span> <span class="title class_">Son</span>> | <span class="literal">null</span>>(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getSonMoney = ():<span class="function"><span class="params">void</span> =></span> {</span><br><span class="line"><span class="comment">// son?.value?.money获取子组件的属性</span></span><br><span class="line"> sonMoney.<span class="property">value</span> = <<span class="built_in">number</span>>son?.<span class="property">value</span>?.<span class="property">money</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> setSonMoney = ( <span class="attr">num</span>: <span class="built_in">number</span> ):<span class="function"><span class="params">void</span> =></span> {</span><br><span class="line"> money.<span class="property">value</span> += num;</span><br><span class="line"> <span class="comment">// 调用子组件的方法</span></span><br><span class="line"> son.<span class="property">value</span>?.<span class="title function_">setMoney</span>(num);</span><br><span class="line"> <span class="title function_">getSonMoney</span>();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="parent"><a href="#parent" class="headerlink" title="$parent"></a>$parent</h2><p>子组件获取父组件的属性与方法，需要传入$parent，同时，父组件也需要使用<strong>defineExpose</strong> 对外暴露，才能使用</p><figure class="highlight html"><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="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"getParentMoney($parent)"</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span>查看父亲的余额<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight typescript"><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">const</span> getParentMoney = (parent):<span class="function"><span class="params">void</span> =></span> {</span><br><span class="line"> <span class="title function_">alert</span>(<span class="string">`父亲余额: <span class="subst">${parent.money}</span>`</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="全部代码"><a href="#全部代码" class="headerlink" title="全部代码"></a>全部代码</h2><p> <strong>父组件</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</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">h1</span>></span>父亲余额：{{ money }}<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"getSonMoney"</span> <span class="attr">type</span>=<span class="string">"success"</span>></span>查看儿子的余额<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"setSonMoney(500)"</span> <span class="attr">type</span>=<span class="string">"info"</span>></span>借儿子500<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">hr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Son</span> <span class="attr">ref</span>=<span class="string">"son"</span>></span><span class="tag"></<span class="name">Son</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h5</span>></span>儿子余额:{{ sonMoney }}<span class="tag"></<span class="name">h5</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> <span class="title class_">Son</span> <span class="keyword">from</span> <span class="string">'./components/son.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> money = ref<number>(<span class="number">50000</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> sonMoney = ref<number>(<span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 获取子组件dom与实例，变量名需要与子组件的ref一致</span></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// Ref<InstanceType<typeof Son> | null> 表示它可以持有Son组件的实例类型或null。</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> son = ref<<span class="title class_">InstanceType</span><<span class="keyword">typeof</span> <span class="title class_">Son</span>> | <span class="literal">null</span>>(<span class="literal">null</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> getSonMoney = ():<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> sonMoney.<span class="property">value</span> = <number>son?.<span class="property">value</span>?.<span class="property">money</span>;</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> setSonMoney = ( <span class="attr">num</span>: number ):<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> money.<span class="property">value</span> += num;</span></span><br><span class="line"><span class="language-javascript"> son.<span class="property">value</span>?.<span class="title function_">setMoney</span>(num);</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">getSonMoney</span>();</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> car = ():<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">alert</span>(<span class="string">'宝马740'</span>);</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineExpose</span>({</span></span><br><span class="line"><span class="language-javascript"> money,</span></span><br><span class="line"><span class="language-javascript"> car</span></span><br><span class="line"><span class="language-javascript">})</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>子组件</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</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">h3</span>></span>儿子<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"getParentMoney($parent)"</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span>查看父亲的余额<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"getCar($parent)"</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span>跟父亲借车<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"></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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> money = ref<number>(<span class="number">3006</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> setMoney = ( <span class="attr">num</span>:number ):<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> money.<span class="property">value</span> -= num;</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> getParentMoney = (parent):<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">alert</span>(<span class="string">`父亲余额: <span class="subst">${parent.money}</span>`</span>)</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> getCar = (parent):<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> parent.<span class="title function_">car</span>()</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 父组件要获取该组件的属性和方法需要暴露出去</span></span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineExpose</span>({</span></span><br><span class="line"><span class="language-javascript"> money,</span></span><br><span class="line"><span class="language-javascript"> setMoney</span></span><br><span class="line"><span class="language-javascript">})</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue3使用v-model父子组件双向绑定</title>
<link href="/article/4425197e.html"/>
<url>/article/4425197e.html</url>
<content type="html"><![CDATA[<h2 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h2><p><img src="https://img-blog.csdnimg.cn/cae38d051b5747f7a474a4c7c9dba895.gif#pic_center"></p><h2 id="父组件代码"><a href="#父组件代码" class="headerlink" title="父组件代码"></a>父组件代码</h2><p>父组件传递给子组件使用 <strong>v-model：属性名</strong> 可以实现双向绑定，可使用多个v-model。<br>例如：<code><child v-model:inputValue="inputValue"></child></code></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父子组件双向绑定<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-input</span> <span class="attr">v-model.number</span>=<span class="string">"inputValue"</span> <span class="attr">placeholder</span>=<span class="string">"Please input"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"add"</span>></span>加一百<span class="tag"></<span class="name">el-button</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">v-model:inputValue</span>=<span class="string">"inputValue"</span>></span><span class="tag"></<span class="name">child</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child <span class="keyword">from</span> <span class="string">"./components/child.vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> inputValue = ref<number>(<span class="number">0</span>);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> add = ():<span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> inputValue.<span class="property">value</span> += <span class="number">100</span>;</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.father</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">800px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">600px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="子组件代码"><a href="#子组件代码" class="headerlink" title="子组件代码"></a>子组件代码</h2><p>子组件需要通过自定义事件触发，命名方式为 <strong>update：属性名</strong> </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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</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">h3</span>></span>我是子组件<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-input</span> <span class="attr">:value</span>=<span class="string">"inputValue"</span> <span class="attr">placeholder</span>=<span class="string">"子组件的值t"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">"primary"</span> @<span class="attr">click</span>=<span class="string">"sub"</span>></span>子组件减 一百 <span class="tag"></<span class="name">el-button</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">template</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">Props</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">inputValue</span>: number;</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> props = defineProps<<span class="title class_">Props</span>>();</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 需要以update开头 update:父组件传递过来的属性名</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> $emit = <span class="title function_">defineEmits</span>([<span class="string">'update:inputValue'</span>]);</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> sub = (): <span class="function"><span class="params">void</span> =></span> {</span></span><br><span class="line"><span class="language-javascript"> $emit(<span class="string">'update:inputValue'</span>, props.<span class="property">inputValue</span> - <span class="number">100</span>);</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue3——全局事件总线（mitt）</title>
<link href="/article/dfbb86e5.html"/>
<url>/article/dfbb86e5.html</url>
<content type="html"><![CDATA[<h2 id="安装mitt插件"><a href="#安装mitt插件" class="headerlink" title="安装mitt插件"></a>安装mitt插件</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i mitt --save</span><br></pre></td></tr></table></figure><h2 id="mitt使用"><a href="#mitt使用" class="headerlink" title="mitt使用"></a>mitt使用</h2><p><strong>在src下新建bus文件夹，在该文件夹下新建index.ts</strong><br>目录结构<br><img src="https://img-blog.csdnimg.cn/2c4b32de2f4048809abc331ef435bd6a.png"><br><strong>index.ts 文件代码</strong></p><figure class="highlight typescript"><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">import</span> mitt <span class="keyword">from</span> <span class="string">'mitt'</span>;</span><br><span class="line"><span class="keyword">const</span> $bus = <span class="title function_">mitt</span>();</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> $bus;</span><br></pre></td></tr></table></figure><h2 id="全局引入"><a href="#全局引入" class="headerlink" title="全局引入"></a>全局引入</h2><p>在main.ts中引入</p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { createApp } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ElementPlus</span> <span class="keyword">from</span> <span class="string">'element-plus'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'element-plus/dist/index.css'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'@/router'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 引入mitt并挂载</span></span><br><span class="line"><span class="keyword">import</span> $bus <span class="keyword">from</span> <span class="string">'@/bus'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// vue3的全局挂载方法方式</span></span><br><span class="line">app.<span class="property">config</span>.<span class="property">globalProperties</span>.<span class="property">$bus</span> = $bus;</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title class_">ElementPlus</span>);</span><br><span class="line">app.<span class="title function_">use</span>(router);</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">'#app'</span>);</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><p>视图文件结构<br><img src="https://img-blog.csdnimg.cn/7a2e253b7c5343549a12ebf40cf209f8.png"><br><strong>event-bus代码</strong><br>该文件用于展示兄弟组件传值，引入两个子组件</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><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="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"event-bus"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>全局事件总线<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Child1</span>></span><span class="tag"></<span class="name">Child1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Child12</span>></span><span class="tag"></<span class="name">Child12</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">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> <span class="title class_">Child1</span> <span class="keyword">from</span> <span class="string">'./index.vue'</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> <span class="title class_">Child12</span> <span class="keyword">from</span> <span class="string">'./index2.vue'</span></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.event-bus</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#dca7a7</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">1rem</span>;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.container</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">justify-content</span>: space-between;</span></span><br><span class="line"><span class="language-css"> }</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>child2组件向child组件传值</strong><br><strong>child2组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child2"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件2<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"send"</span>></span>送兄弟一个对象<span class="tag"></<span class="name">el-button</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { getCurrentInstance } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> {proxy} = <span class="title function_">getCurrentInstance</span>() <span class="keyword">as</span> any;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">send</span> = (<span class="params"></span>)=>{</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * <span class="doctag">@param</span> {<span class="type">string</span>} '' 事件类型，需与接收方一致</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * <span class="doctag">@param</span> {<span class="type">function</span>} () 回调</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> */</span></span></span><br><span class="line"><span class="language-javascript"> proxy?.<span class="property">$bus</span>.<span class="title function_">emit</span>(<span class="string">'girlFriend'</span>,{</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'翠花'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">18</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">sex</span>: <span class="string">'女'</span></span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child2</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#e2e472</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>child接收child2组件传来的值，需注意，事件类型要与发送方的名一致</strong><br><strong>child2组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件1<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>姓名：{{ girlFriend.name }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>性别{{ girlFriend.sex }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>年龄{{ girlFriend.age }}<span class="tag"></<span class="name">p</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { reactive, getCurrentInstance } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> { proxy } = <span class="title function_">getCurrentInstance</span>() <span class="keyword">as</span> any;</span></span><br><span class="line"><span class="language-javascript"><span class="comment">// '对象'接口</span></span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">GirlFriend</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: string</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: number</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">sex</span>: string</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> girlFriend = reactive<<span class="title class_">GirlFriend</span>>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">''</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">sex</span>: <span class="string">''</span></span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript"><span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * <span class="doctag">@param</span> {<span class="type">string</span>} '' 事件类型</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> * <span class="doctag">@param</span> {<span class="type">function</span>} () 回调</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"> */</span></span></span><br><span class="line"><span class="language-javascript">proxy?.<span class="property">$bus</span>.<span class="title function_">on</span>(<span class="string">'girlFriend'</span>, <span class="function">(<span class="params">obj: GirlFriend</span>) =></span> {</span></span><br><span class="line"><span class="language-javascript"> girlFriend = <span class="title class_">Object</span>.<span class="title function_">assign</span>(girlFriend,obj);</span></span><br><span class="line"><span class="language-javascript">})</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child1</span> {</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#72e4ab</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue3组合式api——父子组件相互传参、路由传参</title>
<link href="/article/2d2d5a07.html"/>
<url>/article/2d2d5a07.html</url>
<content type="html"><![CDATA[<h2 id="一、组件通信——父传子"><a href="#一、组件通信——父传子" class="headerlink" title="一、组件通信——父传子"></a>一、组件通信——父传子</h2><p>在vue3里，父子组件props的传值的区别主要在于子组件接收。<br>vue3中需要使用defineProps()，该方法不用导入可直接使用。<br><strong>父组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</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">h1</span>></span>父子组件props传值<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> <span class="attr">:username</span>=<span class="string">"username"</span> <span class="attr">:userinfo</span>=<span class="string">"userinfo"</span>></span><span class="tag"></<span class="name">child</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child <span class="keyword">from</span> <span class="string">'./components/child.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref,reactive } <span class="keyword">from</span> <span class="string">'vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> username = ref<string>(<span class="string">'王五'</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 性别枚举</span></span></span><br><span class="line"><span class="language-javascript">enum <span class="title class_">Gender</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Male</span> = <span class="string">'男'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Female</span> = <span class="string">'女'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="title class_">Unknown</span> = <span class="string">'未知'</span></span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">interface <span class="title class_">User</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">username</span>: string,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: number,</span></span><br><span class="line"><span class="language-javascript"> sex?: <span class="title class_">Gender</span></span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> userinfo = reactive<<span class="title class_">User</span>>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">username</span>: <span class="string">'李四'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">23</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">sex</span>: <span class="title class_">Gender</span>.<span class="property">Male</span></span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>子组件代码</strong></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><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"><span class="tag"><<span class="name">template</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">h2</span>></span>我是子组件<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> 这是父组件传的值：{{ username }}</span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"> 对象形式=></span><br><span class="line"> 姓名：{{ userinfo.username }},</span><br><span class="line"> 年龄：{{ userinfo.age }},</span><br><span class="line"> 性别：{{ userinfo.sex }}</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="title function_">defineProps</span>([<span class="string">'username'</span>,<span class="string">'userinfo'</span>]);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="二、组件通信——子传父"><a href="#二、组件通信——子传父" class="headerlink" title="二、组件通信——子传父"></a>二、组件通信——子传父</h2><p>子组件传值给父组件，主要是子组件通过defineEmits注册一个自定义事件，然后触发emit去调用该自定义事件，并传递参数给父组件。其他的与vue2一致.<br><strong>子组件代码</strong></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><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="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span>></span>我是子组件<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"emitTitle"</span> <span class="attr">type</span>=<span class="string">"primary"</span>></span>传给父组件<span class="tag"></<span class="name">el-button</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> title = ref<<span class="title class_">String</span>>(<span class="string">"我是子组件传给父组件的值"</span>);</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 使用defineEmits注册一个自定义事件</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> emit = <span class="title function_">defineEmits</span>([<span class="string">"getTitle"</span>])</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"><span class="comment">// 这部分与vue2一致</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">emitTitle</span> = (<span class="params"></span>) => {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">emit</span>(<span class="string">"getTitle"</span>, title.<span class="property">value</span>)</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.child</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#d1d1d1</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>父组件代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"father"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h1</span>></span>父子组件props传值<span class="tag"></<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child</span> @<span class="attr">getTitle</span>=<span class="string">"getTitle"</span>></span><span class="tag"></<span class="name">child</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h3</span>></span>子组件传过来的值：{{ title }}<span class="tag"></<span class="name">h3</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> child <span class="keyword">from</span> <span class="string">'./components/child.vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { ref } <span class="keyword">from</span> <span class="string">'vue'</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> title = ref<string>(<span class="string">''</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> <span class="title function_">getTitle</span> = (<span class="params">param: string</span>)=>{</span></span><br><span class="line"><span class="language-javascript"> title.<span class="property">value</span> = param;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'子组件传值 :>> '</span>, title.<span class="property">value</span>);</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.father</span>{</span></span><br><span class="line"><span class="language-css"> <span class="attribute">background-color</span>: <span class="number">#e4393c</span>;</span></span><br><span class="line"><span class="language-css"> <span class="attribute">padding</span>: <span class="number">1rem</span>;</span></span><br><span class="line"><span class="language-css">}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="三、路由传参"><a href="#三、路由传参" class="headerlink" title="三、路由传参"></a>三、路由传参</h2><p>在vue2中路由传参通过 <strong>this.$router.push</strong> 去跳转并传参的，接收参数是 <strong>this.$route.query或params</strong> 获取参数。<br>在vue3中是使用vue-router中的useRouter、useRoute，就相当于$router和route。</p><p><strong>1. query传参示例代码</strong></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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"home"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"routerQuery"</span> <span class="attr">type</span>=<span class="string">"success"</span>></span>query路由传参<span class="tag"></<span class="name">el-button</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { useRouter } <span class="keyword">from</span> <span class="string">"vue-router"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>(); <span class="comment">// 使用路由k</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">routerQuery</span> = (<span class="params"></span>) => {</span></span><br><span class="line"><span class="language-javascript"> router.<span class="title function_">push</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">path</span>: <span class="string">'/route-params'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">query</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'张三'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">22</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p><strong>接收参数</strong></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><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="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"route-params"</span>></span></span><br><span class="line"> {{ name }}</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { toRef } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { useRoute } <span class="keyword">from</span> <span class="string">"vue-router"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> route = <span class="title function_">useRoute</span>();</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> name = <span class="title function_">toRef</span>(route.<span class="property">query</span>.<span class="property">name</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><h2 id="2-注意：params传参"><a href="#2-注意：params传参" class="headerlink" title="2.***注意：params传参"></a>2.***注意：params传参</h2><h4 id="官方在2022-8-22在vue-router-4-1-4版本中宣布-官方说明"><a href="#官方在2022-8-22在vue-router-4-1-4版本中宣布-官方说明" class="headerlink" title="官方在2022-8-22在vue-router 4.1.4版本中宣布 官方说明"></a>官方在2022-8-22在vue-router 4.1.4版本中宣布 <a href="https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22">官方说明</a></h4><p><img src="https://img-blog.csdnimg.cn/52bc20a7080346c7b66133c3bbbbbf61.png#pic_center"><br><img src="https://img-blog.csdnimg.cn/dd8d2d3b87b84265b5691f519d1ab004.png#pic_center"><br><strong>所以，params可以使用history.state方式传参，并且解决了vue2中params刷新数据丢失问题。</strong><br>示例代码</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><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"home"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">"routerParmas"</span> <span class="attr">type</span>=<span class="string">"success"</span>></span>params路由传参<span class="tag"></<span class="name">el-button</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">template</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { useRouter } <span class="keyword">from</span> <span class="string">"vue-router"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>(); <span class="comment">// 使用路由k</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> <span class="title function_">routerParmas</span> = (<span class="params"></span>) => {</span></span><br><span class="line"><span class="language-javascript"> router.<span class="title function_">push</span>({</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'RouteParams'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">state</span>: {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">name</span>: <span class="string">'老刘'</span>,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">age</span>: <span class="number">33</span></span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> })</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><p>接收页面代码</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><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"route-params"</span>></span></span><br><span class="line"> {{ stateName }}</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">lang</span>=<span class="string">'ts'</span> <span class="attr">setup</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> { toRef } <span class="keyword">from</span> <span class="string">"vue"</span>;</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> stateName = <span class="title function_">toRef</span>(history.<span class="property">state</span>.<span class="property">name</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">'scss'</span> <span class="attr">scoped</span>></span></span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue3+ts+vite——项目搭建</title>
<link href="/article/6aeb4582.html"/>
<url>/article/6aeb4582.html</url>
<content type="html"><![CDATA[<h2 id="1、通过vite安装vue3-ts项目"><a href="#1、通过vite安装vue3-ts项目" class="headerlink" title="1、通过vite安装vue3+ts项目"></a>1、通过vite安装vue3+ts项目</h2><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm create vite<span class="meta">@latest</span></span><br></pre></td></tr></table></figure><p>然后按步骤选择相应选项</p><h2 id="2、安装依赖"><a href="#2、安装依赖" class="headerlink" title="2、安装依赖"></a>2、安装依赖</h2><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure><p>然后启动</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure><h2 id="3、配置-作为src路径引入"><a href="#3、配置-作为src路径引入" class="headerlink" title="3、配置@作为src路径引入"></a>3、配置@作为src路径引入</h2><h3 id="1-安装path模块，通过该模块配置路径。"><a href="#1-安装path模块，通过该模块配置路径。" class="headerlink" title="(1).安装path模块，通过该模块配置路径。"></a>(1).安装path模块，通过该模块配置路径。</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i path</span><br></pre></td></tr></table></figure><h3 id="2-在vite-config-ts中加入配置"><a href="#2-在vite-config-ts中加入配置" class="headerlink" title="(2).在vite.config.ts中加入配置"></a>(2).在vite.config.ts中加入配置</h3><figure class="highlight typescript"><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="attr">resolve</span>:{</span><br><span class="line"> <span class="attr">alias</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">find</span>:<span class="string">'@'</span>,</span><br><span class="line"> <span class="attr">replacement</span>:<span class="title function_">resolve</span>(__dirname,<span class="string">'src'</span>)</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><p><strong>全部代码：</strong></p><figure class="highlight typescript"><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="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'vite'</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">'@vitejs/plugin-vue'</span></span><br><span class="line"><span class="keyword">import</span> { resolve } <span class="keyword">from</span> <span class="string">"path"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>({</span><br><span class="line"> <span class="attr">plugins</span>: [<span class="title function_">vue</span>()],</span><br><span class="line"> <span class="attr">resolve</span>:{</span><br><span class="line"> <span class="attr">alias</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">find</span>:<span class="string">'@'</span>,</span><br><span class="line"> <span class="attr">replacement</span>:<span class="title function_">resolve</span>(__dirname,<span class="string">'src'</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="3-以上代码会出现ts提示找不到-dirname，需要安装node的类型提示"><a href="#3-以上代码会出现ts提示找不到-dirname，需要安装node的类型提示" class="headerlink" title="(3).以上代码会出现ts提示找不到__dirname，需要安装node的类型提示"></a>(3).以上代码会出现ts提示找不到__dirname，需要安装node的类型提示</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev <span class="meta">@types</span>/node</span><br></pre></td></tr></table></figure><h3 id="4-将src目录配置为-，在tsconfig-json配置加入"><a href="#4-将src目录配置为-，在tsconfig-json配置加入" class="headerlink" title="(4).将src目录配置为@，在tsconfig.json配置加入"></a>(4).将src目录配置为@，在tsconfig.json配置加入</h3><figure class="highlight typescript"><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="string">"baseUrl"</span>: <span class="string">"."</span>,</span><br><span class="line"> <span class="string">"paths"</span>: {</span><br><span class="line"> <span class="string">"@/*"</span>: [<span class="string">"src/*"</span>]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>全部代码</strong></p><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"compilerOptions"</span>: {</span><br><span class="line"> <span class="string">"target"</span>: <span class="string">"ES2020"</span>,</span><br><span class="line"> <span class="string">"useDefineForClassFields"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"module"</span>: <span class="string">"ESNext"</span>,</span><br><span class="line"> <span class="string">"lib"</span>: [<span class="string">"ES2020"</span>, <span class="string">"DOM"</span>, <span class="string">"DOM.Iterable"</span>],</span><br><span class="line"> <span class="string">"skipLibCheck"</span>: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* Bundler mode */</span></span><br><span class="line"> <span class="string">"moduleResolution"</span>: <span class="string">"bundler"</span>,</span><br><span class="line"> <span class="string">"allowImportingTsExtensions"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"resolveJsonModule"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"isolatedModules"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"noEmit"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"jsx"</span>: <span class="string">"preserve"</span>,</span><br><span class="line"> <span class="comment">/* Linting */</span></span><br><span class="line"> <span class="string">"strict"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"noUnusedLocals"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"noUnusedParameters"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"noFallthroughCasesInSwitch"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="string">"baseUrl"</span>: <span class="string">"."</span>,</span><br><span class="line"> <span class="string">"paths"</span>: {</span><br><span class="line"> <span class="string">"@/*"</span>: [<span class="string">"src/*"</span>]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="string">"include"</span>: [<span class="string">"src/**/*.ts"</span>, <span class="string">"src/**/*.d.ts"</span>, <span class="string">"src/**/*.tsx"</span>, <span class="string">"src/**/*.vue"</span>],</span><br><span class="line"> <span class="string">"references"</span>: [{ <span class="string">"path"</span>: <span class="string">"./tsconfig.node.json"</span> }]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="4、配置路由"><a href="#4、配置路由" class="headerlink" title="4、配置路由"></a>4、配置路由</h2><h3 id="（1）安装路由"><a href="#（1）安装路由" class="headerlink" title="（1）安装路由"></a>（1）安装路由</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-router</span><br></pre></td></tr></table></figure><h3 id="（2）在src下创建router文件夹，创建index-ts文件作为路由根文件"><a href="#（2）在src下创建router文件夹，创建index-ts文件作为路由根文件" class="headerlink" title="（2）在src下创建router文件夹，创建index.ts文件作为路由根文件"></a>（2）在src下创建router文件夹，创建index.ts文件作为路由根文件</h3><figure class="highlight typescript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { createRouter,createWebHashHistory } <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">path</span>:<span class="string">'/'</span>,</span><br><span class="line"> <span class="attr">component</span>: <span class="function">()=></span> <span class="keyword">import</span>(<span class="string">'@/views/home/index.vue'</span>)</span><br><span class="line"> },</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建路由对象</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>({</span><br><span class="line"> <span class="attr">history</span>: <span class="title function_">createWebHashHistory</span>(),</span><br><span class="line"> routes</span><br><span class="line">})</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router;</span><br><span class="line"><span class="number">3.</span>在main.<span class="property">ts</span>中use路由app.<span class="title function_">use</span>(router);</span><br><span class="line"><span class="keyword">import</span> { createApp } <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'@/router'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>);</span><br><span class="line">app.<span class="title function_">use</span>(router);</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">'#app'</span>);</span><br></pre></td></tr></table></figure><h2 id="5、sass使用"><a href="#5、sass使用" class="headerlink" title="5、sass使用"></a>5、sass使用</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i sass --save</span><br></pre></td></tr></table></figure><p>安装npm i sass –save，然后在页面使用即可</p>]]></content>
<categories>
<category> Vue3.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue-admin-template 登录改造</title>
<link href="/article/50415.html"/>
<url>/article/50415.html</url>
<content type="html"><![CDATA[<p>本文为修改vue-admin-template第一步，将请求地址和状态码改为自己项目的地址，并成功进入页面</p><h2 id="请求地址更改"><a href="#请求地址更改" class="headerlink" title="请求地址更改"></a>请求地址更改</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一种方法：</span></span><br><span class="line">在.<span class="property">env</span>.<span class="property">development</span>文件内，将 <span class="variable constant_">VUE_APP_BASE_API</span> = <span class="string">'/dev-api'</span></span><br><span class="line">改为：<span class="variable constant_">VUE_APP_BASE_API</span> = <span class="string">'http://127.0.0.1:8000'</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//第二种方法：</span></span><br><span class="line"><span class="comment">//在vue.config.js文件内</span></span><br><span class="line"><span class="comment">//注释掉mock接口配置</span></span><br><span class="line"><span class="comment">//配置代理转发请求到目标接口</span></span><br><span class="line"><span class="comment">// before: require('./mock/mock-server.js')</span></span><br><span class="line"><span class="attr">proxy</span>: {</span><br><span class="line"> <span class="string">'/dev-api'</span>: { <span class="comment">// 匹配所有以 '/dev-api'开头的请求路径</span></span><br><span class="line"> <span class="attr">target</span>: <span class="string">'http://localhost:8800'</span>,</span><br><span class="line"> <span class="attr">changeOrigin</span>: <span class="literal">true</span>, <span class="comment">// 支持跨域</span></span><br><span class="line"> <span class="attr">pathRewrite</span>: { <span class="comment">// 重写路径: 去掉路径中开头的'/dev-api'</span></span><br><span class="line"> <span class="string">'^/dev-api'</span>: <span class="string">''</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="request-js请求封装和状态码修改"><a href="#request-js请求封装和状态码修改" class="headerlink" title="request.js请求封装和状态码修改"></a>request.js请求封装和状态码修改</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">import</span> { <span class="title class_">MessageBox</span>, <span class="title class_">Message</span> } <span class="keyword">from</span> <span class="string">'element-ui'</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'@/store'</span></span><br><span class="line"><span class="keyword">import</span> { getToken } <span class="keyword">from</span> <span class="string">'@/utils/auth'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> service = axios.<span class="title function_">create</span>({</span><br><span class="line"> <span class="attr">baseURL</span>: process.<span class="property">env</span>.<span class="property">VUE_APP_BASE_API</span>,</span><br><span class="line"> <span class="comment">// withCredentials: true, // 发送cookie时，跨域请求</span></span><br><span class="line"> <span class="attr">timeout</span>: <span class="number">5000</span> <span class="comment">// request timeout</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(</span><br><span class="line"> <span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> <span class="comment">// 在发送请求之前做些什么</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (store.<span class="property">getters</span>.<span class="property">token</span>) {</span><br><span class="line"> <span class="comment">// 让每个请求都带有令牌</span></span><br><span class="line"> <span class="comment">// [' x token']是自定义标头键</span></span><br><span class="line"> <span class="comment">// 请根据实际情况修改 Authorization</span></span><br><span class="line"> <span class="comment">// config.headers['X-Token'] = getToken()</span></span><br><span class="line"> config.<span class="property">headers</span>[<span class="string">'Authorization'</span>] = <span class="title function_">getToken</span>()</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> config</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="params">error</span> =></span> {</span><br><span class="line"> <span class="comment">// 做一些请求错误</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error)</span><br><span class="line"> }</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应拦截器</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 如果您想获得HTTP信息，如标头或状态</span></span><br><span class="line"><span class="comment"> * return response => response</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></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="comment"> * 这里只是一个例子</span></span><br><span class="line"><span class="comment"> * 您也可以通过ttp状态码来判断状态</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="function"><span class="params">response</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> res = response.<span class="property">data</span></span><br><span class="line"> <span class="comment">// 根据后端状态码调整</span></span><br><span class="line"> <span class="comment">// 后端的状态码为 status 所以同步修改</span></span><br><span class="line"> res.<span class="property">code</span> = res.<span class="property">status</span></span><br><span class="line"> <span class="keyword">if</span> (res.<span class="property">code</span> !== <span class="number">0</span>) {</span><br><span class="line"> <span class="title class_">Message</span>({</span><br><span class="line"> <span class="attr">message</span>: res.<span class="property">msg</span> || <span class="string">'Error'</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'error'</span>,</span><br><span class="line"> <span class="attr">duration</span>: <span class="number">5</span> * <span class="number">1000</span></span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 50008: 非法令牌;50012:其他客户端已登录;50014:令牌过期;</span></span><br><span class="line"> <span class="keyword">if</span> (res.<span class="property">code</span> === <span class="number">50008</span> || res.<span class="property">code</span> === <span class="number">50012</span> || res.<span class="property">code</span> === <span class="number">50014</span>) {</span><br><span class="line"> <span class="comment">// to re-login</span></span><br><span class="line"> <span class="title class_">MessageBox</span>.<span class="title function_">confirm</span>(<span class="string">'您已退出登录，您可以取消以留在此页面上，或重新登录'</span>, <span class="string">'确认退出登录'</span>, {</span><br><span class="line"> <span class="attr">confirmButtonText</span>: <span class="string">'Re-Login'</span>,</span><br><span class="line"> <span class="attr">cancelButtonText</span>: <span class="string">'Cancel'</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'warning'</span></span><br><span class="line"> }).<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> store.<span class="title function_">dispatch</span>(<span class="string">'user/resetToken'</span>).<span class="title function_">then</span>(<span class="function">() =></span> {</span><br><span class="line"> location.<span class="title function_">reload</span>()</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(res.<span class="property">message</span> || <span class="string">'Error'</span>))</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> res</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="function"><span class="params">error</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'err'</span> + error) <span class="comment">// for debug</span></span><br><span class="line"> <span class="title class_">Message</span>({</span><br><span class="line"> <span class="attr">message</span>: error.<span class="property">message</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'error'</span>,</span><br><span class="line"> <span class="attr">duration</span>: <span class="number">5</span> * <span class="number">1000</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error)</span><br><span class="line"> }</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> service</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="修改请求的接口地址-api-user-js"><a href="#修改请求的接口地址-api-user-js" class="headerlink" title="修改请求的接口地址 api/user.js"></a>修改请求的接口地址 api/user.js</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">'@/utils/request'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 登录</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">login</span>(<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">request</span>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'/manage/login'</span>,</span><br><span class="line"> <span class="attr">method</span>: <span class="string">'post'</span>,</span><br><span class="line"> data</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取用户信息</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getInfo</span>(<span class="params">token</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">request</span>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'/manage/getUserInfo'</span>,</span><br><span class="line"> <span class="attr">method</span>: <span class="string">'post'</span>,</span><br><span class="line"> <span class="attr">data</span>: { token }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 退出登录 暂未有退出登录接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">logout</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">request</span>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">'/vue-admin-template/user/logout'</span>,</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><br><span class="line"></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue2.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>Vuex模块化后使用上的区别</title>
<link href="/article/25078.html"/>
<url>/article/25078.html</url>
<content type="html"><![CDATA[<h2 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h2><p><img src="https://img-blog.csdnimg.cn/10bf34538b144efd9adf54f2bd15f1a2.png" alt="在这里插入图片描述"></p><h2 id="index-js代码"><a href="#index-js代码" class="headerlink" title="index.js代码"></a>index.js代码</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">"vuex"</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入模块</span></span><br><span class="line"><span class="keyword">import</span> setting <span class="keyword">from</span> <span class="string">'./modules/setting'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> state = {</span><br><span class="line"> <span class="attr">sum</span>: <span class="number">12</span>,</span><br><span class="line"> <span class="attr">userInfo</span>: {</span><br><span class="line"> <span class="attr">username</span>: <span class="string">'张三'</span>,</span><br><span class="line"> <span class="attr">token</span>: <span class="string">'hnI6UOiu2GJKN42jhnknJiB7s'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 同步操作state的方法</span></span><br><span class="line"><span class="keyword">const</span> mutations = {</span><br><span class="line"> <span class="title function_">jia</span>(<span class="params">state,num</span>){</span><br><span class="line"> state.<span class="property">sum</span> += num;</span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">jian</span>(<span class="params">state,num</span>){</span><br><span class="line"> state.<span class="property">sum</span> -= num;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 对state的值加工处理后返回</span></span><br><span class="line"><span class="keyword">const</span> getters = {</span><br><span class="line"> <span class="title function_">bigSum</span>(<span class="params">state</span>){</span><br><span class="line"> <span class="keyword">return</span> state.<span class="property">sum</span> * <span class="number">10</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异步修改state，通过触发mutations的方法修改state</span></span><br><span class="line"><span class="keyword">const</span> actions = {</span><br><span class="line"> <span class="title function_">asyncJian</span>(<span class="params">context,value</span>){</span><br><span class="line"> <span class="comment">// 调用mutations下的方法更改state数据</span></span><br><span class="line"> context.<span class="title function_">commit</span>(<span class="string">'jian'</span>,value)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// modules集合</span></span><br><span class="line"><span class="keyword">const</span> modules = {</span><br><span class="line"> setting,</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>);</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>({</span><br><span class="line"> state,</span><br><span class="line"> actions,</span><br><span class="line"> mutations,</span><br><span class="line"> getters,</span><br><span class="line"> modules</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="setting模块代码"><a href="#setting模块代码" class="headerlink" title="setting模块代码"></a>setting模块代码</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> state = {</span><br><span class="line"> <span class="attr">threm</span>: <span class="string">'light'</span>, <span class="comment">// 系统主题色</span></span><br><span class="line"> <span class="attr">currentTime</span>: <span class="string">'暂未设置时间'</span> <span class="comment">// 当前时间</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 同步操作state的方法</span></span><br><span class="line"><span class="keyword">const</span> mutations = {</span><br><span class="line"> <span class="comment">// 改变主题</span></span><br><span class="line"> <span class="title function_">SET_THREM</span>(<span class="params">state,value</span>){</span><br><span class="line"> state.<span class="property">threm</span> = value;</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 更新当前时间</span></span><br><span class="line"> <span class="title function_">SET_TIME</span>(<span class="params">state,value</span>){</span><br><span class="line"> state.<span class="property">currentTime</span> = value;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异步操作state的方法，通过actions触发mutations的方法</span></span><br><span class="line"><span class="keyword">const</span> actions = {</span><br><span class="line"> <span class="title function_">setTime</span>(<span class="params">store,value</span>){</span><br><span class="line"> store.<span class="title function_">commit</span>(<span class="string">'SET_TIME'</span>,value);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 由于getter,action,mutation默认是注册在全局命名空间的，所以容易造成命名冲突的问题。</span></span><br><span class="line"><span class="comment"> * 为了解决这个问题，Vuex可以设置了、模块命名空间。</span></span><br><span class="line"><span class="comment"> * 通过给模块添加namespaced:true使其拥有自己的命名空间.</span></span><br><span class="line"><span class="comment"> * 这时getter，mutation，action都会自动根据模块注册的路径调整命名。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="attr">namespaced</span>: <span class="literal">true</span>, <span class="comment">// 开启命名空间，防止与其他模块的state污染</span></span><br><span class="line"> state,</span><br><span class="line"> mutations,</span><br><span class="line"> actions</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="非模块化下使用"><a href="#非模块化下使用" class="headerlink" title="非模块化下使用"></a>非模块化下使用</h2><figure class="highlight javascript"><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"><span class="keyword">import</span> { mapState,mapMutations,mapActions } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**********分割线***********/</span></span><br><span class="line"></span><br><span class="line"><span class="attr">computed</span>: {</span><br><span class="line">...<span class="title function_">mapState</span>([<span class="string">'userInfo'</span>,<span class="string">'sum'</span>]), <span class="comment">// 简写形式</span></span><br><span class="line">...<span class="title function_">mapState</span>( <span class="comment">// 完整写法</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">userInfo</span>: <span class="string">'userInfo'</span>,</span><br><span class="line"> <span class="attr">sum</span>: <span class="string">'sum'</span>,</span><br><span class="line"> },</span><br><span class="line"> ),</span><br><span class="line">},</span><br><span class="line"><span class="attr">methods</span>: {</span><br><span class="line"> ...<span class="title function_">mapMutations</span>([<span class="string">'jia'</span>]), <span class="comment">// 映射形式</span></span><br><span class="line"> ...<span class="title function_">mapActions</span>([<span class="string">'asyncJian'</span>]),</span><br><span class="line"><span class="comment">// 同步修改</span></span><br><span class="line"> <span class="title function_">changeSum1</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">'jia'</span>,<span class="number">2</span>); <span class="comment">// 方式一</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">jia</span>(<span class="number">2</span>); <span class="comment">// 方式二 调用映射的方法,前提需要使用mapMutations映射对应的方法</span></span><br><span class="line">},</span><br><span class="line"><span class="comment">// 异步修改</span></span><br><span class="line"> <span class="title function_">asyncChangeSum</span>(<span class="params"></span>){</span><br><span class="line"> <span class="built_in">setInterval</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">'asyncJian'</span>,<span class="number">2</span>); <span class="comment">// 方式一</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">asyncJian</span>(<span class="number">2</span>); <span class="comment">// 方式二 调用映射的方法,前提需要使用mapActions映射对应的方法</span></span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="模块化中使用"><a href="#模块化中使用" class="headerlink" title="模块化中使用"></a>模块化中使用</h2><figure class="highlight javascript"><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"><span class="keyword">import</span> { mapState,mapMutations,mapActions } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**********分割线***********/</span></span><br><span class="line"></span><br><span class="line"><span class="attr">computed</span>: {</span><br><span class="line">...<span class="title function_">mapState</span>(<span class="string">'setting'</span>,[<span class="string">'threm'</span>]), <span class="comment">// 简写形式 setting 模块中的数据</span></span><br><span class="line">...<span class="title function_">mapState</span>( <span class="comment">// 完整写法</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 获取setting模块下的state数据</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">Object</span>} state 将setting中的state放到index中的state</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="attr">threm</span>: <span class="function"><span class="params">state</span> =></span> state.<span class="property">setting</span>.<span class="property">threm</span>,</span><br><span class="line"> <span class="attr">currentTime</span>: <span class="function"><span class="params">state</span> =></span> state.<span class="property">setting</span>.<span class="property">currentTime</span>,</span><br><span class="line"> },</span><br><span class="line">),</span><br><span class="line">},</span><br><span class="line"><span class="attr">methods</span>: {</span><br><span class="line"> ...<span class="title function_">mapMutations</span>(<span class="string">'setting'</span>,[<span class="string">'SET_THREM'</span>]),</span><br><span class="line"> ...<span class="title function_">mapActions</span>(<span class="string">'setting'</span>,[<span class="string">'setTime'</span>]),</span><br><span class="line"><span class="comment">// 模块化同步修改</span></span><br><span class="line"> <span class="title function_">changeThrem</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">'setting/SET_THREM'</span>,<span class="string">'drak111'</span>); <span class="comment">// 方式一</span></span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">SET_THREM</span>(<span class="string">'drak'</span>); <span class="comment">// 方式二 映射</span></span><br><span class="line"> },</span><br><span class="line"> <span class="title function_">asyncChangeTime</span>(<span class="params"></span>){</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">'setting/setTime'</span>,<span class="string">'2023-06-02'</span>);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="title function_">setTime</span>(<span class="string">'2023-06-01'</span>); <span class="comment">// 方式二</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue2.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>vue.config.js配置</title>
<link href="/article/7918.html"/>
<url>/article/7918.html</url>
<content type="html"><![CDATA[<h2 id="文件存在位置"><a href="#文件存在位置" class="headerlink" title="文件存在位置"></a>文件存在位置</h2><p>vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件</p><h2 id="配置项代码"><a href="#配置项代码" class="headerlink" title="配置项代码"></a>配置项代码</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"><span class="comment">//默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.xxx.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.com/test/，则设置 publicPath 为 /test/。</span></span><br><span class="line"><span class="comment">//这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')</span></span><br><span class="line"><span class="attr">publicPath</span>: <span class="string">'./'</span>,</span><br><span class="line"><span class="attr">outputDir</span>:<span class="string">"dist"</span>, <span class="comment">// 打包输出文件的目录名字 默认"dist"</span></span><br><span class="line"><span class="attr">assetsDir</span>: <span class="string">'./static'</span>,<span class="comment">// 打包后静态资源存放目录的 (相对于 outputDir 的) 目录 默认为"", 默认与生成的index.html同级</span></span><br><span class="line">indexPath：<span class="string">"index.html"</span>,<span class="comment">// 打包后的入口文件 默认为index.html,默认就是index.html</span></span><br><span class="line"><span class="attr">filenameHashing</span>:<span class="literal">true</span>,<span class="comment">//默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。</span></span><br><span class="line"> <span class="attr">pages</span>: {</span><br><span class="line"> <span class="attr">index</span>: {</span><br><span class="line"> <span class="comment">// page 的入口</span></span><br><span class="line"> <span class="attr">entry</span>: <span class="string">'src/index/main.js'</span>,</span><br><span class="line"> <span class="comment">// 模板来源</span></span><br><span class="line"> <span class="attr">template</span>: <span class="string">'public/index.html'</span>,</span><br><span class="line"> <span class="comment">// 在 dist/index.html 的输出</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">'index.html'</span>,</span><br><span class="line"> <span class="comment">// 当使用 title 选项时，</span></span><br><span class="line"> <span class="comment">// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title></span></span><br><span class="line"> <span class="attr">title</span>: <span class="string">'Index Page'</span>,</span><br><span class="line"> <span class="comment">// 在这个页面中包含的块，默认情况下会包含</span></span><br><span class="line"> <span class="comment">// 提取出来的通用 chunk 和 vendor chunk。</span></span><br><span class="line"> <span class="attr">chunks</span>: [<span class="string">'chunk-vendors'</span>, <span class="string">'chunk-common'</span>, <span class="string">'index'</span>]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 官方解释：当使用只有入口的字符串格式时，</span></span><br><span class="line"> <span class="comment">// 模板会被推导为 `public/subpage.html`</span></span><br><span class="line"> <span class="comment">// 并且如果找不到的话，就回退到 `public/index.html`。</span></span><br><span class="line"> <span class="comment">// 输出文件名会被推导为 `subpage.html`。</span></span><br><span class="line"> <span class="attr">subpage</span>: <span class="string">'src/subpage/main.js'</span></span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"><span class="comment">//lintOnSave:</span></span><br><span class="line"><span class="comment">//1.是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。</span></span><br><span class="line"><span class="comment">//2.设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。</span></span><br><span class="line"><span class="comment">//3.如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。</span></span><br><span class="line"><span class="attr">lintOnSave</span>:<span class="literal">true</span>,</span><br><span class="line"><span class="attr">runtimeCompiler</span>:<span class="literal">false</span>,<span class="comment">//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。</span></span><br><span class="line"><span class="attr">transpileDependencies</span>:[],<span class="comment">//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。</span></span><br><span class="line"><span class="attr">productionSourceMap</span>:<span class="literal">true</span>,<span class="comment">//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 这玩意设置成false之后，能把打包后的文件大小减小80% 当时我的项目大小是8m+ 设成false之后变成了2m+ productionSourceMap:false,之后，就不会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以加密源码。</span></span><br><span class="line"><span class="attr">crossorigin</span>:<span class="string">"undefined"</span>,<span class="comment">//设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。</span></span><br><span class="line"><span class="attr">integrity</span>:<span class="literal">false</span>,<span class="comment">//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。</span></span><br><span class="line"><span class="attr">configureWebpack</span>:<span class="title class_">Object</span> | <span class="title class_">Function</span>,<span class="comment">//下面举个例子：</span></span><br><span class="line"><span class="attr">configureWebpack</span>: <span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">"production"</span>) {</span><br><span class="line"> <span class="comment">// 为生产环境修改配置...</span></span><br><span class="line"> config.<span class="property">mode</span> = <span class="string">"production"</span>;</span><br><span class="line"> <span class="comment">// 这里修改下 </span></span><br><span class="line">config.<span class="property">optimization</span>.<span class="property">minimizer</span> = [</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">UglifyJsPlugin</span>({</span><br><span class="line"><span class="attr">uglifyOptions</span>: {</span><br><span class="line"><span class="attr">compress</span>: {</span><br><span class="line"><span class="attr">warnings</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="attr">drop_console</span>: <span class="literal">true</span>, <span class="comment">//console</span></span><br><span class="line"><span class="attr">drop_debugger</span>: <span class="literal">true</span>,</span><br><span class="line"><span class="attr">pure_funcs</span>: [<span class="string">'console.log'</span>] <span class="comment">//移除console</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="comment">//打包文件大小配置</span></span><br><span class="line">config[<span class="string">"performance"</span>] = {</span><br><span class="line"><span class="string">"maxEntrypointSize"</span>:<span class="number">10000000</span>,</span><br><span class="line"><span class="string">"maxAssetSize"</span>:<span class="number">30000000</span></span><br><span class="line">}</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 为开发环境修改配置...</span></span><br><span class="line"> config.<span class="property">mode</span> = <span class="string">"development"</span>;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"><span class="comment">//上面是统一使用configureWebpack的函数模式，然后函数模式里面默认会有一个config参数，需要增加或者修改configureWebpack对应的参数，就直接使用config去修改就可以了！</span></span><br><span class="line"><span class="comment">//我这里使用了两个功能，第一个是打包build的时候去掉console的调试信息，第二个就是修改打包静态资源文件大小设置的配置</span></span><br><span class="line"><span class="attr">chainWebpack</span>:<span class="keyword">function</span>,<span class="comment">//是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。下面举个例子</span></span><br><span class="line"> <span class="attr">chainWebpack</span>: <span class="function"><span class="params">config</span> =></span> {</span><br><span class="line"> config.<span class="property">resolve</span>.<span class="property">alias</span></span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'@'</span>, <span class="title function_">resolve</span>(<span class="string">'src'</span>))<span class="comment">//设置@快捷到src目录</span></span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'view'</span>, <span class="title function_">resolve</span>(<span class="string">'src/view'</span>))<span class="comment">//设置view快捷指定到src/view目录</span></span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'$css'</span>,<span class="title function_">resolve</span>(<span class="string">'/static/css'</span>))</span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'$common'</span>,<span class="title function_">resolve</span>(<span class="string">'/components'</span>))</span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'$api'</span>,<span class="title function_">resolve</span>(<span class="string">'/api'</span>))</span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'$page'</span>,<span class="title function_">resolve</span>(<span class="string">'/pages'</span>))</span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">'$js'</span>,<span class="title function_">resolve</span>(<span class="string">'/static/js'</span>));</span><br><span class="line"> <span class="comment">// 删除预加载</span></span><br><span class="line"> config.<span class="property">plugins</span>.<span class="title function_">delete</span>(<span class="string">'preload'</span>)</span><br><span class="line"> config.<span class="property">plugins</span>.<span class="title function_">delete</span>(<span class="string">'prefetch'</span>)</span><br><span class="line"> <span class="comment">// 压缩代码</span></span><br><span class="line"> config.<span class="property">optimization</span>.<span class="title function_">minimize</span>(<span class="literal">true</span>)</span><br><span class="line"> <span class="comment">// 分割代码</span></span><br><span class="line"> config.<span class="property">optimization</span>.<span class="title function_">splitChunks</span>({</span><br><span class="line"> <span class="attr">chunks</span>: <span class="string">'all'</span></span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">css</span>:{</span><br><span class="line"><span class="attr">modules</span>:<span class="literal">false</span>,<span class="comment">//默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。</span></span><br><span class="line"><span class="attr">extract</span>:<span class="literal">true</span>,<span class="comment">//Default: 生产环境下是 true，开发环境下是 false 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。</span></span><br><span class="line"><span class="attr">sourceMap</span>:<span class="literal">false</span>,<span class="comment">//是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。</span></span><br><span class="line"><span class="attr">loaderOptions</span>:{},<span class="comment">//向 CSS 相关的 loader 传递选项。例如：</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">devServer</span>:{</span><br><span class="line"> <span class="attr">proxy</span>:<span class="string">'http://localhost:8080'</span>,<span class="comment">//如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。http://localhost:8080这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000 如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。</span></span><br><span class="line"> <span class="attr">proxy</span>: {</span><br><span class="line"> <span class="comment">/** 配置后可将（示例）：http://127.0.0.1:3100/abc/testapi接口改变成</span></span><br><span class="line"><span class="comment"> * http://xxxx.xxx:8088/api/testapi请求</span></span><br><span class="line"><span class="comment"> * */</span></span><br><span class="line"> <span class="string">'/abc'</span>: {</span><br><span class="line"> <span class="attr">target</span>: <span class="string">'http://xxxx.xxx:8088'</span>,<span class="comment">// 后台接口域名</span></span><br><span class="line"> <span class="attr">secure</span>: <span class="literal">false</span>, <span class="comment">// 如果是https接口，需要配置这个参数</span></span><br><span class="line"> <span class="attr">ws</span>: <span class="literal">true</span>,<span class="comment">//如果要代理 websockets，配置这个参数</span></span><br><span class="line"> <span class="attr">changeOrigin</span>: <span class="literal">true</span>,<span class="comment">//是否跨域</span></span><br><span class="line"> <span class="attr">pathRewrite</span>: { <span class="comment">// 匹配到以/abc开头的替换成/api</span></span><br><span class="line"><span class="string">'^/abc'</span>: <span class="string">'/api'</span></span><br><span class="line">}</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 支持多项配置</span></span><br><span class="line"> <span class="string">'/foo'</span>: {</span><br><span class="line"> <span class="attr">target</span>: <span class="string">'<other_url>'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">parallel</span>:<span class="string">'boolean'</span>,<span class="comment">//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。</span></span><br><span class="line"> <span class="attr">pluginOptions</span>:{</span><br><span class="line"> <span class="comment">//less全局变量引用</span></span><br><span class="line"> <span class="string">'style-resources-loader'</span>: {</span><br><span class="line"> <span class="attr">preProcessor</span>: <span class="string">'less'</span>,</span><br><span class="line"> <span class="attr">patterns</span>: [</span><br><span class="line"> path.<span class="title function_">resolve</span>(__dirname, <span class="string">'./src/assets/varibles.less'</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><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue2.x </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>js项目常用数据处理算法——转树状结构、数组分页、模糊查询、数组去重、时间格式化、金额格式化、自定义复制粘贴</title>
<link href="/article/7363.html"/>
<url>/article/7363.html</url>
<content type="html"><![CDATA[<h2 id="一维数组转树状结构"><a href="#一维数组转树状结构" class="headerlink" title="一维数组转树状结构"></a>一维数组转树状结构</h2><figure class="highlight javascript"><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="keyword">let</span> arr = [</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">content</span>: <span class="string">'aaa'</span>, <span class="attr">pid</span>: <span class="literal">null</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">content</span>: <span class="string">'bbb'</span>, <span class="attr">pid</span>: <span class="number">1</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">content</span>: <span class="string">'ccc'</span>, <span class="attr">pid</span>: <span class="number">2</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">content</span>: <span class="string">'ddd'</span>, <span class="attr">pid</span>: <span class="number">1</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">5</span>, <span class="attr">content</span>: <span class="string">'eee'</span>, <span class="attr">pid</span>: <span class="number">1</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">6</span>, <span class="attr">content</span>: <span class="string">'fff'</span>, <span class="attr">pid</span>: <span class="literal">null</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">7</span>, <span class="attr">content</span>: <span class="string">'fff'</span>, <span class="attr">pid</span>: <span class="number">6</span> }</span><br><span class="line">]</span><br><span class="line"><span class="keyword">const</span> result = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">prev, curr, i, arr</span>) =></span> {</span><br><span class="line"> curr.<span class="property">children</span> = arr.<span class="title function_">filter</span>(<span class="function"><span class="params">v</span> =></span> v.<span class="property">pid</span> === curr.<span class="property">id</span>);</span><br><span class="line"> <span class="keyword">if</span> (!curr.<span class="property">pid</span>) prev.<span class="title function_">push</span>(curr);</span><br><span class="line"> <span class="keyword">return</span> prev</span><br><span class="line">}, [])</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure><h2 id="数组分页"><a href="#数组分页" class="headerlink" title="数组分页"></a>数组分页</h2><figure class="highlight javascript"><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"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 分页</span></span><br><span class="line"><span class="comment"> * {Array} arr 分页的数组</span></span><br><span class="line"><span class="comment"> * {Number} size 每页大小</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">chunkArrayInGroups</span>(<span class="params">arr, size</span>) {</span><br><span class="line"> <span class="keyword">var</span> length = arr.<span class="property">length</span>;</span><br><span class="line"> <span class="keyword">var</span> newArr = [];</span><br><span class="line"> <span class="keyword">var</span> i = <span class="title class_">Math</span>.<span class="title function_">ceil</span>(length / size * <span class="number">1.0</span>);</span><br><span class="line"> <span class="keyword">var</span> j = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">while</span> (j < i) {</span><br><span class="line"> <span class="keyword">var</span> spare = length - j * size >= size ? size : length - j * size;</span><br><span class="line"> <span class="keyword">var</span> temp = arr.<span class="title function_">slice</span>(j * size, j * size + spare);</span><br><span class="line"> newArr.<span class="title function_">push</span>(temp);</span><br><span class="line"> j++;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="数组对象模糊查询"><a href="#数组对象模糊查询" class="headerlink" title="数组对象模糊查询"></a>数组对象模糊查询</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"张三"</span>,</span><br><span class="line"> <span class="attr">phone</span>: <span class="string">"15512341234"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"李四"</span>,</span><br><span class="line"> <span class="attr">phone</span>: <span class="string">"13112341234"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">"王四"</span>,</span><br><span class="line"> <span class="attr">phone</span>: <span class="string">"18199809980"</span>,</span><br><span class="line"> },</span><br><span class="line">];</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fuzzySearch</span>(<span class="params">...keywords</span>) {</span><br><span class="line"> <span class="keyword">const</span> filteredArr = arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">item</span>) =></span> {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> keyword <span class="keyword">of</span> keywords) {</span><br><span class="line"> <span class="keyword">if</span> (</span><br><span class="line"> !item.<span class="property">name</span>.<span class="title function_">toLowerCase</span>().<span class="title function_">includes</span>(keyword.<span class="title function_">toLowerCase</span>()) &&</span><br><span class="line"> !item.<span class="property">phone</span>.<span class="title function_">toLowerCase</span>().<span class="title function_">includes</span>(keyword.<span class="title function_">toLowerCase</span>())</span><br><span class="line"> ) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">// 如果有一个关键词不匹配，则返回 false</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">// 如果所有关键词都匹配，则返回 true</span></span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> filteredArr;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 示例用法</span></span><br><span class="line"><span class="keyword">const</span> result = <span class="title function_">fuzzySearch</span>(<span class="string">"张"</span>, <span class="string">"5"</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br></pre></td></tr></table></figure><h2 id="数字、大小写字母、下划线随机n位字符串"><a href="#数字、大小写字母、下划线随机n位字符串" class="headerlink" title="数字、大小写字母、下划线随机n位字符串"></a>数字、大小写字母、下划线随机n位字符串</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// n为需要生成的位数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">generateMixed</span>(<span class="params">n</span>) {</span><br><span class="line"> <span class="keyword">let</span> chars = [<span class="string">"0"</span>,<span class="string">"1"</span>,<span class="string">"2"</span>,<span class="string">"3"</span>,<span class="string">"4"</span>,<span class="string">"5"</span>,<span class="string">"6"</span>,<span class="string">"7"</span>,<span class="string">"8"</span>,<span class="string">"9"</span>,<span class="string">"-"</span>,<span class="string">"A"</span>,<span class="string">"B"</span>,<span class="string">"C"</span>,<span class="string">"D"</span>,<span class="string">"E"</span>,<span class="string">"F"</span>,<span class="string">"G"</span>,<span class="string">"H"</span>,<span class="string">"I"</span>,<span class="string">"J"</span>,<span class="string">"K"</span>,<span class="string">"L"</span>,<span class="string">"M"</span>,<span class="string">"N"</span>,<span class="string">"O"</span>,<span class="string">"P"</span>,<span class="string">"Q"</span>,<span class="string">"R"</span>,<span class="string">"S"</span>,<span class="string">"T"</span>,<span class="string">"U"</span>,<span class="string">"V"</span>,<span class="string">"W"</span>,<span class="string">"X"</span>,<span class="string">"Y"</span>,<span class="string">"Z"</span>,<span class="string">"_"</span>,<span class="string">"a"</span>,<span class="string">"b"</span>,<span class="string">"c"</span>,<span class="string">"d"</span>,<span class="string">"e"</span>,<span class="string">"f"</span>,<span class="string">"g"</span>,<span class="string">"h"</span>,<span class="string">"i"</span>,<span class="string">"j"</span>,<span class="string">"k"</span>,<span class="string">"l"</span>,<span class="string">"m"</span>,<span class="string">"n"</span>,<span class="string">"o"</span>,<span class="string">"p"</span>,<span class="string">"q"</span>,<span class="string">"r"</span>,<span class="string">"s"</span>,<span class="string">"t"</span>,<span class="string">"u"</span>,<span class="string">"v"</span>,<span class="string">"w"</span>,<span class="string">"x"</span>,<span class="string">"y"</span>,<span class="string">"z"</span>];</span><br><span class="line"> <span class="keyword">let</span> res = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < n; i++) {</span><br><span class="line"> <span class="keyword">let</span> id = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * chars.<span class="property">length</span>);</span><br><span class="line"> res += chars[id];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> res;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="数组去重"><a href="#数组去重" class="headerlink" title="数组去重"></a>数组去重</h2><h3 id="方法一，Set对象"><a href="#方法一，Set对象" class="headerlink" title="方法一，Set对象"></a>方法一，Set对象</h3><figure class="highlight javascript"><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">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> newArr1 = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr));</span><br><span class="line"><span class="keyword">let</span> newArr2 = [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)];</span><br></pre></td></tr></table></figure><h3 id="方法二，foreach和for"><a href="#方法二，foreach和for" class="headerlink" title="方法二，foreach和for"></a>方法二，foreach和for</h3><figure class="highlight javascript"><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> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> newArr3 = [];</span><br><span class="line">arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, i</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (newArr3.<span class="title function_">indexOf</span>(item) == -<span class="number">1</span>) {</span><br><span class="line"> newArr3.<span class="title function_">push</span>(item);</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> newArr4 = [];</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">if</span> (!newArr4.<span class="title function_">includes</span>(arr[i])) {</span><br><span class="line"> newArr4.<span class="title function_">push</span>(arr[i]);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="方法三，数组对象Map对象去重"><a href="#方法三，数组对象Map对象去重" class="headerlink" title="方法三，数组对象Map对象去重"></a>方法三，数组对象Map对象去重</h3><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr2 = [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"1"</span>,</span><br><span class="line"> <span class="attr">key</span>: <span class="string">"1"</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">"明月"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"3"</span>,</span><br><span class="line"> <span class="attr">key</span>: <span class="string">"2"</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">"可欣"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"2"</span>,</span><br><span class="line"> <span class="attr">key</span>: <span class="string">"3"</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">"小红"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"1"</span>,</span><br><span class="line"> <span class="attr">key</span>: <span class="string">"1"</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">"小馨"</span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">id</span>: <span class="string">"1"</span>,</span><br><span class="line"> <span class="attr">key</span>: <span class="string">"2"</span>,</span><br><span class="line"> <span class="attr">value</span>: <span class="string">"小静"</span>,</span><br><span class="line"> },</span><br><span class="line">];</span><br><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> arr2) {</span><br><span class="line"> map.<span class="title function_">set</span>(item.<span class="property">id</span>, item);</span><br><span class="line">}</span><br><span class="line">arr2 = [...map.<span class="title function_">values</span>()];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2);</span><br></pre></td></tr></table></figure><h2 id="时间格式化，toLocaleString对象"><a href="#时间格式化，toLocaleString对象" class="headerlink" title="时间格式化，toLocaleString对象"></a>时间格式化，toLocaleString对象</h2><figure class="highlight javascript"><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="keyword">let</span> date = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(date.<span class="title function_">toLocaleString</span>()); <span class="comment">// 2022/12/31 上午11:36:33</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( date.<span class="title function_">toLocaleString</span>(<span class="string">"zh"</span>) ); <span class="comment">// "2022/12/31 上午11:51:01"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( date.<span class="title function_">toLocaleString</span>(<span class="string">"en"</span>) ); <span class="comment">// "12/31/2022, 11:51:01 AM"</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( date.<span class="title function_">toLocaleString</span>(<span class="string">"ja"</span>) ); <span class="comment">// "2022/12/31 11:51:01"</span></span><br></pre></td></tr></table></figure><h2 id="金额格式化"><a href="#金额格式化" class="headerlink" title="金额格式化"></a>金额格式化</h2><figure class="highlight javascript"><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"><span class="keyword">const</span> nums = <span class="number">32815498.56</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>() ); <span class="comment">// 32,815,498.56</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>(<span class="string">'zh'</span>, { <span class="attr">style</span>: <span class="string">'decimal'</span> }) ); <span class="comment">// 32,815,498.56</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>(<span class="string">'zh'</span>, { <span class="attr">style</span>: <span class="string">'percent'</span> }) ); <span class="comment">// 3,281,549,856%</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>(<span class="string">'zh'</span>, { <span class="attr">style</span>: <span class="string">'currency'</span>, <span class="attr">currency</span>: <span class="string">'CNY'</span> }) ); <span class="comment">// ¥32,815,498.56</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>(<span class="string">'zh'</span>, { <span class="attr">style</span>: <span class="string">'currency'</span>, <span class="attr">currency</span>: <span class="string">'cny'</span>, <span class="attr">currencyDisplay</span>: <span class="string">'code'</span> }) ); <span class="comment">// CNY 32,815,498.56</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( nums.<span class="title function_">toLocaleString</span>(<span class="string">'zh'</span>, { <span class="attr">style</span>: <span class="string">'currency'</span>, <span class="attr">currency</span>: <span class="string">'cny'</span>, <span class="attr">currencyDisplay</span>: <span class="string">'name'</span> }) ); <span class="comment">// 32,815,498.56人民币</span></span><br></pre></td></tr></table></figure><h2 id="自定义复制粘贴"><a href="#自定义复制粘贴" class="headerlink" title="自定义复制粘贴"></a>自定义复制粘贴</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><div <span class="keyword">class</span>=<span class="string">"empty-font"</span>>选中这一段文字，点击 ctrl+C 或 者右键选择复制</div></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">//监听整个页面的 copy 事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">"copy"</span>, <span class="keyword">function</span> (<span class="params">e</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> clipboardData = e.<span class="property">clipboardData</span> || <span class="variable language_">window</span>.<span class="property">clipboardData</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 如果 未复制或者未剪切，直接 return</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">if</span> (!clipboardData) <span class="keyword">return</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// Selection 对象 表示用户选择的文本范围或光标的当前位置。</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> text = <span class="variable language_">window</span>.<span class="title function_">getSelection</span>().<span class="title function_">toString</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">if</span> (text) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 如果文本存在，首先取消默认行为</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> e.<span class="title function_">preventDefault</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 通过调用 clipboardData 对象的 setData(format,data) 方法，设置相关文本</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// data 一个 DOMString 表示要添加到 drag object 的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> clipboardData.<span class="title function_">setData</span>(<span class="string">"text/plain"</span>, text + <span class="string">"\r\n---这是追加的版权内容"</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 工具库 </category>
</categories>
<tags>
<tag> JavaScript </tag>
<tag> Vue </tag>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>JavaScript 敏感词检测、替换、过滤</title>
<link href="/article/26196.html"/>
<url>/article/26196.html</url>
<content type="html"><![CDATA[<h2 id="一、检测是否存在敏感词"><a href="#一、检测是否存在敏感词" class="headerlink" title="一、检测是否存在敏感词"></a>一、检测是否存在敏感词</h2><p>效果：输入一个字符串，检测该字符串是否存在敏感词，返回Boolean。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 敏感词数组</span></span><br><span class="line"><span class="keyword">const</span> sensitiveWordsArray = [<span class="string">'你妹的'</span>,<span class="string">'你大爷'</span>,<span class="string">'傻'</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="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} str 检测的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">Boolean</span>} 是否存在敏感词</span></span><br><span class="line"><span class="comment"> * */</span> </span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">filtion</span>(<span class="params">str</span>) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < sensitiveWordsArray.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j <= str.<span class="property">length</span> - sensitiveWordsArray[i].<span class="property">length</span>; j++) {</span><br><span class="line"> <span class="comment">//根据敏感字符个数截取str的字符进行判断</span></span><br><span class="line"> <span class="keyword">if</span> (sensitiveWordsArray[i] == str.<span class="title function_">slice</span>(j, j + sensitiveWordsArray[i].<span class="property">length</span>)) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> </span><br></pre></td></tr></table></figure><h3 id="调用filtion示例"><a href="#调用filtion示例" class="headerlink" title="调用filtion示例"></a>调用<em><strong>filtion</strong></em>示例</h3><figure class="highlight javascript"><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="keyword">let</span> test_01 = <span class="title function_">flition</span>(<span class="string">'你大爷'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(test_01); <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h2 id="二、检测到后输入指定字符替换该敏感词"><a href="#二、检测到后输入指定字符替换该敏感词" class="headerlink" title="二、检测到后输入指定字符替换该敏感词"></a>二、检测到后输入指定字符替换该敏感词</h2><p>效果：输入一个字符串和替换字符，检测该字符串是否存在敏感词，存在则用替换词替换掉敏感词，返回新的字符串。</p><figure class="highlight javascript"><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="comment">/**</span></span><br><span class="line"><span class="comment"> * 替换</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} str 检测的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} char 替换的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">String</span>} 替换后的文字</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">replace</span>(<span class="params">str, char</span>) {</span><br><span class="line"> <span class="comment">//str: 需要进行替换的字符串</span></span><br><span class="line"> <span class="comment">//char: 需要替换的字符</span></span><br><span class="line"> <span class="comment">//遍历敏感词库</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < sensitiveWordsArray.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j <= str.<span class="property">length</span> - sensitiveWordsArray[i].<span class="property">length</span>; j++) {</span><br><span class="line"> <span class="comment">//根据敏感字符个数截取str的字符进行判断</span></span><br><span class="line"> <span class="keyword">if</span> (sensitiveWordsArray[i] == str.<span class="title function_">slice</span>(j, j + sensitiveWordsArray[i].<span class="property">length</span>)) {</span><br><span class="line"> <span class="keyword">let</span> c = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> k = <span class="number">0</span>; k < sensitiveWordsArray[i].<span class="property">length</span>; k++) {</span><br><span class="line"> c += char;</span><br><span class="line"> }</span><br><span class="line"> str = str.<span class="title function_">slice</span>(<span class="number">0</span>, j) + c + str.<span class="title function_">slice</span>(j + sensitiveWordsArray[i].<span class="property">length</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> str;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h3 id="调用replace示例"><a href="#调用replace示例" class="headerlink" title="调用replace示例"></a>调用<em><strong>replace</strong></em>示例</h3><figure class="highlight javascript"><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="keyword">let</span> test_02 = <span class="title function_">replace</span>(<span class="string">'你怎么能这样，去你大爷的'</span>,<span class="string">'*'</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(test_02); <span class="comment">// 你怎么能这样，去***的</span></span><br></pre></td></tr></table></figure><h2 id="全部代码"><a href="#全部代码" class="headerlink" title="全部代码"></a>全部代码</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sensitiveWordsArray = [<span class="string">'你妹的'</span>,<span class="string">'你大爷'</span>,<span class="string">'傻'</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="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} str 检测的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">Boolean</span>} 是否存在敏感词</span></span><br><span class="line"><span class="comment"> * */</span> </span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flition</span>(<span class="params">str</span>) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < sensitiveWordsArray.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j <= str.<span class="property">length</span> - sensitiveWordsArray[i].<span class="property">length</span>; j++) {</span><br><span class="line"> <span class="comment">//根据敏感字符个数截取str的字符进行判断</span></span><br><span class="line"> <span class="keyword">if</span> (sensitiveWordsArray[i] == str.<span class="title function_">slice</span>(j, j + sensitiveWordsArray[i].<span class="property">length</span>)) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></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="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} str 检测的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} char 替换的字符</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">String</span>} 替换后的文字</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">replace</span>(<span class="params">str, char</span>) {</span><br><span class="line"> <span class="comment">//str: 需要进行替换的字符串</span></span><br><span class="line"> <span class="comment">//char: 需要替换的字符</span></span><br><span class="line"> <span class="comment">//遍历敏感词库</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < sensitiveWordsArray.<span class="property">length</span>; i++) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j <= str.<span class="property">length</span> - sensitiveWordsArray[i].<span class="property">length</span>; j++) {</span><br><span class="line"> <span class="comment">//根据敏感字符个数截取str的字符进行判断</span></span><br><span class="line"> <span class="keyword">if</span> (sensitiveWordsArray[i] == str.<span class="title function_">slice</span>(j, j + sensitiveWordsArray[i].<span class="property">length</span>)) {</span><br><span class="line"> <span class="keyword">let</span> c = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> k = <span class="number">0</span>; k < sensitiveWordsArray[i].<span class="property">length</span>; k++) {</span><br><span class="line"> c += char;</span><br><span class="line"> }</span><br><span class="line"> str = str.<span class="title function_">slice</span>(<span class="number">0</span>, j) + c + str.<span class="title function_">slice</span>(j + sensitiveWordsArray[i].<span class="property">length</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> str;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> test_01 = <span class="title function_">flition</span>(<span class="string">'你大爷'</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(test_01); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> test_02 = <span class="title function_">replace</span>(<span class="string">'你怎么能这样，去你大爷的'</span>,<span class="string">'*'</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(test_02); <span class="comment">// 你怎么能这样，去***的</span></span><br></pre></td></tr></table></figure><h2 id="第三方库的使用"><a href="#第三方库的使用" class="headerlink" title="第三方库的使用"></a>第三方库的使用</h2><p>很多人因为找不到更多的敏感词，自己一个个添加敏感词的写又太麻烦，所以我在去年去网站爬了一点敏感词下来，敏感词类包括了 f罪、z治、b力、s情、x腥、r骂等。因考虑到词库记录不完整，为了方便使用者后续自行添加，打算不进行压缩。<br>该npm</p><h3 id="安装插件（该插件是我本人写的，并上传至npm的，放心使用）"><a href="#安装插件（该插件是我本人写的，并上传至npm的，放心使用）" class="headerlink" title="安装插件（该插件是我本人写的，并上传至npm的，放心使用）"></a>安装插件（该插件是我本人写的，并上传至npm的，放心使用）</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i verification-sensitive</span><br></pre></td></tr></table></figure><h3 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h3><figure class="highlight javascript"><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><br><span class="line"><span class="keyword">import</span> {replace,filtion} <span class="keyword">from</span> <span class="string">"verification-sensitive"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用replace 返回值为 字符串(被替换后的字符串)</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="title function_">replace</span>(<span class="string">"检索词"</span>,<span class="string">"替换字符"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 返回值为 Boolean类型(true含有敏感词,false无敏感词)</span></span><br><span class="line"><span class="keyword">let</span> flag = <span class="title function_">filtion</span>(<span class="string">"检索词"</span>);</span><br></pre></td></tr></table></figure><p><strong>另外，要是有更好的词库或方法，可以@我一下</strong></p>]]></content>
<categories>
<category> JavaScript </category>
</categories>
<tags>
<tag> JavaScript </tag>
<tag> Vue </tag>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>HTML 5标签 audio 音频的控制</title>
<link href="/article/61223.html"/>
<url>/article/61223.html</url>
<content type="html"><![CDATA[<h2 id="audio标签："><a href="#audio标签：" class="headerlink" title="audio标签："></a>audio标签：</h2><p><strong>1.HTML5 规定了在网页上嵌入音频元素的标准，即使用<audio>元素<br>2.audio元素支持mp3，wav，ogg三种格式</strong></p><h2 id="audio常用属性"><a href="#audio常用属性" class="headerlink" title="audio常用属性"></a>audio常用属性</h2><figure class="highlight javascript"><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="number">1.</span> controls 显示控制条</span><br><span class="line"><span class="number">2.</span> autoplay 自动播放，在最新版本谷歌浏览器不支持自动播放</span><br><span class="line"><span class="number">3.</span> loop 循环播放</span><br><span class="line"><span class="number">4.</span> preload 预加载音频资源</span><br><span class="line"><span class="number">5.</span> src 加载音频资源</span><br></pre></td></tr></table></figure><h2 id="audio常用方法"><a href="#audio常用方法" class="headerlink" title="audio常用方法"></a>audio常用方法</h2><figure class="highlight javascript"><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="number">1.</span> <span class="title function_">load</span>() 重新加载音频元素</span><br><span class="line"><span class="number">2.</span> <span class="title function_">play</span>() 开始播放音频</span><br><span class="line"><span class="number">3.</span> <span class="title function_">pause</span>() 暂停当前播放的音频</span><br></pre></td></tr></table></figure><h2 id="audio常用DOM属性"><a href="#audio常用DOM属性" class="headerlink" title="audio常用DOM属性"></a>audio常用DOM属性</h2><figure class="highlight javascript"><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="number">1.</span> canplay 当浏览器可以播放音频时</span><br><span class="line"><span class="number">2.</span> pause 当音频已暂停时</span><br><span class="line"><span class="number">3.</span> play 当视频已开始时</span><br><span class="line"><span class="number">4.</span> timeupdate 当目前的播放位置已更改时</span><br></pre></td></tr></table></figure><h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>控制音频的播放、暂停、重新播放、设置播放倍速、设置音量、获取进度、原生步进器控制播放进度</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><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">audio</span> <span class="attr">id</span>=<span class="string">"myAudio"</span> <span class="attr">autoplay</span> <span class="attr">src</span>=<span class="string">"你的音频路径"</span>></span><span class="tag"></<span class="name">audio</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.play()"</span>></span>播放<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.pause()"</span>></span>暂停<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.restart()"</span>></span>重新播放<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.setSpeed(1.5)"</span>></span>1.5x 倍速<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.setSpeed(1)"</span>></span>正常速度<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.setVolume(0.5)"</span>></span>50% 音量<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"player.setVolume(1)"</span>></span>100% 音量<span class="tag"></<span class="name">button</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">span</span> <span class="attr">id</span>=<span class="string">"currentTime"</span>></span><span class="tag"></<span class="name">span</span>></span> / <span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"duration"</span>></span><span class="tag"></<span class="name">span</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">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"range"</span> <span class="attr">min</span>=<span class="string">"0"</span> <span class="attr">max</span>=<span class="string">"100"</span> <span class="attr">step</span>=<span class="string">"0.01"</span> <span class="attr">value</span>=<span class="string">"0"</span> <span class="attr">onchange</span>=<span class="string">"seek(this.value)"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</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">class</span> <span class="title class_">AudioPlayer</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">constructor</span>(<span class="params">audioElement</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span> = audioElement;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 播放</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">play</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="title function_">play</span>();</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 暂停</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">pause</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="title function_">pause</span>();</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 重新播放，设置当前播放时间为0,再播放</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">restart</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="property">currentTime</span> = <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="title function_">play</span>();</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 设置播放速度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">setSpeed</span>(<span class="params">speed</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="property">playbackRate</span> = speed;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 设置播放音量</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">setVolume</span>(<span class="params">volume</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="property">volume</span> = volume;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 获取播放进度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">getTime</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> currentTime = <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="property">currentTime</span>; <span class="comment">// 当前时长</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> duration = <span class="variable language_">this</span>.<span class="property">audio</span>.<span class="property">duration</span>; <span class="comment">// 总时长</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> percentage = duration ? (currentTime / duration) * <span class="number">100</span> : <span class="number">0</span>;</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">currentTime</span>: currentTime,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">duration</span>: duration,</span></span><br><span class="line"><span class="language-javascript"> <span class="attr">percentage</span>: percentage</span></span><br><span class="line"><span class="language-javascript"> };</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> audio = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'myAudio'</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> player = <span class="keyword">new</span> <span class="title class_">AudioPlayer</span>(audio);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 回显播放时间</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">updateTime</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> time = player.<span class="title function_">getTime</span>();</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'currentTime'</span>).<span class="property">innerHTML</span> = <span class="title function_">formatTime</span>(time.<span class="property">currentTime</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'duration'</span>).<span class="property">innerHTML</span> = <span class="title function_">formatTime</span>(time.<span class="property">duration</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">'input[type="range"]'</span>).<span class="property">value</span> = time.<span class="property">percentage</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 格式化播放时间</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">formatTime</span>(<span class="params">time</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> minutes = <span class="title class_">Math</span>.<span class="title function_">floor</span>(time / <span class="number">60</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> seconds = <span class="title class_">Math</span>.<span class="title function_">floor</span>(time % <span class="number">60</span>);</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">return</span> <span class="string">`<span class="subst">${minutes}</span>:<span class="subst">${seconds < <span class="number">10</span> ? <span class="string">'0'</span> : <span class="string">''</span>}</span><span class="subst">${seconds}</span>`</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// 步进器控制播放进度</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">seek</span>(<span class="params">percentage</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> duration = player.<span class="title function_">getTime</span>().<span class="property">duration</span>;</span></span><br><span class="line"><span class="language-javascript"> player.<span class="property">audio</span>.<span class="property">currentTime</span> = duration * (percentage / <span class="number">100</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="built_in">setInterval</span>(updateTime, <span class="number">1000</span>);</span></span><br><span class="line"><span class="language-javascript"> </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">html</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> HTML 5 </category>
</categories>
<tags>
<tag> JavaScript </tag>
<tag> HTML 5 </tag>
</tags>
</entry>
<entry>
<title>mavon-editor富文本上传图片</title>
<link href="/article/26851.html"/>
<url>/article/26851.html</url>
<content type="html"><![CDATA[<p><strong>Vue使用<code>mavon-editor</code>上传图片</strong></p><p><strong>问题：</strong></p><ol><li>需要将markdown转成html代码存入数据库，而上传图片默认会转成base64</li><li>base64存入数据库显然不太合理，还会带来其他各种各样的问题</li></ol><p><strong>设计思路</strong></p><ol><li>将图片通过ajax上传到服务器</li><li>服务器保存好图片后将地址返回</li><li>拿到图片地址后通过<code>mavon-editor</code>的<code>this.$refs.md.$img2Url</code>方法放到对应位置</li></ol><p>先看效果图：<br><img src="https://img-blog.csdnimg.cn/4dd21520ff6641e892837884ae6346e4.gif" alt="在这里插入图片描述"></p><h2 id="接下来就是代码"><a href="#接下来就是代码" class="headerlink" title="接下来就是代码"></a>接下来就是代码</h2><p><strong>html部分</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">mavon-editor</span> <span class="attr">ref</span>=<span class="string">"md"</span> @<span class="attr">imgAdd</span>=<span class="string">"imgAdd"</span> @<span class="attr">imgDel</span>=<span class="string">"imgDel"</span> @<span class="attr">change</span>=<span class="string">"changeData"</span> <span class="attr">v-model</span>=<span class="string">"content"</span> <span class="attr">:toolbars</span>=<span class="string">"toolbars"</span> /></span></span><br></pre></td></tr></table></figure><p><strong>Js部分，我的后端用的是node，逻辑都是一样的，能返回图片存入地址就行了，代码就不展示了</strong></p><figure class="highlight javascript"><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="title function_">imgAdd</span>(<span class="params">pos, $file</span>) {</span><br><span class="line"> <span class="keyword">var</span> _this = <span class="variable language_">this</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">"file"</span>, $file);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">upload</span>(<span class="string">'/upload'</span>,formdata).<span class="title function_">then</span>(<span class="function">(<span class="params">response</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (response.<span class="property">status</span> === <span class="number">200</span>) {</span><br><span class="line"> <span class="keyword">var</span> url = response.<span class="property">data</span>.<span class="property">data</span>[<span class="number">0</span>].<span class="property">url</span>;</span><br><span class="line"> _this.<span class="property">$refs</span>.<span class="property">md</span>.$img2Url(pos, url);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="完整代码"><a href="#完整代码" class="headerlink" title="完整代码"></a>完整代码</h2><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"releaseDynamics"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"markdown"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">mavon-editor</span> <span class="attr">ref</span>=<span class="string">"md"</span> @<span class="attr">imgAdd</span>=<span class="string">"imgAdd"</span> @<span class="attr">imgDel</span>=<span class="string">"imgDel"</span> @<span class="attr">change</span>=<span class="string">"changeData"</span> <span class="attr">v-model</span>=<span class="string">"content"</span> <span class="attr">:toolbars</span>=<span class="string">"toolbars"</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">"ClientReleaseDynamics"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">formValidate</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">title</span>: <span class="string">""</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">cover</span>: <span class="literal">null</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">ruleValidate</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">title</span>: [{ <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">"标题不能为空"</span>, <span class="attr">trigger</span>: <span class="string">"blur"</span> }],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">cover</span>: [{ <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">"请上传封面"</span>, <span class="attr">trigger</span>: <span class="string">"change"</span> }],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">content</span>: <span class="string">""</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">toolbars</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">bold</span>: <span class="literal">true</span>, <span class="comment">// 粗体</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">italic</span>: <span class="literal">false</span>, <span class="comment">// 斜体</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">header</span>: <span class="literal">true</span>, <span class="comment">// 标题</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">underline</span>: <span class="literal">false</span>, <span class="comment">// 下划线</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">strikethrough</span>: <span class="literal">false</span>, <span class="comment">// 中划线</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">mark</span>: <span class="literal">false</span>, <span class="comment">// 标记</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">superscript</span>: <span class="literal">false</span>, <span class="comment">// 上角标</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">subscript</span>: <span class="literal">false</span>, <span class="comment">// 下角标</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">quote</span>: <span class="literal">false</span>, <span class="comment">// 引用</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">ol</span>: <span class="literal">true</span>, <span class="comment">// 有序列表</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">ul</span>: <span class="literal">false</span>, <span class="comment">// 无序列表</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">link</span>: <span class="literal">false</span>, <span class="comment">// 链接</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">imagelink</span>: <span class="literal">true</span>, <span class="comment">// 图片链接</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">code</span>: <span class="literal">false</span>, <span class="comment">// code</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">table</span>: <span class="literal">false</span>, <span class="comment">// 表格</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">fullscreen</span>: <span class="literal">true</span>, <span class="comment">// 全屏编辑</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">readmodel</span>: <span class="literal">false</span>, <span class="comment">// 沉浸式阅读</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">htmlcode</span>: <span class="literal">true</span>, <span class="comment">// 展示html源码</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">help</span>: <span class="literal">false</span>, <span class="comment">// 帮助</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">/* 1.3.5 */</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">undo</span>: <span class="literal">true</span>, <span class="comment">// 上一步</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">redo</span>: <span class="literal">true</span>, <span class="comment">// 下一步</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">trash</span>: <span class="literal">true</span>, <span class="comment">// 清空</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">save</span>: <span class="literal">false</span>, <span class="comment">// 保存（触发events中的save事件）</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">/* 1.4.2 */</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">navigation</span>: <span class="literal">false</span>, <span class="comment">// 导航目录</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">/* 2.1.8 */</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">alignleft</span>: <span class="literal">true</span>, <span class="comment">// 左对齐</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">aligncenter</span>: <span class="literal">true</span>, <span class="comment">// 居中</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">alignright</span>: <span class="literal">false</span>, <span class="comment">// 右对齐</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">/* 2.2.1 */</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">subfield</span>: <span class="literal">false</span>, <span class="comment">// 单双栏模式</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">preview</span>: <span class="literal">true</span>, <span class="comment">// 预览</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">showContent</span>: <span class="string">""</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">methods</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">changeData</span>(<span class="params">value, render</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// value中是文本值,render是渲染出的html文本</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">showContent</span> = render;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">console</span>.<span class="title function_">log</span>(render);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">imgAdd</span>(<span class="params">pos, $file</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">var</span> _this = <span class="variable language_">this</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">var</span> formdata = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> formdata.<span class="title function_">append</span>(<span class="string">"file"</span>, $file);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">upload</span>(<span class="string">'/upload'</span>,formdata).<span class="title function_">then</span>(<span class="function">(<span class="params">response</span>) =></span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 第二步.将返回的url替换到文本原位置 -> </span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">if</span> (response.<span class="property">status</span> === <span class="number">200</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">var</span> url = response.<span class="property">data</span>.<span class="property">data</span>[<span class="number">0</span>].<span class="property">url</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> _this.<span class="property">$refs</span>.<span class="property">md</span>.$img2Url(pos, url);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">imgDel</span>(<span class="params">pos</span>) {},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue2.x </category>
</categories>
<tags>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>图片裁剪上传 vue-cropper</title>
<link href="/article/12063.html"/>
<url>/article/12063.html</url>
<content type="html"><![CDATA[<p><strong>需求：<br>1.选择图片<br>2.裁剪图片<br>3.裁剪后的图片回显</strong></p><p><strong>设计思路：<br>1.选择图片后使用 <em>vue-cropper</em> 插件进行裁剪<br>2.裁剪后通过 <em>this.$refs.cropper.getCropBlob((data) => {})</em> 方法将图片转成formData<br>3.将formData通过 <em>FileReader</em> 对象转成base64渲染达到回显效果<br>4.将formData传递给父组件</strong></p><p><strong>效果图</strong><br><img src="https://img-blog.csdnimg.cn/5588625970484070887c15c2e043b44c.gif" alt="裁剪上传图片效果图"></p><h2 id="接下来就是代码了"><a href="#接下来就是代码了" class="headerlink" title="接下来就是代码了"></a>接下来就是代码了</h2><p><strong>首先安装iview，怎么安装就看文档去把，我的iview版本为2.14.3</strong><br><strong>安装 vue-cropper</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-cropper</span><br></pre></td></tr></table></figure><h2 id="将上传图片组件化，方便在父组件使用"><a href="#将上传图片组件化，方便在父组件使用" class="headerlink" title="将上传图片组件化，方便在父组件使用"></a>将上传图片组件化，方便在父组件使用</h2><p>子组件名为 <strong>UploadHeadImg.vue</strong> 代码如下</p><figure class="highlight javascript"><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><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Modal</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">v-model</span>=<span class="string">"modal1"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">title</span>=<span class="string">"操作图片"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:loading</span>=<span class="string">"loading"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> @<span class="attr">on-ok</span>=<span class="string">"uploadAvatar"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> ></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cropper"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">vueCropper</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">ref</span>=<span class="string">"cropper"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:img</span>=<span class="string">"option.img"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:outputSize</span>=<span class="string">"option.size"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:outputType</span>=<span class="string">"option.outputType"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:info</span>=<span class="string">"true"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:full</span>=<span class="string">"option.full"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:canMove</span>=<span class="string">"option.canMove"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:canMoveBox</span>=<span class="string">"option.canMoveBox"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:original</span>=<span class="string">"option.original"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:autoCrop</span>=<span class="string">"option.autoCrop"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:fixed</span>=<span class="string">"option.fixed"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:fixedNumber</span>=<span class="string">"option.fixedNumber"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:centerBox</span>=<span class="string">"option.centerBox"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:infoTrue</span>=<span class="string">"option.infoTrue"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:fixedBox</span>=<span class="string">"option.fixedBox"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> ></span><span class="tag"></<span class="name">vueCropper</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="comment"><!--cropper--></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">Modal</span>></span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Upload</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">ref</span>=<span class="string">"upload"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:show-upload-list</span>=<span class="string">"false"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:format</span>=<span class="string">"['jpg', 'jpeg', 'png']"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:max-size</span>=<span class="string">"2048"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">:before-upload</span>=<span class="string">"handeleBeforeUpload"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">type</span>=<span class="string">"drag"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">accept</span>=<span class="string">"image/*"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">action</span>=<span class="string">""</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> <span class="attr">class</span>=<span class="string">"upload-box"</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"> ></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"upload-icon"</span> <span class="attr">v-show</span>=<span class="string">"!imgSrc"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">Icon</span> <span class="attr">type</span>=<span class="string">"ios-camera"</span> <span class="attr">size</span>=<span class="string">"40"</span>></span><span class="tag"></<span class="name">Icon</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"upload-icon"</span> <span class="attr">v-show</span>=<span class="string">"imgSrc"</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"upload-img"</span> <span class="attr">:src</span>=<span class="string">"imgSrc"</span> <span class="attr">alt</span>=<span class="string">""</span> /></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">Upload</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> { <span class="title class_">VueCropper</span> } <span class="keyword">from</span> <span class="string">"vue-cropper"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">"UploadHeadImg"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">components</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title class_">VueCropper</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">modal1</span>: <span class="literal">false</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">imgSrc</span>: <span class="string">""</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">option</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">img</span>: <span class="string">""</span>, <span class="comment">// 裁剪图片的地址</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">info</span>: <span class="literal">true</span>, <span class="comment">// 裁剪框的大小信息</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">outputSize</span>: <span class="number">0.8</span>, <span class="comment">// 裁剪生成图片的质量</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">outputType</span>: <span class="string">"png"</span>, <span class="comment">// 裁剪生成图片的格式</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">canScale</span>: <span class="literal">false</span>, <span class="comment">// 图片是否允许滚轮缩放</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">autoCrop</span>: <span class="literal">true</span>, <span class="comment">// 是否默认生成截图框</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// autoCropWidth: 300, // 默认生成截图框宽度</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// autoCropHeight: 200, // 默认生成截图框高度</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">fixedBox</span>: <span class="literal">true</span>, <span class="comment">// 固定截图框大小 不允许改变</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">fixed</span>: <span class="literal">true</span>, <span class="comment">// 是否开启截图框宽高固定比例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">fixedNumber</span>: [<span class="number">1</span>, <span class="number">1</span>], <span class="comment">// 截图框的宽高比例</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">full</span>: <span class="literal">true</span>, <span class="comment">// 是否输出原图比例的截图</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">canMoveBox</span>: <span class="literal">false</span>, <span class="comment">// 截图框能否拖动</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">original</span>: <span class="literal">false</span>, <span class="comment">// 上传图片按照原始比例渲染</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">centerBox</span>: <span class="literal">false</span>, <span class="comment">// 截图框是否被限制在图片里面</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">infoTrue</span>: <span class="literal">true</span>, <span class="comment">// true 为展示真实输出图片宽高 false 展示看到的截图框宽高</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">fileinfo</span>: <span class="string">""</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 防止重复提交</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">loading</span>: <span class="literal">false</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">mounted</span>(<span class="params"></span>) {},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">methods</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">handeleBeforeUpload</span>(<span class="params">file</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">fileinfo</span> = file;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> data = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(<span class="keyword">new</span> <span class="title class_">Blob</span>([file]));</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">option</span>.<span class="property">img</span> = data;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">modal1</span> = <span class="literal">true</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> <span class="literal">false</span>; <span class="comment">//取消自动上传</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">uploadAvatar</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> that = <span class="variable language_">this</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">cropper</span>.<span class="title function_">getCropBlob</span>(<span class="function">(<span class="params">data</span>) =></span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> that.<span class="property">loading</span> = <span class="literal">true</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> that.<span class="property">$refs</span>.<span class="property">upload</span>.<span class="title function_">clearFiles</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> formData.<span class="title function_">append</span>(<span class="string">"file"</span>, data);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> file = formData.<span class="title function_">get</span>(<span class="string">"file"</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// 转为 base64</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">let</span> reader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> reader.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="comment">// base64结果</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> that.<span class="property">imgSrc</span> = <span class="variable language_">this</span>.<span class="property">result</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> that.<span class="property">loading</span> = <span class="literal">false</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> reader.<span class="title function_">readAsDataURL</span>(file);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> that.$emit(<span class="string">'getFormdata'</span>, file);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span> <span class="attr">scoped</span>></span><span class="language-css"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.cropper</span> {</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">width</span>: auto;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">height</span>: <span class="number">300px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.upload-box</span> {</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">margin</span>: <span class="number">20px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">display</span>: inline-block;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> ::v-deep .ivu-upload.ivu-upload-drag{</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="number">#999</span> <span class="meta">!important</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.upload-box</span>,</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.upload-icon</span>,</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.upload-img</span> {</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">width</span>: <span class="number">120px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">height</span>: <span class="number">120px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.upload-icon</span> {</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">display</span>: flex;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">align-items</span>: center;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> <span class="attribute">justify-content</span>: center;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">}</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span><span class="tag"></<span class="name">style</span>></span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="子组件写好了之后就到父组件使用了"><a href="#子组件写好了之后就到父组件使用了" class="headerlink" title="子组件写好了之后就到父组件使用了"></a>子组件写好了之后就到父组件使用了</h2><p><strong>父组件代码如下</strong></p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"><<span class="name">UploadHeadImg</span> @<span class="attr">getFormdata</span>=<span class="string">"getFormdata"</span>></span><span class="tag"></<span class="name">UploadHeadImg</span>></span></span></span><br><span class="line"><span class="language-xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">UploadHeadImg</span> <span class="keyword">from</span> <span class="string">'@/components/UploadHeadImg.vue'</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">name</span>: <span class="string">'ClientHome'</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">components</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title class_">UploadHeadImg</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">data</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="keyword">return</span> {};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="attr">methods</span>: {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="title function_">getFormdata</span>(<span class="params">v</span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> <span class="variable language_">console</span>.<span class="title function_">log</span>(v); <span class="comment">// 子组件自定义事件传过来的formData，后续用来上传到后端</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span> <span class="attr">scoped</span>></span></span></span><br><span class="line"><span class="language-xml"><span class="tag"></<span class="name">style</span>></span></span></span><br></pre></td></tr></table></figure><p><strong>以上就是全部代码了，对你有帮助的话记得点赞收藏哦</strong></p>]]></content>
<categories>
<category> Vue2.x </category>
</categories>
<tags>
<tag> 插件 </tag>
</tags>
</entry>
</search>