Vite App

## 写在前面本文为 `Vue3+Vite` 项目实战系列教程文章第五篇，系列文章建议从头观看效果更佳，大家可关注 [Vue3 实战系列](https://juejin.cn/column/7143287525371543589) 防走失！点个赞再看有助于全文完整阅读！此系列文章主要使用到的主要技术站栈为 `Vue3+Vite`，那既然是 `Vue3`，状态库我们使用的是 `Pinia` 而不是 `Vuex`，在写法上也肯定是以 `CompositionAPI` 为主而不是 `OptionsAPI`，组件库方面我们使用的是 `ArcoDesign` （赶紧丢掉 `ElementUI` 吧！）。 - [这是一份保姆级Vue3+Vite实战教程](https://juejin.cn/post/7147353734912147470) - 介绍 `Vue3+Vite` 项目的搭建以及项目上的一些配置。 - [保姆级Vue3+Vite项目实战多布局（上）](https://juejin.cn/post/7168625925456658440) - 介绍多布局实现思路以及默认布局搭建。 - [保姆级Vue3+Vite项目实战多布局（下）](https://juejin.cn/post/7168627502305247239) - 介绍边栏布局实现以及动态布局切换。 - [保姆级Vue3+Vite项目实战黑白模式切换](https://juejin.cn/post/7169019721747005454) - 项目中的黑白（浅色/暗色）模式切换终于到了写正经项目代码了，那之前也说过，第一个小功能我们写正则校验工具，因为平常写正则老是找在线的校验工具测试，所以就想着自己写一个，以后每次写的正则都补充到在线工具里，慢慢的积攒的多了，也能少写一点点（其实还是因为懒）。 👉🏻 [项目 GitHub 地址](https://github.com/isboyjc/toolsdog) 👉🏻 [项目在线预览](http://toolsdog.isboyjc.com) 如果大家不想从头来过可以直接下载截止到上文内容的代码，👉🏻 [toolsdog tag v0.0.3-dev](https://github.com/isboyjc/toolsdog/releases/tag/v0.0.3-dev) ！代码拉下来之后，`npm install || pnpm install` 下载依赖，然后 `npm run serve || pnpm serve` 启动，如果一切没问题的话，当前项目运行起来是这样的： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10026336ba65471ea6071106c9401c87~tplv-k3u1fbpfcp-zoom-1.image) ## 功能构思写之前我们先来说一说大概的一个构思。由于我目前暂时算是写完了，所以可以先给大家放一个写完的图看下功能，稍候给大家介绍，如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4c5aa997b884c03af0eef46c34dc9fe~tplv-k3u1fbpfcp-zoom-1.image) 大概就是上面这么个样子，其实也没什么特别复杂的地方。一共也就 5 排内容，我们一排一排介绍。先说第一排内容吧，第一排最左边那个图标是是否开启预设匹配，因为我们要在内部预设一些正则，开启预设匹配之后，在正则输入框输入对应正则中文名就可以模糊匹配我们预设的正则，这个是懒癌患者必备。中间输入框就是正则输入框，可以输入正则字符串，当然开启了自动匹配预设之后也可以输入中文匹配预设。输入框右边漏斗图标是修饰符筛选项，就是选择正则匹配的一些修饰符（`g、i、m、s`）。再往右小眼睛图标是可视化预览，开启之后我们输入正则就会自动渲染图中第二排那个图形化正则匹配步骤，只有可视化正则步骤开启并且正则表达式无误才会有第一排最右边倒数第二个即图片下载按钮，用来下载正则可视化 `png` 图。最右边按钮则是复制正则对象按钮。第三排输入框是待匹配字符串，输入一些字符串用来做正则匹配检测的。第四排就是展示匹配到的字符串，匹配到多个用不同的颜色去展示。第五排就是统计一共匹配到了那些字符串。功能大概就是这样。 ## 正则校验页面开始写代码了，先做下准备工作，之前我们已经在 `src/views` 文件夹下创建了正则匹配页面 `RegularPage.vue`，现在我们修改一下，把这个页面修改为 `RegularPage/index.vue`，因为后面我们要写个正则可视化预览的组件，所以这里先把正则校验页面改成文件夹，那这里改了，路由页面也需要改一下，修改 `src/router/menuRouter.js` 文件如下： ```js import IconMaterialSymbolsCodeBlocksOutline from '~icons/material-symbols/code-blocks-outline' export const menuRouter = [ { path: 'devtools', name: 'DevTools', meta: { title: '开发工具', icon: markRaw(IconMaterialSymbolsCodeBlocksOutline) }, redirect: { name: 'RegularPage' }, children: [ { path: 'regular', name: 'RegularPage', meta: { title: '正则在线校验' }, // 修改如下 component: () => import('@/views/RegularPage/index.vue') // component: () => import('@/views/RegularPage.vue') } ] } ] // ... ``` OK，再次刷新页面没问题的话就可以继续了！ ### 准备正则预设之前我们也说了，要写一些预设的正则让用户可以直接搜正则功能名匹配，那写之前，我们先来准备一下这些预设的正则，在 `src/utils` 文件夹下新建 `regexp.js` 文件，我们把一些常用正则写进去，如下： ```js export const isNumber = /^[0-9]*$/g isNumber.name = '匹配数字' export const isNonnegativeInteger = /^\d+$/g isNonnegativeInteger.name = '匹配非负整数（正整数 + 0）' export const isPositiveInteger = /^[0-9]*[1-9][0-9]*$/g isPositiveInteger.name = '匹配正整数' export const isNegativeInteger = /^-[0-9]*[1-9][0-9]*$/g isNegativeInteger.name = '匹配负整数' export const isInteger = /^-?\d+$/g isInteger.name = '匹配整数' export const isNonpositiveInteger = /^((-\d+)|(0+))$/g isNonpositiveInteger.name = '匹配非正整数（负整数 + 0）' export const isNonnegativeFloat = /^\d+(\.\d+)?$/g isNonnegativeFloat.name = '匹配非负浮点数（正浮点数 + 0）' export const isPositiveFloat = /^((0\.\d*[1-9]\d*)|([1-9]\d*\.\d*)|([1-9]\d*))$/g isPositiveFloat.name = '匹配正浮点数' export const isNegativeFloat = /^-((0\.\d*[1-9]\d*)|([1-9]\d*\.\d*)|([1-9]\d*))$/g isNegativeFloat.name = '匹配负浮点数' export const isFloat = /^(-?\d+)(\.\d+)?$/g isFloat.name = '匹配浮点数' export const isNonpositiveFloat = /^((-\d+(\.\d+)?)|(0+(\.0+)?))$/g isNonpositiveFloat.name = '匹配非正浮点数（负浮点数 + 0）' export const isEnglish = /^[A-Za-z]+$/g isEnglish.name = '匹配由26个英文字母组成的字符串' export const isLowercaseEnglish = /^[a-z]+$/g isLowercaseEnglish.name = '匹配由26个英文字母的小写组成的字符串' export const isUppercaseEnglish = /^[A-Z]+$/g isUppercaseEnglish.name = '匹配由26个英文字母的大写组成的字符串' export const isEnglishAndNumber = /^[A-Za-z0-9]+$/g isEnglishAndNumber.name = '匹配由数字和26个英文字母组成的字符串' export const isEnglishAndNumberAndUnderline = /^\w+$/g isEnglishAndNumberAndUnderline.name = '匹配由数字、26个英文字母或者下划线组成的字符串' export const isChinese = /^[\u4e00-\u9fa5]{0,}$/g isChinese.name = '匹配中文' export const isPhone = /^1[3456789]\d{9}$/g isPhone.name = '匹配手机号' export const isIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/g isIdCard.name = '匹配身份证（一代&二代）' export const isFirstGenerationIDCard = /(^\d{15}$)/g isFirstGenerationIDCard.name = '匹配一代身份证' export const isSecondGenerationIDCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/g isSecondGenerationIDCard.name = '匹配二代身份证' export const isUrl = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g isUrl.name = '匹配URL' export const isIP = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/g isIP.name = '匹配IP' export const isDate = /^(\d{4})-(\d{2})-(\d{2})$/g isDate.name = '匹配日期' export const isTime = /^([01]\d|2[0-3])(:[0-5]\d){1,2}$/g isTime.name = '匹配时间' export const isDateTime = /^(\d{4})-(\d{2})-(\d{2})\s([01]\d|2[0-3])(:[0-5]\d){1,2}$/g isDateTime.name = '匹配日期时间' export const isColor = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/g isColor.name = '匹配颜色' export const isQQ = /^[1-9][0-9]{4,9}$/g isQQ.name = '匹配QQ' export const isWeChat = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/g isWeChat.name = '匹配微信' export const isPostalCode = /[1-9]\d{5}(?!\d)/g isPostalCode.name = '匹配邮编' export const isMacAddress = /^([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}$/g isMacAddress.name = '匹配MAC地址' export const isIPV4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/g isIPV4.name = '匹配IPV4地址' export const isIPV6 = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/g isIPV6.name = '匹配IPV6地址' export const isBase64 = /[^A-Za-z0-9\+\/\=]/g isBase64.name = '匹配Base64' export const isPasswordStrong = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/g isPasswordStrong.name = '匹配强密码' export const isPasswordMedium = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/g isPasswordMedium.name = '匹配中等密码' export const isPasswordSimple = /^[a-zA-Z0-9_-]{6,16}$/g isPasswordSimple.name = '匹配简单密码' export const isCarNumber = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/g isCarNumber.name = '匹配车牌号（简单）' export const isLicensePlateNumber = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/g isLicensePlateNumber.name = '匹配车牌号（严格）' export const isStockCode = /^(s[hz]|S[HZ])(000[\d]{3}|002[\d]{3}|300[\d]{3}|600[\d]{3}|60[\d]{4})$/g isStockCode.name = '匹配股票代码' export const isBankCard = /^([1-9]{1})(\d{14}|\d{18})$/g isBankCard.name = '匹配银行卡' export const is126Email = /((^([a-zA-Z]))(\w){5,17})@126.com$/g is126Email.name = '匹配126邮箱' export const is163Email = /((^([a-zA-Z]))(\w){5,17})@163.com$/g is163Email.name = '匹配163邮箱' export const isGmailEmail = /((^([a-zA-Z]))(\w){5,17})@gmail.com$/g isGmailEmail.name = '匹配Gmail邮箱' export const isQQEmail = /((^([a-zA-Z]))(\w){5,17})@qq.com$/g isQQEmail.name = '匹配QQ邮箱' export const isSinaEmail = /((^([a-zA-Z]))(\w){5,17})@sina.com$/g isSinaEmail.name = '匹配新浪邮箱' export const isSohuEmail = /((^([a-zA-Z]))(\w){5,17})@sohu.com$/g isSohuEmail.name = '匹配搜狐邮箱' export const isYahooEmail = /((^([a-zA-Z]))(\w){5,17})@yahoo.com$/g isYahooEmail.name = '匹配雅虎邮箱' export const isOutlookEmail = /((^([a-zA-Z]))(\w){5,17})@outlook.com$/g isOutlookEmail.name = '匹配Outlook邮箱' export const isHotmailEmail = /((^([a-zA-Z]))(\w){5,17})@hotmail.com$/g isHotmailEmail.name = '匹配Hotmail邮箱' export const isEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/g isEmail.name = '匹配邮箱' ``` 如上，我们字面量创建并导出了很多正则对象，而且给每个正则对象都加了名字留作后用！ **PS：** 网上随便摘抄了些，简单看了下，暂时没有验证对错，不保真哈，后面用着不对再改吧，大家有什么补充的或者发现有错误，可以直接去 `GitHub` 提 `PR` 或者 `issues` 哈，可以一块完善下，方面大家嘛！！ ### 正则输入框接下来我们开始写代码，上面说过我们可以将整个页面分为上中下三块，先来简单写个布局，修改 `RegularPage/index.vue` 正则校验页面，如下： ```html ``` OK，整活吧！我们先看下代码，也就是正则输入框相关的代码，修改 `RegularPage/index.vue` 正则校验页面如下： ```html ``` 来简单介绍下上面代码内容：这里我们还是使用 `ArcoDesign` 组件，我们创建了一个响应式属性 `size` 用来控制页面上输入框等 `ArcoDesign` 组件大小。创建正则表达式字符串 `regStr`，注意这里的正则字符串是不带双斜杠 `//` 的。创建正则修饰符 `regFlag`，修饰符这里我们创建的是个响应式数组，数组中每一项代表一个正则修饰符（修饰符是正则表达式的标记，用于指定额外的匹配策略，不理解的同学可以百度谷歌下）。正则字符串和修饰符有了，那正则表达式也就有了，创建正则表达式对象 `reg`，我们通过 `Vue API` 的 `watchEffect` 方法来监听 `regStr` 和 `regFlag` 改变，随之给正则对象 `reg` 赋值，创建的时候使用 `try…catch` 包裹，这样如果创建失败会走 `catch`，我们在 `catch` 中把正则对象清空，别问为啥不用计算属性，因为正则对象 `reg` 后面用的很多，使用计算属性后面会很麻烦。接着还创建了一个是否开起正则预设搜索的属性 `auto`，默认为 `true`，代表可以输入中文模糊匹配预设的正则。 OK，再看模板，`Template` 模板中每个功能按钮我们都使用 `ArcoDesign` 的 `a-tooltip` 组件做了个悬浮气泡提示，下文所有功能按钮都有气泡提示，不在赘述。在上中下三个模块的上模块中，我们先写了一个预设匹配开启按钮，通过 `auto` 属性值渲染不同图标颜色来区分是否开启预设匹配，图标使用的是 `iconify` 图标库的 `material-symbols:astrophotography-auto` 图标（自动引入配置看前文，后面 `iconify` 图标库的图标我就不提了哈，看下图标组件名就知道是哪个图标了，如果有用到自定义的图标我再单独说），并且给该按钮写了点击事件，点击修改 `auto` 属性值，代码片段如下： ```html

