@shixinde/vuepress-theme-init
Version:
313 lines • 111 kB
HTML
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.14" />
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html,
body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme')
const systemDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true)
}
</script>
<link rel="icon" href="/favicon.ico"><title>Vue3 笔记 | Guoguo-notes</title><meta name="description" content="袁果锅笔记">
<link rel="preload" href="/guoguo-notes/assets/style-35EaXqtH.css" as="style"><link rel="stylesheet" href="/guoguo-notes/assets/style-35EaXqtH.css">
<link rel="modulepreload" href="/guoguo-notes/assets/app-Dx9bNbfq.js"><link rel="modulepreload" href="/guoguo-notes/assets/Vue3 .html--oEgCjOt.js">
<link rel="prefetch" href="/guoguo-notes/assets/index.html-D6hY1Pr0.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React.html-DpSypgmq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java jdk 管理.html-UyxKEztz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/lingzhi.html-DrDRjKEH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/临时使用.html-D81L-GXB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/新公司.html-Bp4Oxj5H.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目架构升级版.html-CpJwv32O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/风扬小记.html-BTKAsyQB.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python代码片段.html-3rxV2C-F.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Python笔记.html-DfxyADl3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/AjaxResult.html-CcB1SHt9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 基础.html-C0Mw79YJ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Java 注解.html-DMhJ2pfz.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MyBatis Plus.html-DXaupZNq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/MySQL完整.html-E-VKR_Bm.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Mybatis 语法.html-BtyLUnj2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/StringBoot.html-IewOkkS1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea 插件.html-yFlZz-2q.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/idea快捷键.html-CI1PJIaN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/java 代码片段.html-mGveOiyh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/mySql.html-mha8lKTS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页插件使用.html-BpMDhHym.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/项目初始化.html-TexbaFDo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/02_react案例_笔记.html-BzISG9Ro.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/03_react-router_教程.html-CiEuDnOl.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/04_react-UI_教程.html-CptRBAn1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/05_redux笔记.html-BBtVc0mQ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 笔记.html-BPeqw1PX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/React 项目配置流程.html-BXl6Ye6r.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷React扩展笔记.html-CCxyveD2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/尚硅谷react-redux笔记.html-DYzvAaxv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-3ZVA3kn7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element Plus --vue3.0.html-DXuv_b9N.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Element ui 笔记.html-sVqlVk_V.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Taro.html-CA8JB-of.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 代码片段.html-DKeMa5iO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 全局封装 main.js.html-D9vo-8hy.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue 笔记.html-DGHKF3_K.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Vue3_Element Plus.html-BVAoHXff.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/element plus 本地启动.html-CgsgPmvg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 代码片段.html-G1ShCdaZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/jsx tsx 笔记.html-BtuYzmC-.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp笔记.html-ok2vMZAr.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite 笔记.html-D-EBkJ0C.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vite手写插件.html-Cggy24Oh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vue.js 下载文件.html-B1uCoFDS.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vueuse笔记.html-DS6eTZ6y.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/vxe-table笔记.html-yUGgZHig.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/代码片段 - 解析数学公式.html-DdcBDyRv.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用插件.html-CZkTIVvE.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/汇智腾远笔记.html-moZCMq7M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/视频播放插件.html-BcEFDEgf.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS笔记.html-fAv9dNNH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Echarts.html-Cge55fid.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git 代码管理.html-B63UoB0T.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Html 笔记.html--NntXjWX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/TypeScript.html-D-Qjaudh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/axios 请求拦截.html-D1TCv2Mj.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-Ka8coTuF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/npm.html-B-EmKZd8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/sh 笔记.html-B3G_4KZW.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/valibot校验学习.html-BBH2-2ZH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/云开发教程.html-DRtT7hW1.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/公共API接口.html-p1pxjePH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/小程序笔记.html-BJbLxiMh.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/插件库.html-CZ-6S-Qp.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器.html-BNfIswB8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/服务器部署教学.html-T1qkai4O.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/浏览器px to rem适配.html-DPzD4TkF.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/登录逻辑.html-D5sdqJbb.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/网站配色.html-B_2Exge9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/跨域代理.html-BYkKrkY7.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/接入AI.html-DVRrF1MA.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/查看 编辑对话框组件.html-zEZcOjWH.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/简易电影选座.html-TuQVklis.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-1f6p3-c_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/CSS--common.html-D0ck7nMZ.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/ES6.html-wEFap9Uq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Git提交.html-CHssaRZs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Js获取当前时间的方法.html-BRnoMyWs.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-App笔记.html-BUy_Af_M.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uni-app API.html-CAzH1d66.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Uniapp-插件.html-DB8eOvmu.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/VueX 笔记.html-BrvLUsYq.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js函数封装.html-Cc5d9Th4.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/js常规.html-CIq-xlv8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uView基本使用.html-CCsyyvNN.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/uniapp 引入组件库.html-BnVxGutO.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/常用正则表达式.html-AS2O_lcX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/界面类.html-BEOhA9U_.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/笔记.html-DcjAVSiK.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/组件封装.html-BF9gShal.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/编程逻辑整理.html-CZRD3wTo.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/调用接口.html-DniVQnty.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SSH 配置.html-9u6Q-DHg.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/Editor.html-CfSL24h8.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/分页组件.html-DcRa4Q6p.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/拖拽组件.html-D6yjy7lX.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/index.html-LinbGCk2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/GIt 代码提交规范及步骤.html-w7f6_4N9.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/命名_ 开发期间的命名规范.html-DhnWSrsL.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/大佬项目组织规范.html-B32Km5um.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/重要_框架 - 初始化项目约束.html-Sw9ULLk3.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/404.html-BZdzN0T2.js" as="script"><link rel="prefetch" href="/guoguo-notes/assets/SearchResult-DqPIHYal.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="vp-theme-container external-link-icon"><!--[--><header class="vp-navbar"><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href="/guoguo-notes/"><!----><span class="vp-site-name" aria-hidden="true">Guoguo-notes</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/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" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><button class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!--[--><button type="button" class="search-pro-button" aria-label="搜索"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon" name="search"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="search-pro-placeholder">搜索</div><div class="search-pro-key-hints"><kbd class="search-pro-key">Ctrl</kbd><kbd class="search-pro-key">K</kbd></div></button><!--]--></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar"><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/" aria-label="主页"><!---->主页<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%BD%91%E7%AB%99%E9%85%8D%E8%89%B2.html" aria-label="常用笔记"><!---->常用笔记<!----></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="/guoguo-notes/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" aria-label="vue笔记及周边生态"><!---->vue笔记及周边生态<!----></a></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="袁果锅生态"><span class="title">袁果锅生态</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E5%8F%8A%E8%A7%84%E8%8C%83/%E5%91%BD%E5%90%8D_%20%E5%BC%80%E5%8F%91%E6%9C%9F%E9%97%B4%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83.html" aria-label="团队协作及规范"><!---->团队协作及规范<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E8%A2%81%E6%9E%9C%E9%94%85%E7%94%9F%E6%80%81/%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6%E5%8F%8A%E6%9E%B6%E6%9E%84/%E9%87%8D%E8%A6%81_%E6%A1%86%E6%9E%B6%20-%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%E7%BA%A6%E6%9D%9F.html" aria-label="项目框架及架构"><!---->项目框架及架构<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><div class="vp-navbar-dropdown-wrapper"><button class="vp-navbar-dropdown-title" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="arrow down"></span></button><button class="vp-navbar-dropdown-title-mobile" type="button" aria-label="个人笔记"><span class="title">个人笔记</span><span class="right arrow"></span></button><ul style="display:none;" class="vp-navbar-dropdown"><!--[--><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/%E9%A3%9E%E7%A0%81%E7%AF%87/Uni-App%E7%AC%94%E8%AE%B0.html" aria-label="飞码篇"><!---->飞码篇<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/Java/Java%20%E5%9F%BA%E7%A1%80.html" aria-label="Java"><!---->Java<!----></a></li><li class="vp-navbar-dropdown-item"><a class="route-link auto-link" href="/guoguo-notes/React%E7%AC%94%E8%AE%B0/React%20%E7%AC%94%E8%AE%B0.html" aria-label="React笔记"><!---->React笔记<!----></a></li><!--]--></ul></div></div><div class="vp-navbar-item"><a class="auto-link external-link" href="https://github.com/shixindea/shixinde-notes" aria-label="GitHub" rel="noopener noreferrer" target="_blank"><!---->GitHub<!----></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">vue笔记及周边生态 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Element%20Plus%20--vue3.0.html" aria-label="1. Element Plus --vue3.0.md"><!---->1. Element Plus --vue3.0.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Element%20ui%20%E7%AC%94%E8%AE%B0.html" aria-label="2. Element ui 笔记.md"><!---->2. Element ui 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Taro.html" aria-label="3. Taro.md"><!---->3. Taro.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5.html" aria-label="4. Vue 代码片段.md"><!---->4. Vue 代码片段.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue%20%E5%85%A8%E5%B1%80%E5%B0%81%E8%A3%85%20main.js.html" aria-label="5. Vue 全局封装 main.js.md"><!---->5. Vue 全局封装 main.js.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/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" aria-label="6. Vue 笔记.md"><!---->6. Vue 笔记.md<!----></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue3%20.html" aria-label="7. Vue3 .md"><!---->7. Vue3 .md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue3_Element%20Plus.html" aria-label="8. Vue3+Element Plus.md"><!---->8. Vue3+Element Plus.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/element%20plus%20%E6%9C%AC%E5%9C%B0%E5%90%AF%E5%8A%A8.html" aria-label="9. element plus 本地启动.md"><!---->9. element plus 本地启动.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/jsx%20tsx%20%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5.html" aria-label="10. jsx tsx 代码片段.md"><!---->10. jsx tsx 代码片段.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/jsx%20tsx%20%E7%AC%94%E8%AE%B0.html" aria-label="11. jsx tsx 笔记.md"><!---->11. jsx tsx 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/uniapp%E7%AC%94%E8%AE%B0.html" aria-label="12. uniapp笔记.md"><!---->12. uniapp笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vite%20%E7%AC%94%E8%AE%B0.html" aria-label="13. vite 笔记.md"><!---->13. vite 笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vite%E6%89%8B%E5%86%99%E6%8F%92%E4%BB%B6.html" aria-label="14. vite手写插件.md"><!---->14. vite手写插件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vue.js%20%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6.html" aria-label="15. vue.js 下载文件.md"><!---->15. vue.js 下载文件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vueuse%E7%AC%94%E8%AE%B0.html" aria-label="16. vueuse笔记.md"><!---->16. vueuse笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vxe-table%E7%AC%94%E8%AE%B0.html" aria-label="17. vxe-table笔记.md"><!---->17. vxe-table笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%20-%20%E8%A7%A3%E6%9E%90%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F.html" aria-label="18. 代码片段 - 解析数学公式.md"><!---->18. 代码片段 - 解析数学公式.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6.html" aria-label="19. 常用插件.md"><!---->19. 常用插件.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E6%B1%87%E6%99%BA%E8%85%BE%E8%BF%9C%E7%AC%94%E8%AE%B0.html" aria-label="20. 汇智腾远笔记.md"><!---->20. 汇智腾远笔记.md<!----></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E6%8F%92%E4%BB%B6.html" aria-label="21. 视频播放插件.md"><!---->21. 视频播放插件.md<!----></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><p><a href="https://juejin.cn/post/7041038709906472974" target="_blank" rel="noopener noreferrer">Vue3.2的setup语法糖和Hook函数 (强烈推荐) - 掘金 (juejin.cn)</a></p><h2 id="toraw-和-markraw-取消响应式" tabindex="-1"><a class="header-anchor" href="#toraw-和-markraw-取消响应式"><span>toRaw 和 markRaw（取消响应式）</span></a></h2><p>●toRaw: 。作用:将一个由reactive生成的响应式对象转为普通对象。 D使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 ●markRaw: 。作用:标记一个对象，使其永远不会再成为响应式对象。 。应用场景: 1.有些值不应被设置为响应式的，例如复杂的第三方类库等。 2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。</p><h2 id="provide-和-inject" tabindex="-1"><a class="header-anchor" href="#provide-和-inject"><span>provide() 和 inject()</span></a></h2><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">import { ref, provide } from 'vue'</span>
<span class="line"></span>
<span class="line">const foo = ref('hello')</span>
<span class="line">// 提供静态值</span>
<span class="line">provide('foo', foo)</span>
<span class="line"></span>
<span class="line"></span>
<span class="line">------------子组件</span>
<span class="line"></span>
<span class="line">const bar = inject('foo')</span>
<span class="line">return{bar}</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="watch监听函数" tabindex="-1"><a class="header-anchor" href="#watch监听函数"><span>watch监听函数</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> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'奇奇怪怪可可爱爱'</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> </span>
<span class="line"> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> obj<span class="token punctuation">.</span>msg<span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">v1<span class="token punctuation">,</span> v2</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// v1 就是被监听数据的最新值</span></span>
<span class="line"> <span class="token comment">// v2 就是被监听数据的原有值</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v1<span class="token punctuation">,</span> v2<span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">// 总结：如果侦听对象中当个属性，需要使用箭头函数的方式</span></span>
<span class="line"> <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></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="路由跳转" tabindex="-1"><a class="header-anchor" href="#路由跳转"><span>路由跳转</span></a></h2><p>1.首先在需要跳转的页面引入API---useRouter</p><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 keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</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>2.在跳转页面定义router变量</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> router <span class="token operator">=</span> <span class="token function">useRouter</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></div><p>3.用<code>router.push跳转页面</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 comment">// 字符串</span></span>
<span class="line">router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'home'</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 对象</span></span>
<span class="line">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">path</span><span class="token operator">:</span> <span class="token string">'home'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 命名的路由</span></span>
<span class="line">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">'user'</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">userId</span><span class="token operator">:</span> <span class="token string">'123'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// 带查询参数，变成 /register?userId=123</span></span>
<span class="line">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">path</span><span class="token operator">:</span> <span class="token string">'register'</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">userId</span><span class="token operator">:</span> <span class="token string">'123'</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><p>4.如果有参数的话，在接收页面引入API--useRoute</p><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 keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</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>5.在接收页面定义变量route，获取传过来的变量</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">//query</span></span>
<span class="line"><span class="token keyword">let</span> userId<span class="token operator">=</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>userId<span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">//params</span></span>
<span class="line"><span class="token keyword">let</span> userId<span class="token operator">=</span>route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>userId<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><ul><li><p><code>sessionStorage</code></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">sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">,</span><span class="token string">"value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//存储</span></span>
<span class="line">sessionStorage<span class="token punctuation">.</span><span class="token function">getItems</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//按可以进行取值</span></span>
<span class="line">sessionStorage<span class="token punctuation">.</span><span class="token function">removeItems</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//按key单个删除</span></span>
<span class="line">sessionStorage<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//删除全部数据</span></span>
<span class="line">sessionStorage<span class="token punctuation">.</span>length<span class="token punctuation">;</span><span class="token comment">//获取数据的数量</span></span>
<span class="line">sessionStorage<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//获取全部值</span></span>
<span class="line"><span class="token number">123456</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></li><li><p><code>localstorage</code></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">localstorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">,</span><span class="token string">"value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//保存数据</span></span>
<span class="line">localstorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//读取数据</span></span>
<span class="line">localstorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token string">"key"</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//删除单个数据</span></span>
<span class="line">localstorage<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//删除所有数据</span></span>
<span class="line">localstorage<span class="token punctuation">.</span><span class="token function">key</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//得到某个索引的key</span></span>
<span class="line">key和value都必须为字符串，web Storage的<span class="token constant">API</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></li></ul><h2 id="ts报错-绑定元素-id-隐式具有-any-类型" tabindex="-1"><a class="header-anchor" href="#ts报错-绑定元素-id-隐式具有-any-类型"><span>TS报错 <code>绑定元素“id”隐式具有“any”类型 </code></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">方案一，修改tsconfig</span>
<span class="line">是修改tsconfig<span class="token punctuation">.</span>json，加下面这行参数屏蔽检查，从而不报错。</span>
<span class="line"></span>
<span class="line"><span class="token string-property property">"suppressImplicitAnyIndexErrors"</span><span class="token operator">:</span><span class="token boolean">true</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="ts报错-类型-never-上不存在属性-name" tabindex="-1"><a class="header-anchor" href="#ts报错-类型-never-上不存在属性-name"><span>TS报错 <code>类型“never”上不存在属性“name”</code></span></a></h2><blockquote><p>将他的类型转为 <code> null as any</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 literal-property property">subDataForm</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">//修改之前</span></span>
<span class="line"> <span class="token literal-property property">subDataForm</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token keyword">as</span> any <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></div><h2 id="ts报错-类型-any-的参数不能赋给类型-never-的参数" tabindex="-1"><a class="header-anchor" href="#ts报错-类型-any-的参数不能赋给类型-never-的参数"><span>TS报错 <code>类型“any”的参数不能赋给类型“never”的参数</code></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">this</span><span class="token punctuation">.</span>formData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>newUser <span class="token keyword">as</span> never<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></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">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 comment">// 相当于F5</span></span>
<span class="line"></span>
<span class="line">location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>location<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></div><h2 id="使用命令跳转链接-本窗口、新窗口" tabindex="-1"><a class="header-anchor" href="#使用命令跳转链接-本窗口、新窗口"><span>使用命令跳转链接 （本窗口、新窗口）</span></a></h2><blockquote><p>新窗口跳转</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"> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'https://www.baidu.com/'</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></div><blockquote><p>本窗口跳转</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"> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">'https://www.baidu.com/'</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><h2 id="setup-语法-script-中写name" tabindex="-1"><a class="header-anchor" href="#setup-语法-script-中写name"><span>setup 语法 script 中写name</span></a></h2><blockquote><p>下载包： <strong>npm i vite-plugin-vue-setup-extend -D</strong></p><p>在 <strong>vite.config.ts</strong> 中定义</p></blockquote><div class="language-diff line-numbers-mode" data-highlighter="prismjs" data-ext="diff" data-title="diff"><pre class="language-diff"><code><span class="line">import { fileURLToPath, URL } from 'node:url'</span>
<span class="line">import { defineConfig } from 'vite'</span>
<span class="line">import vue from '@vitejs/plugin-vue'</span>
<span class="line"><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import VueSetExtend from 'vite-plugin-vue-setup-extend'</span>
<span class="line"></span></span></span>
<span class="line">// https://vitejs.dev/config/</span>
<span class="line">export default defineConfig({</span>
<span class="line"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> plugins: [</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> vue(),</span>
<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> VueSetExtend()</span>
<span class="line"></span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ],</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> resolve: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> alias: {</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> '@': fileURLToPath(new URL('./src', import.meta.url))</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> }</span>
<span class="line"></span><span class="token prefix unchanged"> </span><span class="token line"> }</span>
<span class="line"></span></span>})</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><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 operator"><</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span> name<span class="token operator">=</span><span class="token string">"person"</span><span class="token operator">></span></span>
<span class="line"><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator"><</span><span class="token punctuation">{</span></span>
<span class="line"> msg<span class="token operator">:</span> <span class="token builtin">string</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token operator"><</span><span class="token operator">/</span>script<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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="props-中使用枚举-props-中强调是否必传" tabindex="-1"><a class="header-anchor" href="#props-中使用枚举-props-中强调是否必传"><span>props 中使用枚举 | props 中强调是否必传</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 keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span></span>
<span class="line"> level<span class="token operator">?</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token operator">|</span> <span class="token number">2</span> <span class="token operator">|</span> <span class="token number">3</span> <span class="token operator">|</span> <span class="token number">4</span> <span class="token operator">|</span> <span class="token number">5</span> <span class="token operator">|</span> <span class="token number">6</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span></span>
<span class="line"> title<span class="token operator">?</span><span class="token operator">:</span> String<span class="token punctuation">;</span></span>
<span class="line"> icon<span class="token operator">?</span><span class="token operator">:</span> String<span class="token punctuation">;</span></span>
<span class="line"> padding<span class="token operator">?</span><span class="token operator">:</span> Boolean<span class="token punctuation">;</span></span>
<span class="line"> iconColor<span class="token operator">?</span><span class="token operator">:</span> String<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token keyword">const</span> theProps <span class="token operator">=</span> <span class="token function">withDefaults</span><span class="token punctuation">(</span><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator"><</span>Props<span class="token operator">></span></span></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"> level<span class="token operator">:</span> <span class="token number">6</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></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></div><h2 id="防止按钮重复点击" tabindex="-1"><a class="header-anchor" href="#防止按钮重复点击"><span>防止按钮重复点击</span></a></h2><blockquote><p>v-prevent-reclick</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>el-button</span> <span class="token attr-name">v-prevent-reclick</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onClick<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-button</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>main.ts</p></blockquote><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 keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span></span>
<span class="line"><span class="token keyword">const</span> Vue <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 注册自定义指令 v-prevent-reclick</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">'prevent-reclick'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">beforeMount</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> binding<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">false</span><span class="token punctuation">;</span> <span class="token comment">// 初始化时启用按钮</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"> el<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 点击后禁用按钮</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 class="token punctuation">;</span> <span class="token comment">// 在指定的时间后重新启用按钮</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">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 使用 binding.value 来设置等待时间，默认为 1000 毫秒</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 class="token punctuation">,</span></span>
<span class="line"> <span class="token function">unmounted</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 组件卸载时移除事件监听器</span></span>
<span class="line"> el<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</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></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><h2 id="封装一个console-log-样式" tabindex="-1"><a class="header-anchor" href="#封装一个console-log-样式"><span>封装一个console.log 样式</span></a></h2><blockquote><p>使用</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 keyword">import</span> <span class="token punctuation">{</span> log <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@utils/log'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> theTable <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> theObj <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>theObj<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'member-storage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'6'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'member-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">image</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token string">'打印img'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">'https://p3-passport.byteacctimg.com/img/user-avatar/a04c9a09205424e6207169f6301926b9~60x60.awebp'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string">'member-storage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> log<span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string">'the-table'</span><span class="token punctuation">,</span> theTable<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>封装</p></blockquote><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">// src/utils/prettyLog.ts</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">isEmpty</span> <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> value <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">||</span> value <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> value <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>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">prettyPrint</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token builtin">string</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 keyword">typeof</span> text <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<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"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">%c </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%c</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> %c</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;border:1px solid </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">border:1px solid </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">; padding: 1px; border-radius: 0 2px 2px 0; color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string">'background:transparent'</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>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">titlePrint</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">%c </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'font-size: 20px; font-weight: bold; color: #333;'</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>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">tablePrint</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</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 builtin">console</span><span class="token punctuation">.</span><span class="token function">groupCollapsed</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">groupEnd</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>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">imagePrint</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> scale <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> img <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> img<span class="token punctuation">.</span>crossOrigin <span class="token operator">=</span> <span class="token string">'anonymous'</span><span class="token punctuation">;</span></span>
<span class="line"> img<span class="token punctuation">.</span><span class="token function-variable function">onload</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"> <span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> ctx <span class="token operator">=</span> c<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</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>ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> c<span class="token punctuation">.</span>width <span class="token operator">=</span> img<span class="token punctuation">.</span>width<span class="token punctuation">;</span></span>
<span class="line"> c<span class="token punctuation">.</span>height <span class="token operator">=</span> img<span class="token punctuation">.</span>height<span class="token punctuation">;</span></span>
<span class="line"> ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> dataUri <span class="token operator">=</span> c<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">'image/png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span></span>
<span class="line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">%c </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">font-size: 1px;</span>
<span class="line"> padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>img<span class="token punctuation">.</span>height <span class="token operator">*</span> scale<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span>img<span class="token punctuation">.</span>width <span class="token operator">*</span> scale<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px;</span>
<span class="line"> background-image: url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dataUri<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">);</span>
<span class="line"> background-repeat: no-repeat;</span>
<span class="line"> background-size: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>img<span class="token punctuation">.</span>width <span class="token operator">*</span> scale<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>img<span class="token punctuation">.</span>height <span class="token operator">*</span> scale<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px;</span>
<span class="line"> color: transparent;</span>
<span class="line"> </span><span class="token template-punctuation string">`</span></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>
<span class="line"> img<span class="token punctuation">.</span>src <span class="token operator">=</span> url<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">prettyLog</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"> <span class="token keyword">const</span> info <span class="token operator">=</span> <span class="token punctuation">(</span>textOrTitle<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> content <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'Info'</span> <span class="token operator">:</span> textOrTitle<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> textOrTitle <span class="token operator">:</span> content<span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">prettyPrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> text<span class="token punctuation">,</span> <span class="token string">'#909399'</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>
<span class="line"> <span class="token keyword">const</span> error <span class="token operator">=</span> <span class="token punctuation">(</span>textOrTitle<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> content <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'Error'</span> <span class="token operator">:</span> textOrTitle<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> textOrTitle <span class="token operator">:</span> content<span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">prettyPrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> text<span class="token punctuation">,</span> <span class="token string">'#F56C6C'</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>
<span class="line"> <span class="token keyword">const</span> warning <span class="token operator">=</span> <span class="token punctuation">(</span>textOrTitle<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> content <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'Warning'</span> <span class="token operator">:</span> textOrTitle<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> textOrTitle <span class="token operator">:</span> content<span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">prettyPrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> text<span class="token punctuation">,</span> <span class="token string">'#E6A23C'</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>
<span class="line"> <span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token punctuation">(</span>textOrTitle<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> content <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'Success'</span> <span class="token operator">:</span> textOrTitle<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token operator">?</span> textOrTitle <span class="token operator">:</span> content<span class="token punctuation">;</span></span>
<span class="line"> <span class="token function">prettyPrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> text<span class="token punctuation">,</span> <span class="token string">'#67C23A'</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>
<span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">title</span> <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">titlePrint</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">table</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</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 function">tablePrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">image</span> <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> imageUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">imagePrint</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> imageUrl<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> info<span class="token punctuation">,</span></span>
<span class="line"> error<span class="token punctuation">,</span></span>
<span class="line"> warning<span class="token punctuation">,</span></span>
<span class="line"> success<span class="token punctuation">,</span></span>
<span class="line"> title<span class="token punctuation">,</span></span>
<span class="line"> table<span class="token punctuation">,</span></span>
<span class="line"> image</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 只在开发环境中使用</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">const</span> log <span class="token operator">=</span></span>
<span class="line"> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">MODE</span> <span class="token operator">===</span> <span class="token string">'development'</span></span>
<span class="line"> <span class="token operator">?</span> <span class="token function">prettyLog</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function-variable function">info</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">error</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">warning</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">success</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">title</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">table</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 class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function-variable function">image</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 class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="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">const</span> <span class="token function-variable function">onMove</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">index</span><span class="token operator">:</span> number<span class="token punctuation">,</span> isUp<span class="token operator">?</span><span class="token operator">:</span> boolean</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> theDatas <span class="token operator">=</span> <span class="token function">cloneDeep</span><span class="token punctuation">(</span>thePageConfig<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">const</span> theNext <span class="token operator">=</span> isUp <span class="token operator">?</span> index <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">:</span> index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span></span>
<span class="line"> theDatas<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> theDatas<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>theNext<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> theDatas<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> thePageConfig<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> thePageConfig<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span></span>
<span class="line"> theNext<span class="token punctuation">,</span></span>
<span class="line"> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line"> thePageConfig<span class="token punctuation">.</span>value<span class="token punctuation">[</span>index<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 number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<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>
<span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">onUp</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">index</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">onMove</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token boolean">true</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>
<span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">onDown</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">index</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">onMove</span><span class="token punctuation">(</span>index<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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="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><!--[--><!--]--></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link label" href="https://github.com/shixindea/shixinde-notes/edit/main/vue笔记及周边生态/Vue3 .md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg class="edit-icon" viewbox="0 0 1024 1024"><g fill="currentColor"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></g></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 2914310412@qq.com">袁果锅</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="/guoguo-notes/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" aria-label="6. Vue 笔记.md"><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span>6. Vue 笔记.md</span></div></a><a class="route-link auto-link next" href="/guoguo-notes/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/Vue3_Element%20Plus.html" aria-label="8. Vue3+Element Plus.md"><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span>8. Vue3+Element Plus.md</span></div></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!----><!--]--><!--]--></div>
<script type="module" src="/guoguo-notes/assets/app-Dx9bNbfq.js" defer></script>
</body>
</html>