@shixinde/vuepress-theme-init
Version:
146 lines (145 loc) • 45.5 kB
JavaScript
import{_ as s,c as n,o as a,a as p}from"./app-Dx9bNbfq.js";const e={},t=p(`<h2 id="拖拽-插件-vuedraggable" tabindex="-1"><a class="header-anchor" href="#拖拽-插件-vuedraggable"><span>拖拽 插件 vuedraggable</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 operator"><</span>Drager</span>
<span class="line"> @change<span class="token operator">=</span><span class="token string">"onChangeDrager"</span></span>
<span class="line"> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"theTabs"</span></span>
<span class="line"> item<span class="token operator">-</span>key<span class="token operator">=</span><span class="token string">"screeningId"</span></span>
<span class="line"> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"screen-tabs-drager scroll-ele"</span></span>
<span class="line"> id<span class="token operator">=</span><span class="token string">"scroll-ele"</span></span>
<span class="line"> <span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>template #item<span class="token operator">=</span><span class="token string">"{ element }"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>a<span class="token operator">-</span>card style<span class="token operator">=</span><span class="token string">"margin-bottom: 10px"</span> <span class="token operator">:</span>bordered<span class="token operator">=</span><span class="token string">"false"</span> theme<span class="token operator">=</span><span class="token string">"gray"</span><span class="token operator">></span></span>
<span class="line"> <span class="token punctuation">{</span><span class="token punctuation">{</span> element <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">-</span>card<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>Drager<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">import</span> Drager <span class="token keyword">from</span> <span class="token string">'vuedraggable'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> theTabs <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">onChangeDrager</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">e</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=></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">'change'</span><span class="token punctuation">,</span> e<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>
<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></div><h2 id="vconsole-手机上调试代码" tabindex="-1"><a class="header-anchor" href="#vconsole-手机上调试代码"><span>vConsole 手机上调试代码</span></a></h2><p>一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">npm install vconsole</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></div><p>基本用法</p><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> VConsole <span class="token keyword">from</span> <span class="token string">'vconsole'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> vConsole <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VConsole</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">'Hello world'</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></div><h2 id="animate-css-css3-动画库" tabindex="-1"><a class="header-anchor" href="#animate-css-css3-动画库"><span>Animate.css css3 动画库</span></a></h2><p>一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">npm install animate.css</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></div><p>基本用法</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import 'animate.css';</span>
<span class="line"></span>
<span class="line"><h1 class="animate__animated animate__bounce">An animated element</h1></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="mescroll-js-下拉刷新和上拉加载" tabindex="-1"><a class="header-anchor" href="#mescroll-js-下拉刷新和上拉加载"><span>mescroll.js 下拉刷新和上拉加载</span></a></h2><p>一款精致的、在 H5 端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">npm install mescroll.js</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></div><p>基本用法（vue 组件）</p><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"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mescroll-vue</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mescroll<span class="token punctuation">"</span></span> <span class="token attr-name">:down</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mescrollDown<span class="token punctuation">"</span></span> <span class="token attr-name">:up</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mescrollUp<span class="token punctuation">"</span></span> <span class="token attr-name">@init</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mescrollInit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token comment"><!--内容...--></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mescroll-vue</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token keyword">import</span> MescrollVue <span class="token keyword">from</span> <span class="token string">'mescroll.js/mescroll.vue'</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">components</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> MescrollVue</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">data</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>
<span class="line"> <span class="token literal-property property">mescroll</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// mescroll实例对象</span></span>
<span class="line"> <span class="token literal-property property">mescrollDown</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//下拉刷新的配置</span></span>
<span class="line"> <span class="token literal-property property">mescrollUp</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 上拉加载的配置</span></span>
<span class="line"> <span class="token literal-property property">callback</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>upCallback</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">dataList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 列表数据</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 comment">// 初始化的回调,可获取到mescroll对象</span></span>
<span class="line"> <span class="token function">mescrollInit</span><span class="token punctuation">(</span><span class="token parameter">mescroll</span><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>mescroll <span class="token operator">=</span> mescroll</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10</span></span>
<span class="line"> <span class="token function">upCallback</span><span class="token punctuation">(</span><span class="token parameter">page<span class="token punctuation">,</span> mescroll</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 发送请求</span></span>
<span class="line"> axios</span>
<span class="line"> <span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'xxxxxx'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">num</span><span class="token operator">:</span> page<span class="token punctuation">.</span>num<span class="token punctuation">,</span> <span class="token comment">// 当前页码</span></span>
<span class="line"> <span class="token literal-property property">size</span><span class="token operator">:</span> page<span class="token punctuation">.</span>size <span class="token comment">// 每页长度</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 punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 请求的列表数据</span></span>
<span class="line"> <span class="token keyword">let</span> arr <span class="token operator">=</span> response<span class="token punctuation">.</span>data</span>
<span class="line"> <span class="token comment">// 如果是第一页需手动置空列表</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>page<span class="token punctuation">.</span>num <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token comment">// 把请求到的数据添加到列表</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>dataList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataList<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">// 数据渲染成功后,隐藏下拉刷新的状态</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> mescroll<span class="token punctuation">.</span><span class="token function">endSuccess</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<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 punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 请求失败的回调,隐藏下拉刷新和上拉加载的状态;</span></span>
<span class="line"> mescroll<span class="token punctuation">.</span><span class="token function">endErr</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>
<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"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line"><span class="token selector">.mescroll</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">top</span><span class="token punctuation">:</span> 44px<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span>
<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> auto<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"></</span>style</span><span class="token punctuation">></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 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="chart-js-javascript-图表库" tabindex="-1"><a class="header-anchor" href="#chart-js-javascript-图表库"><span>Chart.js JavaScript 图表库</span></a></h2><p>一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">npm install chart<span class="token punctuation">.</span>js</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></div><p>基本用法</p><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 punctuation">;</span><span class="token operator"><</span>canvas id<span class="token operator">=</span><span class="token string">"myChart"</span> width<span class="token operator">=</span><span class="token string">"400"</span> height<span class="token operator">=</span><span class="token string">"400"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>canvas<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">import</span> Chart <span class="token keyword">from</span> <span class="token string">'chart.js/auto'</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 页面渲染完成后执行</span></span>
<span class="line"><span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myChart'</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">const</span> myChart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Red'</span><span class="token punctuation">,</span> <span class="token string">'Blue'</span><span class="token punctuation">,</span> <span class="token string">'Yellow'</span><span class="token punctuation">,</span> <span class="token string">'Green'</span><span class="token punctuation">,</span> <span class="token string">'Purple'</span><span class="token punctuation">,</span> <span class="token string">'Orange'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'# of Votes'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rgba(255, 99, 132, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(54, 162, 235, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 206, 86, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(75, 192, 192, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(153, 102, 255, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 159, 64, 0.2)'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rgba(255, 99, 132, 1)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(54, 162, 235, 1)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 206, 86, 1)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(75, 192, 192, 1)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(153, 102, 255, 1)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 159, 64, 1)'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</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">options</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">beginAtZero</span><span class="token operator">:</span> <span class="token boolean">true</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 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 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="day-js" tabindex="-1"><a class="header-anchor" href="#day-js"><span>Day.js</span></a></h2><p>一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有 2KB。</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">npm install dayjs</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></div><p>基本用法</p><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> dayjs <span class="token keyword">from</span> <span class="token string">'dayjs'</span></span>
<span class="line"></span>
<span class="line"><span class="token function">dayjs</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD HH:mm'</span><span class="token punctuation">)</span> <span class="token comment">// => 2022-01-03 16:06</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="qs-url-参数转换" tabindex="-1"><a class="header-anchor" href="#qs-url-参数转换"><span>qs url 参数转换</span></a></h2><p>一个轻量的 url 参数转换的 JavaScript 库</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">npm install qs</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></div><p>基本用法</p><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> qs <span class="token keyword">from</span> <span class="token string">'qs'</span></span>
<span class="line"></span>
<span class="line">qs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token string">'user=tom&age=22'</span><span class="token punctuation">)</span> <span class="token comment">// => { user: "tom", age: "22" }</span></span>
<span class="line">qs<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">user</span><span class="token operator">:</span> <span class="token string">'tom'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// => user=tom&age=22</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></div><h2 id="js-cookie" tabindex="-1"><a class="header-anchor" href="#js-cookie"><span>js-cookie</span></a></h2><p>一个简单的、轻量的处理 cookies 的 js API</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">npm install js<span class="token operator">-</span>cookie</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></div><p>基本用法</p><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> Cookies <span class="token keyword">from</span> <span class="token string">'js-cookie'</span></span>
<span class="line"></span>
<span class="line">Cookies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">expires</span><span class="token operator">:</span> <span class="token number">7</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">Cookies<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span> <span class="token comment">// => 'value'</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></div>`,37),l=[t];function o(c,i){return a(),n("div",null,l)}const u=s(e,[["render",o],["__file","常用插件.html.vue"]]),k=JSON.parse(`{"path":"/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6.html","title":"","lang":"zh-CN","frontmatter":{},"headers":[{"level":2,"title":"拖拽 插件 vuedraggable","slug":"拖拽-插件-vuedraggable","link":"#拖拽-插件-vuedraggable","children":[]},{"level":2,"title":"vConsole 手机上调试代码","slug":"vconsole-手机上调试代码","link":"#vconsole-手机上调试代码","children":[]},{"level":2,"title":"Animate.css css3 动画库","slug":"animate-css-css3-动画库","link":"#animate-css-css3-动画库","children":[]},{"level":2,"title":"mescroll.js 下拉刷新和上拉加载","slug":"mescroll-js-下拉刷新和上拉加载","link":"#mescroll-js-下拉刷新和上拉加载","children":[]},{"level":2,"title":"Chart.js JavaScript 图表库","slug":"chart-js-javascript-图表库","link":"#chart-js-javascript-图表库","children":[]},{"level":2,"title":"Day.js","slug":"day-js","link":"#day-js","children":[]},{"level":2,"title":"qs url 参数转换","slug":"qs-url-参数转换","link":"#qs-url-参数转换","children":[]},{"level":2,"title":"js-cookie","slug":"js-cookie","link":"#js-cookie","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/常用插件.md","excerpt":"<h2>拖拽 插件 vuedraggable</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 operator\\"><</span>Drager</span>\\n<span class=\\"line\\"> @change<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"onChangeDrager\\"</span></span>\\n<span class=\\"line\\"> v<span class=\\"token operator\\">-</span>model<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"theTabs\\"</span></span>\\n<span class=\\"line\\"> item<span class=\\"token operator\\">-</span>key<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"screeningId\\"</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">class</span><span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"screen-tabs-drager scroll-ele\\"</span></span>\\n<span class=\\"line\\"> id<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"scroll-ele\\"</span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\"><</span>template #item<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"{ element }\\"</span><span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\"><</span>a<span class=\\"token operator\\">-</span>card style<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"margin-bottom: 10px\\"</span> <span class=\\"token operator\\">:</span>bordered<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"false\\"</span> theme<span class=\\"token operator\\">=</span><span class=\\"token string\\">\\"gray\\"</span><span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> element <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\"><</span><span class=\\"token operator\\">/</span>a<span class=\\"token operator\\">-</span>card<span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\"><</span><span class=\\"token operator\\">/</span>template<span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"> <span class=\\"token operator\\"><</span><span class=\\"token operator\\">/</span>Drager<span class=\\"token operator\\">></span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">import</span> Drager <span class=\\"token keyword\\">from</span> <span class=\\"token string\\">'vuedraggable'</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">const</span> theTabs <span class=\\"token operator\\">=</span> <span class=\\"token function\\">ref</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">[</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">3</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">4</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">5</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">6</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"><span class=\\"token keyword\\">const</span> <span class=\\"token function-variable function\\">onChangeDrager</span> <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span><span class=\\"token parameter\\"><span class=\\"token literal-property property\\">e</span><span class=\\"token operator\\">:</span> any</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\">\\tconsole<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">log</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'change'</span><span class=\\"token punctuation\\">,</span> e<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"><span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">;</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{u as comp,k as data};