``` 接着是输入框，由于输入框有预设匹配的需求，所以这里我们使用 `ArcoDesign` 的 `a-auto-complete` 组件，组件 `v-model` 值即上面创建的正则字符串属性 `regStr`。在开头我们导入了 `regexp.js` 文件中全部的正则预设对象 `regPresetsObj` 。 `a-auto-complete` 组件的 `data` 属性即下拉列表数据，我们填入预设数组 `regPresets`，默认是空的数组即没有匹配中项。组件的 `search` 方法即自定义的匹配方法，我们写了 `regPresetMatch` 方法去匹配。`regPresetMatch` 方法中参数 `value` 即正则字符串 `regStr` 值，我们在方法中校验 `value` 值存在并且预设匹配 `auto` 属性为 `true` 的情况下去匹配默认预设列表 `regPresetsObj` 中的数据匹配并返回一个匹配到的列表赋值给预设数组 `regPresets`，如果 `value` 值为空或者 `auto` 属性为 `false` 则重置预设数组 `regPresets` 。这样我们每次写内容时预设列表中有匹配到就会以下拉的形式展示出来。 **PS：** 模糊匹配主要是用 `ES6` 的 `includes`、`filter` 方法，新同学可以查查文档。预设数组 `regPresets` 的格式是根据组件要求来的，即数组对象，数组中每个对象属性如下： - `label` 预设正则项中文名。 - `value` 预设正则项 `key` ，我们使用正则对象的 `source` 值来作为 `key` ，正则对象的 `source` 属性即正则字符串（不带双斜杠不带修饰符的那种）。 - `regexp` 预设正则对象，这个是我们自定义的属性，用来后面下拉选中时给修饰符赋值。代码片段如下： ```js // 正则预设匹配方法 const regPresetMatch = value => { if (value && auto.value) { regPresets.value = [...Object.values(regPresetsObj)] .filter(r => r.name.includes(value) || r.source.includes(value)) .map(v => { return { label: v.name, regexp: v, value: v.source } }) } else { regPresets.value = [] } } ``` 默认 `a-auto-complete` 组件选中时会将下拉列表选中项的 `value` 值赋值给组件 `v-model` 属性，匹配项的 `value` 值我们之前设置的是正则字符串，即匹配到预设选中后 `value` 值就会赋值给 `regStr` 属性，由于我们的预设正则中可能携带修饰符，所以，我们还需要在组件 `select` 选中事件中给修饰符 `regFlag` 属性赋值，即 `regPresetSelect` 方法内容，如下： ```js // 正则预设选中方法 const regPresetSelect = r => { let selected = regPresets.value.find(v => v.value === r) if (selected) regFlag.value = selected.regexp.flags.split('') } ``` **PS：** 正则对象中的 `source` 属性是正则字符串，而 `flags` 属性也是一个字符串，即该正则的修饰符，不晓得的同学可以控制台随便打印一个正则对象看下。 OK，我们在 `a-auto-complete` 组件中还写了两个插槽，同样都是组件插槽哈，可以看看文档，前置插槽 `prepend` 和后置插槽 `append`，前置插槽中除了 `/` 之外，我们还简单用 `2` 个图标来提示当前输入正则的对错，后置插槽中除了 `/` 之外，我们还渲染了当前选中的修饰符 `regFlag`。代码片段如下： ```html ``` OK，最后就是修饰符选项了，使用同一个图标按钮，以不同颜色区分是否选中有修饰符，使用 `ArcoDesign` 的 `a-popover` 组件使鼠标悬浮到图标按钮时出现气泡提示弹窗，弹窗内以多选框组 `a-checkbox-group` 组件渲染几个修饰符选项，`v-model` 值设置为修饰符属性 `regFlag` （数组）即可。代码片段如下： ```html

