MCong’s Blog 👋🏼

前段时间项目中的一个商品原料对比页面需要优化一下，因为一些原料、价格、规格等一些参数可能不止一个，某些参数最多支持20个，我们需要将这些材料进行展示对比，初版时做的样子是不管它有多少个，只显示第一个，其余的利用饿了么组件库中的 Tooltip来显示，经过一段客户使用后，反馈说体验非常不友好，想要改成和市场上大部分对比一样，无论有多少的参数，全部都显示在页面上，并且在每一个前面加上一个小圆点，不需要鼠标放上面后再来显示所有的，这样看起来直观一点，因为当时做这个项目时时间比较紧，于是选择了纯手撸页面，没有用其他插件，具体就是将表头和每一列都分开，表头是始终固定在左侧，对比的列表是用的数组中的 slice方法来分割出来每一个添加的对比元素，使用v-for进行遍历每一个元素，那么，废话不多说，直接上代码吧 父组件 <div ref="tableRef" class="table-title"> <div class="table-style table-fixed"> <!-- 表头 --> <div v-for="(h, i) in headers....

前言：在前端开发过程中，登录注册页面几乎都是必不可少的页面，有些产品经理就会要求我们对密码进行强度的校验，普通的长度校验很简单，使用正则就可以实现，但是如果需要使用绿、黄、红色来提示用户，又怎么来做呢？废话不多说，直接上代码 校验规则 CheckPassword.js/CheckPassword.ts /** * 数字 */ const REG_NUMBER: string = '.*\\d+.*' /** * 大写字母 */ const REG_UPPERCASE: string = '.*[A-Z]+.*' /** * 小写字母 */ const REG_LOWERCASE: string = '.*[a-z]+.*' /** * 特殊符号(~!@#$%^&*()_+|<>,.?/:;'[]{}\) */ const REG_SYMBOL: string = '.*[~!@#$%^&*()_+|<>,.?/:;\'\\[\\]{}"]+.*' /** * 键盘字符表(小写) * 非shift键盘字符表 */ const CHAR_TAB....

说明：我用的富文本编辑器是wangEditor： wangEditor官网 安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save yarn add html-docx-js-typescript # 或者 npm install html-docx-js-typescript --save-dev 利用Button按钮进行导出 在所需页面中引入资源 import '@wangeditor/editor/dist/css/style.css' // 引入 富文本编辑器css import { Editor, Toolbar } from '@wangeditor/editor-for-vue'//富文本编辑器 import { asBlob } from 'html-docx-js-type....

封装下载zip逻辑代码，可多处重复使用 import JSzip from 'JSzip' import { base64ToBlob } from './base64ToBlob' import type { DownloadList } from '@/views/audit/element/types' /** * 下载zip文件 * @param fileName 文件名（不需要加后缀）{string} * @param downloadList 压缩包内文件的列表 {DownloadList[]} */ export function downloadZip(fileName: string, downloadList: DownloadList[]) { const zip = new JSzip() const fileNames: string[] = [] downloadList.forEach((item) => { const filename = item.fileName const blob = base64ToBlob(item.url, ite....

前言：因为公司项目中需要在线聊天的客服功能，而且这个功能正好是由我来完成，因为是临时加的功能，且前面还有需求没做完，所以目前功能很简单，只需要实现互相实时聊天且支持简单的emoji表情即可，正所谓兵马未动，粮草先行，想要成为一个优秀的程序员，应该要想到后期可能会增加的功能点，如果此前没有做过类似的功能，那么需要提前抽时间先大概了解一下功能点是否可以实现，且实现是否麻烦，是一个程序员必备的职业素养，当然如果有类似的开源产品，可以借鉴一下都有什么功能特点，可以适当先看一下如何实现,周末闲来无事，就想到了微信聊天中是可以支持图片粘贴的，那么，在线客服功能是否也同样可以支持呢？带着这个问题，我打开了淘宝的网页版，打开客服聊天页面，发现淘宝的并不能直接在文本域中放入图片，而是利用一个弹窗，先进行展示图片，如果点击确定，再次将图片发送给客服(如下图所示)，于是没有做过此项功能的我一下就来了兴致，决定自己也写一个demo来实现一个粘贴图片功能，那么，废话不多说，正片开始 html代码如下，这里用了Element Puls中的文本域标签，且有一个img标签，如果pasteImg有值就显示对于的图....

前段时间遇上了一个这样的需求：在一个表格内展示商品信息，且数量可以自己增加或删除，根据数量和单价计算出所有的总价格，刚接到这个需求的时候以为这个需求特别简单，用数组的reduce方法应该就可以，或者直接拿到每一个商品的总价，然后将它累加起来就好了，当我开始写的时候，我发现此需求远远没有那么简单，话不多说，直接上代码 页面大概就是这个样子的，需要根据数量来控制小计以及合计的价格实时变化， 刚开始写我是用了reduce以及将小计的价格全部累加起来的方法，发现这种方法都是只会加，并不会减，如果点击数量的减，它还是加了小计的值，然后经过漫长的试错，终于解决了这个需求。 // 声明相关的数组，存放数据 const subTotal = ref<string[]>([]) const ingredientsListTwo = ref<MatchingRows[]>([]) const select = ref('') // 下拉框 onMounted(() => { demandStore.setTotal('') // 因为项目中pinia做了持久化存储，需要....