@shixinde/vuepress-theme-init
Version:
309 lines • 107 kB
JavaScript
import{_ as s,c as n,o as a,a as p}from"./app-Dx9bNbfq.js";const e={},t=p(`<h2 id="关闭eslint-使用" tabindex="-1"><a class="header-anchor" href="#关闭eslint-使用"><span>关闭eslint 使用</span></a></h2><p>添加 <strong>vue.config.js</strong></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">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">lintOnSave</span><span class="token operator">:</span><span class="token boolean">false</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></div><h2 id="请求调用-接口" tabindex="-1"><a class="header-anchor" href="#请求调用-接口"><span>请求调用 接口</span></a></h2><p><strong>配置代理</strong></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 literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"/api"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">target</span><span class="token operator">:</span><span class="token string">"http://gmall-h5-api.atguigu.cn"</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></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></div><p><strong>api/requests.js</strong></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 comment">//对于axios进行二次封装</span></span>
<span class="line"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">"axios"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//axios.create方法执行,其实返回一个axios和request一样的</span></span>
<span class="line"><span class="token keyword">let</span> requests <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">//基础路径,发请求URL携带api【发现:真实服务器接口都携带/api】</span></span>
<span class="line"> <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">"/api"</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">timeout</span><span class="token operator">:</span> <span class="token number">5000</span></span>
<span class="line"><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 comment">//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!</span></span>
<span class="line">requests<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">config</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// config.headers.userTempId = SET_USERID();</span></span>
<span class="line"> <span class="token comment">//不管那个模块发请求,请求拦截器，都可以触发。请求拦截器可以通过请求头每一次协大公共参数给服务器【用户未登录的临时身份】</span></span>
<span class="line"> <span class="token keyword">return</span> config<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>
<span class="line"></span>
<span class="line"><span class="token comment">//响应拦截器：请求数据返回会执行</span></span>
<span class="line">requests<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">//res:实质就是项目中发请求、服务器返回的数据</span></span>
<span class="line"> <span class="token keyword">return</span> res<span class="token punctuation">.</span>data<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 parameter">err</span><span class="token punctuation">)</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 comment">// alert(err.message);</span></span>
<span class="line"> <span class="token comment">//终止Promise链</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">'err-requests'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// return Promise.reject(new Error('faile')) ;</span></span>
<span class="line"><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 comment">//最后需要暴露:暴露的是添加新的功能的axios,即为requests</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> requests<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 class="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><p><strong>api/index.js</strong></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> requests <span class="token keyword">from</span> <span class="token string">"./requests"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">reqCategoryList</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">requests</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/product/getBaseCategoryList'</span><span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span> <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></div><p><strong>vue 页面调用</strong></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> <span class="token punctuation">{</span> reqCategoryList<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api'</span></span>
<span class="line"></span>
<span class="line"><span class="token function">reqCategoryList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token operator">=></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'res'</span><span class="token punctuation">,</span> res<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></div><h2 id="本地存储-获取和添加" tabindex="-1"><a class="header-anchor" href="#本地存储-获取和添加"><span>本地存储 获取和添加</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"> localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"listSelect"</span><span class="token punctuation">,</span> val<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></div><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 function">mounted</span><span class="token punctuation">(</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>act <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>name</span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>listSelect<span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'listSelect'</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></div><h2 id="路由传参的三种基本方式" tabindex="-1"><a class="header-anchor" href="#路由传参的三种基本方式"><span><strong>路由传参的三种基本方式</strong></span></a></h2><p>下面我来说下vue自带的路由传参的三种基本方式</p><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 operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"examine"</span> @click<span class="token operator">=</span><span class="token string">"insurance(2)"</span><span class="token operator">></span>查看详情<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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></div><p>第一种方法 页面刷新数据不会丢失</p><div class="language-jsp line-numbers-mode" data-highlighter="prismjs" data-ext="jsp" data-title="jsp"><pre class="language-jsp"><code><span class="line">methods：{</span>
<span class="line"> insurance(id) {</span>
<span class="line"> //直接调用$router.push 实现携带参数的跳转</span>
<span class="line"> this.$router.push({</span>
<span class="line"> path: \`/particulars/\${id}\`,</span>
<span class="line"> })</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></div><p>需要对应路由配置如下：</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">path</span><span class="token punctuation">:</span> <span class="token string">'/particulars/:id'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">name</span><span class="token punctuation">:</span> <span class="token string">'particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">component</span><span class="token punctuation">:</span> particulars</span>
<span class="line"> <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><p>可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值 另外页面获取参数如下</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">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id</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>第二种方法 <strong>页面刷新数据会丢失</strong></p><p>通过路由属性中的name来确定匹配的路由，通过params来传递参数。</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">methods：<span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">insurance</span><span class="token punctuation">(</span><span class="token parameter">id</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>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</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">'particulars'</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">id</span><span class="token operator">:</span> id</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>
<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></div><p>对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">path</span><span class="token punctuation">:</span> <span class="token string">'/particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">name</span><span class="token punctuation">:</span> <span class="token string">'particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">component</span><span class="token punctuation">:</span> particulars</span>
<span class="line"> <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><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">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id</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>第三种方法 使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？</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">methods：<span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">insurance</span><span class="token punctuation">(</span><span class="token parameter">id</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>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">123456</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>
<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></div><p>对应路由配置：</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">path</span><span class="token punctuation">:</span> <span class="token string">'/particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">name</span><span class="token punctuation">:</span> <span class="token string">'particulars'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token property">component</span><span class="token punctuation">:</span> particulars</span>
<span class="line"> <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><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">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id</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>特别注意哦， 组件中 获取参数的时候是<img src="https://math.jianshu.com/math?formula=route.params 而不是" alt="route.params 而不是">router 这很重要~~~</p><h2 id="自定义指令用法实例" tabindex="-1"><a class="header-anchor" href="#自定义指令用法实例"><span>自定义指令用法实例</span></a></h2><blockquote><h3 id="本节主要解决异常图片情况" tabindex="-1"><a class="header-anchor" href="#本节主要解决异常图片情况"><span><strong>本节主要解决异常图片情况</strong></span></a></h3></blockquote><p><strong><code>目标</code></strong>： 通过自定义指令的形式解决异常图片的处理</p><blockquote><h3 id="自定义指令" tabindex="-1"><a class="header-anchor" href="#自定义指令"><span><strong>自定义指令</strong></span></a></h3></blockquote><p>首先定义第一个自定义指令 <strong><code>v-imagerror</code></strong></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">export</span> <span class="token keyword">const</span> imagerror <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 指令对象 会在当前的dom元素插入到节点之后执行</span></span>
<span class="line"> <span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">dom<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// options是 指令中的变量的解释 其中有一个属性叫做 value</span></span>
<span class="line"> <span class="token comment">// dom 表示当前指令作用的dom对象</span></span>
<span class="line"> <span class="token comment">// dom认为此时就是图片</span></span>
<span class="line"> <span class="token comment">// 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror</span></span>
<span class="line"> dom<span class="token punctuation">.</span><span class="token function-variable function">onerror</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">// 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容</span></span>
<span class="line"> <span class="token comment">// dom可以注册error事件</span></span>
<span class="line"> dom<span class="token punctuation">.</span>src <span class="token operator">=</span> options<span class="token punctuation">.</span>value <span class="token comment">// 这里不能写死</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 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></div><blockquote><h3 id="在main-js完成自定义指令全局注册" tabindex="-1"><a class="header-anchor" href="#在main-js完成自定义指令全局注册"><span><strong>在main.js完成自定义指令全局注册</strong></span></a></h3></blockquote><p>然后，在**<code>main.js</code>**中完成对于该文件中所有指令的全局注册</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> <span class="token operator">*</span> <span class="token keyword">as</span> directives <span class="token keyword">from</span> <span class="token string">'@/directives'</span></span>
<span class="line"><span class="token comment">// 注册自定义指令</span></span>
<span class="line"><span class="token comment">// 遍历所有的导出的指令对象 完成自定义全局注册</span></span>
<span class="line">Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>directives<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 注册自定义指令</span></span>
<span class="line"> Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> directives<span class="token punctuation">[</span>key<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></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></div><p>针对上面的引入语法 <strong><code>import * as 变量</code></strong> 得到的是一个对象**<code>{ 变量1：对象1，变量2： 对象2 ... }</code>**, 所以可以采用对象遍历的方法进行处理</p><p>指令注册成功，可以在**<code>navbar.vue</code>**中直接使用了</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>img</span> <span class="token attr-name">v-imageerror</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultImg<span class="token punctuation">"</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>staffPhoto<span class="token punctuation">"</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">"</span>user-avatar<span class="token punctuation">"</span></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></div><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 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">defaultImg</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/assets/common/head.jpg'</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></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="vue声明一个全局的对象" tabindex="-1"><a class="header-anchor" href="#vue声明一个全局的对象"><span>vue声明一个全局的对象</span></a></h2><p><strong>首先将所要声明的对象封装到一个<code>init.js</code>中,然后默认导出</strong></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">const</span> app <span class="token operator">=</span> cloudbase<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">'guoguo-6666-123555511444'</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">var</span> db <span class="token operator">=</span> app<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> db</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><p><strong>在<code>main.js</code>中引入并挂载到原型链上</strong></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> _db <span class="token keyword">from</span> <span class="token string">'@/tools/init.js'</span></span>
<span class="line"><span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$db <span class="token operator">=</span> _db</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><p><strong>最后在文件中使用 <code>this.$db</code> 就可以访问了</strong></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">this</span><span class="token punctuation">.</span>$db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'guoguoBox'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">.</span><span class="token function">get</span><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 keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</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>res<span class="token punctuation">,</span> <span class="token string">'res'</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-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> nprogress <span class="token keyword">from</span> <span class="token string">'nprogress'</span> <span class="token comment">//引入组件</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'nprogress/nprogress.css'</span> <span class="token comment">//引入样式</span></span>
<span class="line"></span>
<span class="line">nprogress<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//开始</span></span>
<span class="line">nprogress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//结束</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="路由的meta属性" tabindex="-1"><a class="header-anchor" href="#路由的meta属性"><span>路由的meta属性</span></a></h2><p>可以自己定义同通过meta属性自定义一个变量用来进行状态的存储，如组件的显示和隐藏</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>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/home'</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">'home'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/Home'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</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 class="line-number"></div></div></div><h2 id="路由传参" tabindex="-1"><a class="header-anchor" href="#路由传参"><span>路由传参</span></a></h2><p>前面的是 <code>'/search/' + this.keyword</code> <strong>params</strong>传参</p><p>后面的是<code>'?k=' + this.keyword.toUpperCase()</code> query传参</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>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/search/:keyword'</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">'search'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/Search'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</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 class="line-number"></div></div></div><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 comment">// 字符串传参</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/search/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keyword <span class="token operator">+</span> <span class="token string">'?k='</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keyword<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</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>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'search'</span><span class="token punctuation">,</span><span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">keyword</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>keyword<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">k</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keyword<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><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 class="token comment">//如果params传的值是空串 可以使用 undefined 解决</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'search'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token operator">||</span> <span class="token keyword">undefined</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">k</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keyword<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><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 class="token comment">//解决编程式导航 多次点击同一个路由同一个参数， 出现NavigationDuplicated报错，直接在对象后面增加一个成功的回调和失败的回调即可</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'search'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token operator">||</span> <span class="token keyword">undefined</span> <span class="token punctuation">}</span> <span class="token punctuation">}</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 class="token punctuation">}</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 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></div><h3 id="如何指定-parms-参数可传可不传" tabindex="-1"><a class="header-anchor" href="#如何指定-parms-参数可传可不传"><span>如何指定 <code>parms</code> 参数可传可不传</span></a></h3><p>在<code>path: '/search/:keyword?'</code> 的最后加上 <code>?</code> 即可</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>
<span class="line"> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/search/:keyword?'</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">'search'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/Search'</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></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><blockquote><p><strong>防抖：</strong> 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间</p></blockquote><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 comment">//防抖</span></span>
<span class="line">debounce</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><blockquote><p><strong>节流：</strong> 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率</p></blockquote><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 comment">//节流</span></span>
<span class="line"><span class="token literal-property property">addAdmin2</span><span class="token operator">:</span> <span class="token function">throttle</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 operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">'trailing'</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><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></div><h2 id="vue-中使用字典" tabindex="-1"><a class="header-anchor" href="#vue-中使用字典"><span>Vue 中使用字典</span></a></h2><p>在vue里面，有很多不需要调用接口的固定下拉菜单内容，会把这个下拉菜单全部封装起来，叫做<code>字典</code>，再把字典放到vue原型上，在页面中通过调用，直接使用，这个也是我在练手公司项目中学到的. <a href="https://www.jianshu.com/p/9a22fb63241c" target="_blank" rel="noopener noreferrer">vue 字典 详细链接</a></p><p><strong>1. 创建 @/config/dict.js\`文件</strong></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">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'未提交'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'审核中'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'已完成'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'已驳回'</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 literal-property property">inboundType</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'采购入库'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'租赁入库'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'原始入库'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'盘盈入库'</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 literal-property property">restoreType</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'领用归还'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'借用归还'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'借出归还'</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></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></div><p>**2. 在 main.js 中，引入并挂载到全局中 **</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> dict <span class="token keyword">from</span> <span class="token string">'@/config/dict'</span> <span class="token comment">//引入dict字典</span></span>
<span class="line"><span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$dict <span class="token operator">=</span> dict在全局中使用</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><p><strong>3. 在组件中使用</strong></p><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"><</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>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-option</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in $dict.auditStatus<span class="token punctuation">"</span></span> </span>
<span class="line"> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span> <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.name<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-option</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-select</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></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></div><h2 id="vue导出excel" tabindex="-1"><a class="header-anchor" href="#vue导出excel"><span>vue导出excel</span></a></h2><p><a href="https://blog.csdn.net/m0_59023970/article/details/123427008" target="_blank" rel="noopener noreferrer">(7条消息) vue导出excel表格（详细教程）_vue导出excel文件_前端小脑虎的博客-CSDN博客</a></p><h2 id="vue-右键菜单" tabindex="-1"><a class="header-anchor" href="#vue-右键菜单"><span>vue 右键菜单</span></a></h2><p>https://blog.csdn.net/weixin_43630831/article/details/123984195?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-123984195-blog-112016488.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-123984195-blog-112016488.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=6</p><h2 id="路由跳转页面不重新执行created" tabindex="-1"><a class="header-anchor" href="#路由跳转页面不重新执行created"><span>路由跳转页面不重新执行created</span></a></h2><blockquote><p>将 <code>created</code> 换成 <code>activated</code></p></blockquote><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 function">activated</span><span class="token punctuation">(</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">'1234123 ===>'</span><span class="token punctuation">,</span><span class="token number">1234123</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></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><p>一.解决方案</p><p>第一种方案：传统的<a href="https://so.csdn.net/so/search?q=%E9%94%9A%E7%82%B9&spm=1001.2101.3001.7020" target="_blank" rel="noopener noreferrer">锚点</a>定位 但是这个方案有一个弊端，就是会影响url 的<a href="https://so.csdn.net/so/search?q=hash&spm=1001.2101.3001.7020" target="_blank" rel="noopener noreferrer">hash</a></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 operator"><</span>div id<span class="token operator">=</span><span class="token string">"anchor"</span><span class="token operator">></span>跳到这里来<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token comment">//html中定义一个锚点，这里可以用name或者id,即锚点的目的地</span></span>
<span class="line"><span class="token number">12</span></span>
<span class="line"><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token string">"#anchor"</span><span class="token operator">></span>点击这<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span></span>
<span class="line"><span class="token comment">//这是锚点的入口，点击这，锚点激活，href属性绑定你想跳到的位置的div盒子的id或者name</span></span>
<span class="line"><span class="token number">12</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></div><p>第二种方案：使用scrollIntoView方法进行定位到某一位置 不会影响影响url 的hash，</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 operator"><</span>div id<span class="token operator">=</span><span class="token string">"anchor"</span><span class="token operator">></span>跳到这里来<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token comment">//还是需要先定义锚点的目的地</span></span>
<span class="line"><span class="token number">12</span></span>
<span class="line"><span class="token operator"><</span>span @click<span class="token operator">=</span><span class="token string">"jumpClick()"</span><span class="token operator">></span>点击这<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span></span>
<span class="line"> <span class="token comment">//这是锚点的入口，绑定点击事件</span></span>
<span class="line"><span class="token number">12</span></span>
<span class="line"><span class="token function">jumpClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#anchor'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">//如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐</span></span>
<span class="line"> <span class="token comment">//如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token number">12345</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></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">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#anchor'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">behavior</span><span class="token operator">:</span> <span class="token string">"smooth"</span><span class="token punctuation">,</span> </span>
<span class="line"> <span class="token comment">// 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"</span></span>
<span class="line"> <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"</span></span>
<span class="line"> <span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token string">"nearest"</span> </span>
<span class="line"> <span class="token comment">// 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"</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></div><h2 id="video-取消显示-画中画-倍速-和-下载按钮" tabindex="-1"><a class="header-anchor" href="#video-取消显示-画中画-倍速-和-下载按钮"><span>video 取消显示 画中画 倍速 和 下载按钮</span></a></h2><blockquote><p>noplaybackrate ：隐藏倍速</p><p>nodownload：隐藏下载</p><p>disablePictureInPicture：隐藏画中画</p></blockquote><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"><</span>video</span> <span class="token attr-name">disablePictureInPicture</span> <span class="token attr-name">noplaybackrate</span> <span class="token attr-name">controlslist</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>noplaybackrate nodownload<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>440px<span class="token punctuation">"</span></span></span>
<span class="line"> <span class="token attr-name">controls</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>videoPlayer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> 您的浏览器不支持 video 标签。</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</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></div><h2 id="文字转语音朗读" tabindex="-1"><a class="header-anchor" href="#文字转语音朗读"><span>文字转语音朗读</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 comment">//使用这个命令来 播放语音</span></span>
<span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'speechSynthesis'</span> <span class="token keyword">in</span> window<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> speech <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SpeechSynthesisUtterance</span><span class="token punctuation">(</span><span class="token string">"这里是朗读的内容"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> speech<span class="token punctuation">.</span>lang <span class="token operator">=</span> <span class="token string">'zh-CN'</span><span class="token punctuation">;</span> <span class="token comment">// 设置语言为中文</span></span>
<span class="line"> speechSynthesis<span class="token punctuation">.</span><span class="token function">speak</span><span class="token punctuation">(</span>speech<span class="token punctuation">)</span><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"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'不支持语音合成'</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 class="token comment">// 关闭语音</span></span>
<span class="line"> speechSynthesis<span class="token punctuation">.</span><span class="token function">cancel</span><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></div><h2 id="vue-router-解决路由重复点击报错" tabindex="-1"><a class="header-anchor" href="#vue-router-解决路由重复点击报错"><span>vue-router // 解决路由重复点击报错</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">const</span> VueRouterPush <span class="token operator">=</span> <span class="token class-name">VueRouter</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>push</span>
<span class="line"><span class="token class-name">VueRouter</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">push</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">push</span><span class="token punctuation">(</span><span class="token parameter">to</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token function">VueRouterPush</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> to<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> err<span class="token punctuation">)</span></span>
<span class="line"><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="防止按钮重复点击" tabindex="-1"><a class="header-anchor" href="#防止按钮重复点击"><span>防止按钮重复点击</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 comment">// yflag: false</span></span>
<span class="line"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>yflag <span class="token operator">=</span> <span class="token boolean">false</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</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>yflag<span class="token punctuation">)</span> <span class="token keyword">return</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>yflag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> yflag <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token function">setTimeout</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"> yflag<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><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>yflag<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span>
<span class="line">yflag<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</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></div><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 comment">//防多次点击，重复提交</span></span>
<span class="line">Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'preventReClick'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</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"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>el<span class="token punctuation">.</span>disabled<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> el<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span></span>
<span class="line"> <span class="token function">setTimeout</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"> el<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">false</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> binding<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">3000</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 punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><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></div><h2 id="input输入限制只能输入大写字母-数字-汉字等" tabindex="-1"><a class="header-anchor" href="#input输入限制只能输入大写字母-数字-汉字等"><span>input输入限制只能输入大写字母/数字/汉字等</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">1. 限制只能输入大写字母</span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value=value.replace(/[^A-Z]/g,'');<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-input</span><span class="token punctuation">></span></span></span>
<span class="line">2. 限制只能输入数字</span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this.value = this.value.replace(/[^0-9]/g, '');<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-input</span><span class="token punctuation">></span></span></span>
<span class="line">限制只能输入数字的情况下还是用计数器比较好，，不会为负也不能输入e等</span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input-number</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">:min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">:max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">:precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">:step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-input-number</span><span class="token punctuation">></span></span></span>
<span class="line">3.限制只能输入汉字</span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value=value.replace(/[^\\u4E00-\\u9FA5]/g,'');<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-input</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></div><h2 id="websocket" tabindex="-1"><a class="header-anchor" href="#websocket"><span>websocket</span></a></h2><p>https://blog.csdn.net/python_small_pan/article/details/122381533</p><h2 id="flex-shrink-0" tabindex="-1"><a class="header-anchor" href="#flex-shrink-0"><span>flex-shrink: 0;</span></a></h2><p><strong>Flex-shrink</strong> 属性定义了flex项目在必要时如何缩小以适应flex容器。当设置为 <strong>0</strong> 时，表示项目不会缩小，即使空间不足也不会压缩项目的大小<a href="https://blog.csdn.net/liubangbo/article/details/117567640" target="_blank" rel="noopener noreferrer">1</a>。</p><p>示例</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">item</span> <span class="token punctuation">{</span></span>
<span class="line"><span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span>
<span class="line"><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><p>在这个例子中，<em>.item</em> 类的元素在flex容器中不会缩小其大小，即使其他元素需要更多空间也不会被挤压。</p><h2 id="处理路由加载失败的问题" tabindex="-1"><a class="header-anchor" href="#处理路由加载失败的问题"><span>处理路由加载失败的问题</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">// FIX 新版本上线导致路由模块获取不到 start</span></span>
<span class="line">router<span class="token punctuation">.</span><span class="token function">onError</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"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>theTokenStore<span class="token punctuation">.</span>theAjaxIsError<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> Modal<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> title<span class="token operator">:</span> <span class="token string">"温馨提示"</span><span class="token punctuation">,</span></span>
<span class="line"> content<span class="token operator">:</span> <span class="token string">"请求异常请重新加载页面"</span><span class="token punctuation">,</span></span>
<span class="line"> okText<span class="token operator">:</span> <span class="token string">"重新加载页面"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">onOk</span><span class="token operator">:</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"> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</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 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 class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// FIX 新版本上线导致路由模块获取不到 end</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></div>`,121),l=[t];function c(o,i){return a(),n("div",null,l)}const r=s(e,[["render",c],["__file","Vue 笔记.html.vue"]]),d=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/Vue%20%E7%AC%94%E8%AE%B0.html","title":"Vue 笔记","lang":"zh-CN","frontmatter":{"title":"Vue 笔记","date":"2022-12-29T00:00:00.000Z","tags":["笔记","Vue"],"categories":["居家篇"]},"headers":[{"level":2,"title":"关闭eslint 使用","slug":"关闭eslint-使用","link":"#关闭eslint-使用","children":[]},{"level":2,"title":"请求调用 接口","slug":"请求调用-接口","link":"#请求调用-接口","children":[]},{"level":2,"title":"本地存储 获取和添加","slug":"本地存储-获取和添加","link":"#本地存储-获取和添加","children":[]},{"level":2,"title":"路由传参的三种基本方式","slug":"路由传参的三种基本方式","link":"#路由传参的三种基本方式","children":[]},{"level":2,"title":"自定义指令用法实例","slug":"自定义指令用法实例","link":"#自定义指令用法实例","children":[]},{"level":2,"title":"vue声明一个全局的对象","slug":"vue声明一个全局的对象","link":"#vue声明一个全局的对象","children":[]},{"level":2,"title":"进度条插件","slug":"进度条插件","link":"#进度条插件","children":[]},{"level":2,"title":"路由的meta属性","slug":"路由的meta属性","link":"#路由的meta属性","children":[]},{"level":2,"title":"路由传参","slug":"路由传参","link":"#路由传参","children":[{"level":3,"title":"如何指定 parms 参数可传可不传","slug":"如何指定-parms-参数可传可不传","link":"#如何指定-parms-参数可传可不传","children":[]}]},{"level":2,"title":"节流和防抖","slug":"节流和防抖","link":"#节流和防抖","children":[]},{"level":2,"title":"Vue 中使用字典","slug":"vue-中使用字典","link":"#vue-中使用字典","children":[]},{"level":2,"title":"vue导出excel","slug":"vue导出excel","link":"#vue导出excel","children":[]},{"level":2,"title":"vue 右键菜单","slug":"vue-右键菜单","link":"#vue-右键菜单","children":[]},{"level":2,"title":"路由跳转页面不重新执行created","slug":"路由跳转页面不重新执行created","link":"#路由跳转页面不重新执行created","children":[]},{"level":2,"title":"通过锚点跳转到位置 不影响路由","slug":"通过锚点跳转到位置-不影响路由","link":"#通过锚点跳转到位置-不影响路由","children":[]},{"level":2,"title":"video 取消显示 画中画 倍速 和 下载按钮","slug":"video-取消显示-画中画-倍速-和-下载按钮","link":"#video-取消显示-画中画-倍速-和-下载按钮","children":[]},{"level":2,"title":"文字转语音朗读","slug":"文字转语音朗读","link":"#文字转语音朗读","children":[]},{"level":2,"title":"vue-router // 解决路由重复点击报错","slug":"vue-router-解决路由重复点击报错","link":"#vue-router-解决路由重复点击报错","children":[]},{"level":2,"title":"防止按钮重复点击","slug":"防止按钮重复点击","link":"#防止按钮重复点击","children":[]},{"level":2,"title":"input输入限制只能输入大写字母/数字/汉字等","slug":"input输入限制只能输入大写字母-数字-汉字等","link":"#input输入限制只能输入大写字母-数字-汉字等","children":[]},{"level":2,"title":"websocket","slug":"websocket","link":"#websocket","children":[]},{"level":2,"title":"flex-shrink: 0;","slug":"flex-shrink-0","link":"#flex-shrink-0","children":[]},{"level":2,"title":"处理路由加载失败的问题","slug":"处理路由加载失败的问题","link":"#处理路由加载失败的问题","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/Vue 笔记.md","excerpt":"<h2>关闭eslint 使用</h2>\\n<p>添加 <strong>vue.config.js</strong></p>\\n<div class=\\"language-javascript\\" data-highlighter=\\"prismjs\\" data-ext=\\"js\\" data-title=\\"js\\"><pre class=\\"language-javascript\\"><code><span class=\\"line\\">module<span class=\\"token punctuation\\">.</span>exports <span class=\\"token operator\\">=</span> <span class=\\"token function\\">defineConfig</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">lintOnSave</span><span class=\\"token operator\\">:</span><span class=\\"token boolean\\">false</span></span>\\n<span class=\\"line\\"><span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{r as comp,d as data};