``` 修饰符我们写了四个，分别是： - `-g` 匹配全局。 - `-i` 忽略大小写。 - `-m` 匹配多行。 - `-s` 特殊字符.，包含换行符。 OK，简单解释了一下上面代码的意思，保存刷新页面，当前效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c52cb18e9ec140a3925c808a2ae9d0e2~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a62e84a72094e64a53ee5d48a730ffa~tplv-k3u1fbpfcp-zoom-1.image) 正则对象有了，接下来我们来写匹配结果！ ### 正则匹配结果预览想要匹配结果我们要先声明一个待匹配的字符串属性 `matchStr`，然后使用 `ArcoDesign` 的 `a-textarea` 组件写个多行文本即可，代码片段如下： ```html

``` 接着我们需要展示当前待匹配字符串基于正则对象匹配到的内容，这里直接用计算属性来监听待匹配字符串改变然后使用 `match` 方法在待匹配字符串中匹配正则对应值即可。 **PS：** `match` 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，不了解的同学还是查下文档。如下： ```js // 匹配结果数组 reg即上文写的正则对象 filter过滤空值，默认空数组 const matchingResults = computed( () => matchStr.value.match(reg.value)?.filter(v => v) || [] ) ``` OK，现在我们可以在 `Template` 模板中简单写一下匹配结果的 `HTML` 了，校验当匹配到的结果数组 `matchingResults` 长度大于 `0`，即展示一共多少项匹配，然后依次列出匹配的结果值。数组长度小于等于 `0` 则不展示。 ```html

