UNPKG

@shixinde/vuepress-theme-init

Version:

### 其他开源项目

shixindea.github.io/guoguo-notes/

shixindea/guoguo-notes

173 lines (172 loc) • 44.4 kB
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
import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},e=p(`<h2 id="main-js全局注册" tabindex="-1"><a class="header-anchor" href="#main-js全局注册"><span>main.js全局注册</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> Pagination <span class="token keyword">from</span> <span class="token string">&quot;@/components/Pagination&quot;</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line">Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&#39;Pagination&#39;</span><span class="token punctuation">,</span> Pagination<span class="token punctuation">)</span></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="页面引用" tabindex="-1"><a class="header-anchor" href="#页面引用"><span>页面引用</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pagination</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>total<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:total</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>total<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:page.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>queryParams.pageNum<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:limit.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>queryParams.pageSize<span class="token punctuation">&quot;</span></span></span> <span class="line"> <span class="token attr-name">@pagination</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getList<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="data-参数" tabindex="-1"><a class="header-anchor" href="#data-参数"><span>data 参数</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token literal-property property">total</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span> </span> <span class="line"><span class="token literal-property property">queryParams</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"><span class="token literal-property property">pageNum</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span> <span class="line"><span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span> <span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件代码" tabindex="-1"><a class="header-anchor" href="#组件代码"><span>组件代码</span></a></h2><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ &#39;hidden&#39;: hidden }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pagination-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-pagination</span> <span class="token attr-name">:background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>background<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:current-page.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentPage<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:page-size.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pageSize<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layout<span class="token punctuation">&quot;</span></span></span> <span class="line"> <span class="token attr-name">:page-sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pageSizes<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:total</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>total<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$attrs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@size-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleSizeChange<span class="token punctuation">&quot;</span></span></span> <span class="line"> <span class="token attr-name">@current-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleCurrentChange<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></span> <span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span> <span class="line"></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"></span> <span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> scrollTo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/utils/scroll-to&#39;</span></span> <span class="line"></span> <span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Pagination&#39;</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">total</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Number</span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token number">1</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token number">20</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">pageSizes</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Array<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;total, sizes, prev, pager, next, jumper&#39;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Boolean<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">autoScroll</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Boolean<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">hidden</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Boolean<span class="token punctuation">,</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">currentPage</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page</span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&#39;update:page&#39;</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>limit</span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&#39;update:limit&#39;</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">handleSizeChange</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;page,limit&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentPage<span class="token punctuation">,</span> val<span class="token punctuation">)</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&#39;pagination&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>currentPage<span class="token punctuation">,</span> <span class="token literal-property property">limit</span><span class="token operator">:</span> val <span class="token punctuation">}</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>autoScroll<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">handleCurrentChange</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;page,limit&quot;</span><span class="token punctuation">,</span> val<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">)</span></span> <span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&#39;pagination&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> val<span class="token punctuation">,</span> <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize <span class="token punctuation">}</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>autoScroll<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">800</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span> <span class="line"></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css"></span> <span class="line"><span class="token selector">.pagination-container</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span></span> <span class="line"> <span class="token property">padding</span><span class="token punctuation">:</span> 32px 16px<span class="token punctuation">;</span></span> <span class="line"> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span> <span class="line"> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span> <span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span></span> <span class="line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span></span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span> <span class="line"><span class="token selector">.pagination-container.hidden</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span></span> <span class="line"></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="scrool-to-js" tabindex="-1"><a class="header-anchor" href="#scrool-to-js"><span>scrool-to.js</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">Math<span class="token punctuation">.</span><span class="token function-variable function">easeInOutQuad</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">,</span> d</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> t <span class="token operator">/=</span> d <span class="token operator">/</span> <span class="token number">2</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator">&lt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> c <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">*</span> t <span class="token operator">*</span> t <span class="token operator">+</span> b</span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> t<span class="token operator">--</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token operator">-</span>c <span class="token operator">/</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>t <span class="token operator">*</span> <span class="token punctuation">(</span>t <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> b</span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span> <span class="line"><span class="token comment">// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts</span></span> <span class="line"><span class="token keyword">var</span> requestAnimFrame <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> window<span class="token punctuation">.</span>requestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>webkitRequestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>mozRequestAnimationFrame <span class="token operator">||</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> <span class="line"></span> <span class="line"><span class="token doc-comment comment">/**</span> <span class="line"> * Because it&#39;s so fucking difficult to detect the scrolling element, just move them all</span> <span class="line"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">amount</span></span> <span class="line"> */</span></span> <span class="line"><span class="token keyword">function</span> <span class="token function">move</span><span class="token punctuation">(</span><span class="token parameter">amount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> amount</span> <span class="line"> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> amount</span> <span class="line"> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">=</span> amount</span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span> <span class="line"><span class="token keyword">function</span> <span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop</span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span> <span class="line"><span class="token doc-comment comment">/**</span> <span class="line"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">to</span></span> <span class="line"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">duration</span></span> <span class="line"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>Function<span class="token punctuation">}</span></span> <span class="token parameter">callback</span></span> <span class="line"> */</span></span> <span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> duration<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token function">position</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token keyword">const</span> change <span class="token operator">=</span> to <span class="token operator">-</span> start</span> <span class="line"> <span class="token keyword">const</span> increment <span class="token operator">=</span> <span class="token number">20</span></span> <span class="line"> <span class="token keyword">let</span> currentTime <span class="token operator">=</span> <span class="token number">0</span></span> <span class="line"> duration <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span>duration<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;undefined&#39;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">500</span> <span class="token operator">:</span> duration</span> <span class="line"> <span class="token keyword">var</span> <span class="token function-variable function">animateScroll</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// increment the time</span></span> <span class="line"> currentTime <span class="token operator">+=</span> increment</span> <span class="line"> <span class="token comment">// find the value with the quadratic in-out easing function</span></span> <span class="line"> <span class="token keyword">var</span> val <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">easeInOutQuad</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">,</span> start<span class="token punctuation">,</span> change<span class="token punctuation">,</span> duration<span class="token punctuation">)</span></span> <span class="line"> <span class="token comment">// move the document.body</span></span> <span class="line"> <span class="token function">move</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span></span> <span class="line"> <span class="token comment">// do the animation unless its over</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>currentTime <span class="token operator">&lt;</span> duration<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">requestAnimFrame</span><span class="token punctuation">(</span>animateScroll<span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>callback <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> <span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&#39;function&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// the animation is done so lets callback</span></span> <span class="line"> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token function">animateScroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span> <span class="line"><span class="token punctuation">}</span></span> <span class="line"></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,10),l=[e];function o(c,i){return a(),s("div",null,l)}const r=n(t,[["render",o],["__file","分页组件.html.vue"]]),k=JSON.parse(`{"path":"/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85/%E5%88%86%E9%A1%B5%E7%BB%84%E4%BB%B6/%E5%88%86%E9%A1%B5%E7%BB%84%E4%BB%B6.html","title":"基于element-ui的分页组件","lang":"zh-CN","frontmatter":{"title":"基于element-ui的分页组件","date":"2023-5-21","tags":["element-ui","组件","封装"],"categories":["汇智篇"]},"headers":[{"level":2,"title":"main.js全局注册","slug":"main-js全局注册","link":"#main-js全局注册","children":[]},{"level":2,"title":"页面引用","slug":"页面引用","link":"#页面引用","children":[]},{"level":2,"title":"data 参数","slug":"data-参数","link":"#data-参数","children":[]},{"level":2,"title":"组件代码","slug":"组件代码","link":"#组件代码","children":[]},{"level":2,"title":"scrool-to.js","slug":"scrool-to-js","link":"#scrool-to-js","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"组件封装/分页组件/分页组件.md","excerpt":"<h2>main.js全局注册</h2>\\n<div class=\\"language-javascript\\" data-highlighter=\\"prismjs\\" data-ext=\\"js\\" data-title=\\"js\\"><pre class=\\"language-javascript\\"><code><span class=\\"line\\"><span class=\\"token keyword\\">import</span> Pagination <span class=\\"token keyword\\">from</span> <span class=\\"token string\\">\\"@/components/Pagination\\"</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\">Vue<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">component</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'Pagination'</span><span class=\\"token punctuation\\">,</span> Pagination<span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{r as comp,k as data};