共 {{ matchingResults.length }} 处匹配：

``` 上面我们只展示了匹配到的各个结果，我们还需要在完整待匹配字符串中展示一下各个匹配结果的位置，即展示完整字符串，并把匹配结果以不同的颜色在原字符串中标识出来。想一想，原始字符串我们有，匹配到的结果我们也有，所以基于原始字符串和匹配结果我们写个格式化方法给匹配到的字符串加一下标签和样式然后返回渲染到页面就行了，代码片段如下： ```html

``` OK，把上面这些内容组合一下，放到 `RegularPage` 页面中，目前正则校验页面的代码如下： ```html ``` 保存刷新页面，输入一个手机号正则，选中修饰符 `m` 即多行匹配，在待匹配输入框中输入一些正确或者错误的手机号，效果如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43e3e012fff84f8497a928290c389d94~tplv-k3u1fbpfcp-zoom-1.image) ### 正则可视化预览接下来写下正则对象的可视化图表预览，首先我们要写一个按钮来控制是否开启可视化预览，声明一个是否开启可视化预览属性 `visualization` （默认为 `true` 开启即可），然后和上面开启预设一样，写一下按钮（按钮图标还是 `iconify` 图标库中随便找的图标哈，看代码就行）放在第一行修饰符按钮右边即可，代码片段如下： ```html

``` 接下来我们开始写可视化组件了，简单描述流程就是先给正则字符串做 `AST` 解析，然后分析正则的 `AST` 数据，最后渲染图表。说起来很简单，但是真写的话还是比较麻烦的，这里就直接用三方包了，我们使用 [regulex](https://github.com/CJex/regulex) 来做这件事。 `regulex` 是一个 `JavaScript` 正则表达式解析器和可视化工具，这个包也比较老了，好几年没更新了，由于我们项目有黑白模式切换，但是这个包是不支持修改颜色的，于是我 `clone` 了下来代码修改了渲染方法，让它支持了下黑白模式。在克隆的时候由于主分支代码有点问题，所以我使用的是 `legacy` 分支代码做的修改，由于 `legacy` 分支代码构建时使用的是 `require.js` 输出的 `AMD` 规范代码，所以。。。先凑活用吧，因为它很久不更新了，后面有时间我们基于这个库，只使用它的正则 `AST` 解析以及规则分析两个核心方法，然后自己再写一个渲染方法构建发个 `ESModule` 包，到时候我补充一篇文章，目前这个包没啥可说的，所以我们一会儿只介绍下核心方法能使用就行了，因为实在是太老旧了。。。 **PS：** `AMD`、`ESModule` 以及 `require.js` 不了解可以看看另一篇文章 [「前端工程四部曲」模块化的前世今生（上）](https://juejin.cn/post/7007946894605287432) 后面可视化组件代码中我们会使用到 `regulex` 库的三个核心方法，如下： - `parse()` - 做正则 `AST` 规则解析，该方法接收一个正则字符串，返回一个解析后的数据对象。 - `Raphael()` - 这方法来源于 [RaphaelJS](http://dmitrybaranovskiy.github.io/raphael/) ，它是一个基于 `SVG` 的绘图库，所以它是 `regulex` 依赖的三方包，主要就是用来绘制正则对象的 `SVG` 图表的，它的用法大家想要详细了解看文档吧。。。该方法返回一个 `Raphael` 实例，这里我们也就只需要创建个实例就行了。 - `visualize()` - 有了 `AST` 和绘图实例，那核心的渲染逻辑就是这个方法了，主要作用就是基于解析后的正则对象规则使用 `Raphael` 实例来绘制图形。我这边改的也是只改了这个方法，其余都没动，而且也不影响原来的代码逻辑，此方法本来接收三个参数，分别是解析后的正则数据对象（即 `parse()` 方法返回值）、正则修饰符字串和 `Raphael` 绘图实例，由于我们加了黑白模式，所以给这个渲染方法加了第四个参数即 `mode` 模式，接收 `dark、light` 两个模式值，渲染出的图表是对应的两套颜色。当然，不传这个参数也可以的。 OK，放一个我这边本地修改后重新构建压缩好的 `regulex` 包，就是一个 `AMD` 规范的 `JS` 文件，地址在这里 👉🏻 [regulex.js](https://github.com/isboyjc/toolsdog/blob/main/public/static/regulex.js)，自行下载吧，要是你不需要模式切换时图表颜色也改变的话，你也可以直接克隆官方代码构建一个官方包，不过还得本地构建，太麻烦，直接用我这个改过的方便，下载个 `JS` 文件就行了！我们以 `CDN` 方式引入这个 `JS` 文件，当然，我们没有 `CDN`，所以下载下来 `regulex.js` 文件后，直接把这个文件放在项目根目录下的静态资源文件中，即项目根目录下 `public` 文件夹下新建一个 `static` 文件夹，把 `regulex.js` 文件放在这个文件夹下即可，我们项目代码默认构建时输出的静态资源文件就在 `dist/static` 文件夹下，这里我们直接在 `public` 文件夹下创建的文件构建时是不会被打包重写的，而是直接复制文件到 `dist` 目录下，所以打包时，会直接把 `public` 文件夹下的文件 `copy` 到最终项目输出的 `dist` 目录下，`public/static` 文件夹下的文件也就会全部 `copy` 到 `dist/static` 文件夹下。文件放好之后，修改下入口 `HTML` 文件，引入该文件（注意这里引入是需要绝对路径的），即根目录下的 `index.html` 文件如下： ```html Vite App

``` 由于这是个 `AMD` 规范的文件，内置了 `requireJS`，使用的时候直接调用 `require` 方法引入模块即可，如下例： ```js let { parse, visualize, Raphael } = require('regulex') ``` 准备工作就绪，可以开始写正则可视化组件了，其实很简单哈，先来看代码，在 `src/views/RegularPage` 文件夹下新建 `components/RegularVisualization.vue` 文件，组件代码如下： ```html ``` 简单介绍一下代码大概逻辑，该组件接收两个参数，一个 `modelValue`，即 `v-model` 传入的是正则对象，另一是 `mode` 即模式字符串。我们使用 `Vue` 的 `watch` 方法监听了这两个参数，组件内部监听到参数改变时，会重新执行初始化方法。该组件的核心就是初始化 `init` 方法，接下来看下这块的代码片段： ```js // 初始化方法 function init(reg) { if (!reg) return document.getElementById('graphCt').innerHTML = '' let { parse, visualize, Raphael } = require('regulex') // 创建 Raphael 实例 let paper = Raphael('graphCt', 0, 0) // 清空画布 paper.clear() try { // 渲染正则图表 visualize(parse(reg.source), reg.flags, paper, props.mode) } catch (e) { if (e instanceof parse.RegexSyntaxError) { let msg = ['Error:' + e.message, ''] if (typeof e.lastIndex === 'number') { msg.push(reg) msg.push(new Array(e.lastIndex).join('-') + '^') } console.error(msg.join('\n')) } else { throw e } } } ``` 我们在 `Template` 模板中创建了一个 `div` 元素，给它了个 `ID` 即 `graphCt`，这个元素就是将来 `SVG` 图表渲染的目标画布元素了。上面初始化方法内我们获取到画布元素，然后导出 `regulex` 包的三个核心方法。先使用 `Raphael` 方法，传入画布 `ID` 和宽高创建 `SVG` 绘图库实例，这里宽高传入 `0` 即可，因为还没有内容。紧接着调用绘图库实例中的 `clear` 方法，先清空一下画布，避免重复渲染。然后使用 `visualize` 方法，第一个参数传入的是由 `regulex` 库的 `parse` 方法创建的正则解析对象，第二个参数传入正则对象的修饰符字符串，第三个参数传入上面创建的绘图库实例，第四个参数即传入我们的 `mode` 模式字符串就可以了。每当正则对象或者模式字符串改变时就会重新执行 `init` 方法渲染画布。上面代码 `catch` 代码块中我们做了一些错误处理，不用在意。OK，一个正则可视化渲染组件核心就写好了，那由于我们还要有一个可视化图表转图片下载的功能，所以还需要在组件内部写一下画布转图片下载方法暴露出去。核心代码片段如下： ```js // 导出图片 function exportImage() { let ratio = window.devicePixelRatio || 1 // 获取SVG画布元素 let svg = window.graphCt.getElementsByTagName('svg')[0] // 获取SVG画布宽高 let w = svg.clientWidth let h = svg.clientHeight // 创建Image对象 let img = new Image() img.width = w img.height = h img.setAttribute('src', svgToBase64(svg)) // 创建Canvas对象 let canvas = document.createElement('canvas') canvas.width = w * ratio canvas.height = h * ratio let ctx = canvas.getContext('2d') ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // Image对象onload事件 img.onload = function () { // 给一个背景颜色，不然导出的图片是透明的 let bgColor = props.mode === 'dark' ? '#2e2e31' : '#f2f3f5' ctx.fillStyle = bgColor // 绘制Image对象到canvas画布 ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.drawImage(img, 0, 0) // canvas画布转 Base64 并导出 png canvasToPictureDownload(canvas, `regexp_visualization_${Date.now()}`) } } // canvas转图片下载 function canvasToPictureDownload(canvas, name) { let a = document.createElement('a') // 将画布内的信息导出为png图片数据 Base64 a.href = canvas.toDataURL('image/png') // 设定下载名称 a.download = name // 点击触发下载 a.click() } // 将svg转换为base64 function svgToBase64(svg) { return 'data:image/svg+xml,' + encodeURIComponent(svg.outerHTML) } defineExpose({ exportImage }) ``` 这块一共有三个方法，简单解释下，由于我们渲染的图表是 `SVG` 图表，所以 `exportImage` 导出图片方法中我们通过画布 `ID` 先直接获取到 `SVG` 元素，拿到 `SVG` 元素之后，我们需要将 `SVG` 先转成 `Base64` 格式（即 `svgToBase64` 方法），拿到了 `SVG` 的 `Base64` 数据，我们直接 `new Image` 创建一个 `Image` 对象把这个 `Base64` 数据作为该对象 `href` 属性值写入，`Image` 对象宽高获取一下 `SVG` 画布，使用 `SVG` 画布的宽高即可。接着我们创建一个 `Canvas` 画布对象，在 `Image` 对象加载完成后，把 `Image` 对象绘制到 `Canvas` 画布中，最后调用 `canvasToPictureDownload` 方法，该方法即把 `Canvas` 画布转成 `png` 格式的 `Base64` 数据，然后 `JS` 创建一个 `a` 标签写入 `href` 值，再给 a 标签对象写入 `download` 属性，其属性值为下载的默认图片名，这里我们给了一个时间戳组成的字符串，最后手动触发下 `click` 点击事件触发下载即可。最后我们在可视化组件中暴露出了图片下载方法，如下： ```js defineExpose({ exportImage }) // ... ``` **PS：** 由于组件我们时使用 `setup` 模式写的，所以想要暴露方法，必须使用 `defineExpose` 方法手动暴露。还有之前文章也说过：因为我们使用了 `setup`，那试想 `setup` 在 `Vue` 组件中的哪个时期才会调用？它是在组件调用时被调用，并且是在组件的 `beforeCreate` 生命周期之前执行，也就是想要拿到 `setup` 中的数据，那至少得等组件调用了才行，组件还没调用的时候，是绝对获取不了 `setup` 中属性或方法的。这样的话我们在父级组件中拿到组件实例对象后就可以调用其导出的 `exportImage` 方法了！！ OK，组件写完了，来在正则页面 `RegularPage/index.vue` 文件中使用一下。由于这里要用到模式属性，所以直接在文件开头，需要导入我们上一篇文章中创建的 `pinia system` 模块中的当前模式对象，如下： ```js import { useSystemStore } from '@/stores/system' const { currentMode } = storeToRefs(useSystemStore()) ``` 这里有个问题哈，我们这里 `visualize` 方法的参数 `mode` 只支持传入字符串 `dark` 或者 `light`，但是我们的当前模式对象中 `name` 属性在自动模式下会是 `auto` ，这就会存在问题，我们需要获取到 `auto` 模式下到底是 `dark` 还是 `light`。所以我们需要借助 `VueUse` 的另一个方法 `useDark` 通过和之前 `useColorMode` 方法一样的属性配置来获取当前模式，其实 `useDark` 方法内部也是靠 `useColorMode` 方法实现的，在 `useDark` 方法源码中，会使用 `useColorMode` 传入配置项生成一个响应式的 `mode` 属性，而 `useDark` 方法返回的 `isDark` 属性，其实就是一个计算属性，其源码核心大至如下： ```js export function useDark(options = {}) { const mode = useColorMode({ ...options, // ... }) const isDark = computed({ get() { return mode.value === 'dark' }, set(v) { // ... }, }) return isDark } ``` 看，是不是很简单，跑题了，回到正题哈。我们来写下当前模式获取的代码： ```js // 是否是黑暗模式 const isDark = useDark({ selector: 'body', attribute: 'arco-theme', valueDark: 'dark', valueLight: 'light', initialValue: currentMode.value?.name, storageKey: null }) // 当前颜色模式 const mode = computed(() => { if (currentMode.value?.name == 'auto') { return isDark.value ? 'dark' : 'light' } return currentMode.value?.name }) ``` OK，这样的话每当 `pinia` 中全局的当前模式对象改变，我们这个页面的模式值也会跟着改变，并且当全局模式值为 `auto` 时，我们这里也可以知道它到底是 `dark` 还是 `light`。拿到了当前模式数据，接下来我们在 `Template` 模板就可以使用下组件了。还记得开始时我们把整个正则的页面分为上中下三个模块吗，中间那个模块就是放可视化图表的，我们直接把可视化组件代码塞到中间模块的 `div` 中，匿名组件的组件名默认就是文件名哈，组件还要做校验，只有 `visualization` 属性为 `true` 时才加载可视化组件（`reg` 还是我们之前写的那个正则对象哈）： ```html

``` 趁热打铁，再来给下载可视化图片的按钮写一下，同样和上面其他按钮差不多，放在是否显示可视化预览按钮右边就行，不过这个下载图片的按钮也需要校验，只有当 `reg` 正则对象存在且是否显示可视化预览的 `visualization` 属性值为 `true` 时才显示，并且我们给按钮加了一个点击事件 `exportRegVisualizationToImg`，即下载图片方法，代码片段如下： ```html

``` OK，上面我们写可视化组件时，在可视化组件标签中还写了个 `ref` 属性，值为 `regVisualizationRef`，那我们可以通过 `ref` 属性来获取一下可视化组件实例，和 `Vue2` 的 `refs` 类似，但是在 `setup` 中我们需要创建一个和组件中 `ref` 属性值 `regVisualizationRef` 同名的 `ref()` 数据，默认是 `null`，当组件渲染之后此属性值即组件实例对象。然后我们补下下载按钮的点击事件内容，在下载按钮点击事件中调用可视化组件实例抛出的下载图片方法，如下： ```js // 可视化组件实例 const regVisualizationRef = ref(null) // 导出正则可视化图片 const exportRegVisualizationToImg = () => { regVisualizationRef.value && regVisualizationRef.value?.exportImage() } ``` 可视化模块到此差不多就写完了，看下完整代码： ```html ``` 保存刷新页面，看下效果。 `dark` 模式下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/485a04a2655940218bd96612a2180246~tplv-k3u1fbpfcp-zoom-1.image) `light` 模式下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1cb770045cd457ba7863f586b2caa62~tplv-k3u1fbpfcp-zoom-1.image) ### 正则复制最后来一个复制的小功能，就是开头我们说的，正则存在时，第一行最右边要显示一个 `copy` 按钮，用来把当前正则复制到剪切板。代码很简单，还是在 `RegularPage/index.vue` 正则页面，`script setup` 中新增 `JS`： ```js const { copy, text, isSupported } = useClipboard({ source: reg }) // Copy正则到剪贴板 const regCopy = async () => { if (!isSupported.value) return AMessage.info('不支持复制') await copy() AMessage.success('复制成功：' + text.value) } ``` 接着和之前的按钮一样，在 `Template` 模板的上模块最右侧加个复制图标按钮，在 `reg` 存在时显示，新增模板内容如下： ```html

``` 还是借助了 `VueUse` 的 `useClipboard` 方法哈，这个方法比较简单，所以大家看看就行，或者去刷下文档，复制到剪切板有兼容性问题以及浏览器策略问题（生产环境下 `http` 不可复制，得 `https` 才行，开发环境没事）。我们使用该方法返回的 `isSupported` 属性判断下当前页面是否支持复制到剪切板。返回的 `copy` 方法就如方法名用来做复制。返回的 `text` 属性是复制成功后剪切板的值。先看下复制的效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e4b6db5a1264cac8aae945a451f9949~tplv-k3u1fbpfcp-zoom-1.image) 到此正则校验页面功能就先告一段落了，完整代码在下一小节看吧 ### 完整代码 ```html ``` 如果大家跟着写了的话，不知道大家有没有亲身体验到 `ComponsitionAPI` 的一个众所周知的小优点，上面 `JS` 代码中我把不同的小功能模块以空白行分开了，每个小模块用到的属性值、方法都在一块，不需要像 `OptionsAPI` 那样上下来回跳转去改东西。当然也可能没啥感觉，毕竟这个页面功能很少，有点简单，没事儿，后面还有机会。其实到目前为止我们用了很多 `VueUse` 的方法，实在是因为它很香啊，目前我们还没有写过 `hooks`，当我们后面写写 `hooks` 之后，你再回头看看 `VueUse` 库的一些方法，就会体会到 `ComponsitionAPI` 和 `hooks` 的精髓了。没事的话可以扒拉一下 `VueUse` 库，没用过看看文档熟悉下，用过的挑其中一些 `hooks` 的源码学习学习，会有很多收获，`VueUse` 中每个 `hooks` 的源码并不复杂也不多，适合入门学习。 ## 增加路由跳转动画我们现在路由跳转太生硬了，所以咱们使用 `Vue` 内置的 `transition` 组件来做个过渡动画。官方文档：[transition 组件](https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component) 没用过的同学赶紧刷下文档，我们这里直接写了，修改可切换布局组件 `DefaultLayout` 和 `SidebarLayout`，找到 router-view 标签，修改如下： ```html

``` 注意，两个布局中都需要改。 `transition` 组件 `name` 属性我们设置成 `fade-x`，接下来写下进入离开的过渡样式，加个平移淡入就可以了。这个过渡样式在两个组件中都可以用到，并且后面说不定哪里也能用到，我们给它写到公共样式中。在 `src/assets` 文件夹下新增 `css/index.css` 文件，暂时先把公共样式写在这个文件里，如下： ```css /* 路由过度动画 */ .fade-x-enter-active { transition: all 0.3s ease-out; } .fade-x-leave-active { transition: all 0; } .fade-x-enter-from { transform: translateX(20px); opacity: 0; } .fade-x-leave-from { opacity: 0; } ``` 在 `main.js` 入口文件中引入下公共样式： ```js // 公共样式 import '@/assets/css/index.css' // ... ``` OK，保存刷新页面，跳转下路由就可以看到切换路由时有个圆润的平移淡入过渡动画了。 ## 部部部部署下因为终于写到了一个功能页面，所以可以部署上去预览了！没有部署教程，因为目前这就是一个静态页面，所以我这边直接使用 `docker nginx` 镜像部署了一个 `Web` 服务，其实啥都没有，直接 `build` 构建下，然后把构建好的静态资源扔上去就可以了，大家可以访问看看啥的，服务器不太行，稍微有点慢，自动化部署的教程得后面项目陆续变得复杂了再写。哦，还没买域名，暂时就先用个二级域名吧！！！预览地址：[](http://toolsdog.isboyjc.com/) 嗯。。。也还没来得及搞证书，So，不是 `https` 网站，所以碍于浏览器安全策略目前是不支持我们上面写的复制到剪切板的功能，回头我有空搞下证书就好了！ ## 写在最后嗯，就这样！截止本文的代码已经打了 `Tag` 发布，可下载查看： 👉🏻 [toolsdog tag v0.0.4-dev](https://github.com/isboyjc/toolsdog/releases/tag/v0.0.4-dev) 👉🏻 [项目 GitHub 地址](https://github.com/isboyjc/toolsdog) 谢阅，如有错误请评论纠正，有什么疑问或者不理解的地方都可以私信咨询我，由于不经常写实战文章，也为了不同程度同学都可以看下去，文章可能稍微有些啰嗦，见谅，再次欢迎关注专栏 [Vue3实战系列](https://juejin.cn/column/7143287525371543589) ，点赞关注不迷路，回见！ > 本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！