马优晨

原创 封装echarts的柱状图+折线图+堆积图

echarts 折线图、柱状图、折线图+柱状图混合、堆积图、堆积图+折线图混合

原创 滚动菜单定位到对应的位置

该代码实现了一个带有导航菜单的页面布局，用户点击菜单项时页面会平滑滚动到对应的内容区域。导航菜单固定在页面左侧，包含多个项目，每个项目对应一个内容区域。当用户滚动页面时，当前可见的内容区域对应的菜单项会高亮显示。代码使用了Vue.js框架，通过v-for指令动态生成菜单和内容区域，并通过scrollTo方法实现平滑滚动。样式部分使用SCSS编写，确保导航菜单的视觉效果和交互体验。整体设计简洁，功能清晰，适用于需要分块展示内容的场景。

原创 RESTful API 设计指南

RESTful API 设计指南

原创 各类包管理工具

包管理工具

原创 多邮箱校验，邮箱用英文逗号分割

【代码】多邮箱校验，邮箱用英文逗号分割。

原创 判断是否是奇数

js判断是否是奇数

原创 webpack3 webpack4 webpack5 有什么区别

【代码】webpack3 webpack4 webpack5 有什么区别。

原创 vue动态调整表格的大小适配

【代码】vue动态调整表格的大小适配。

原创 vue 中监听页面尺寸变化就调用函数

事件来监听窗口大小变化，但这种方式在 Vue 项目中有一些局限性，因为如果在多个地方都这样使用，后赋值的会覆盖前面的，容易导致一些不可预期的问题。事件监听器的问题，并且更符合现代 JavaScript 开发习惯，在 Vue 项目中也是更常用的方式。虽然可以直接使用原生的。

原创 操作DOM删除某个ID下所有的class为某个值的所有类

举例：删除id为stencilRef下，所有class为x6-port的节点;

原创 js 获取当前时间与前一个月时间

如果要在饿了么日期组件使用，比如默认时间为当前时间到过去一个月时间。

原创 判断一个值收否在maxAmount 与min之间，并返回该条数据

数组的定义，这个值应该匹配第二个对象{ maxAmount: 99999999, min: 10000000 }输入一个值判断如果该值在maxAmount 与min之间，在返回该条数据。如果输入的值不匹配任何规则，控制台则会输出“没有找到匹配的规则”。如果找到了这样的对象，函数就会返回它；函数来查找匹配的规则。根据line_kedu_rules。在这个实现中，findMatchingRule。函数会遍历line_kedu_rules。在示例使用中，我们输入了一个值。且小于等于maxAmount。

原创 将 el-date-picker获取的时间数据转换成时间戳

在Vue.js中使用Element UI的组件时，你可以获取用户选择的日期并将其转换为时间戳。通常返回的是一个Date对象或一个格式化后的字符串（取决于你如何配置它）。下面是一个示例，展示了如何将获取的时间数据转换为时间戳。首先，确保你已经安装了Element UI并在Vue项目中进行了引入。

原创 从0到1封装一个image/pdf预览组件

image预览、PDF预览

原创 判断PDF与图片是否可以预览

在JavaScript中，可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载，那么load事件会被触发；如果图片无法访问，error事件会被触发。在这个例子中，checkImageAccessibility函数接收一个图片URL和一个回调函数。Image对象的src属性被设置为这个URL，然后监听load和error事件。当图片加载成功或失败时，相应的处理函数会被调用，并且回调函数会被执行，传递一个布尔值表示图片是否可以访问。

原创 图片和PDF展示预览、并支持下载

第三步：编写FilePreview实现图片和PDF预览组件。展示图片和PDF类型，并且点击图片或者PDF可以预览。第二步：编写downloadcard组件。第一步：遍历所有的图片和PDF列表。

原创 使用throttle防止按钮多次点击

如上图所示，点击按钮，防止按钮点击多次。

原创 Element UI上传图片和PDF，支持预览，并支持复制黏贴上传

这里主要需要再header中设置 'Content-Type': 'multipart/form-data' 还有依赖的Token等字段内容。如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；再次基础上，我们对上面代码进行改造，添加监听past事件。发现图片已经上传到组件中了。

原创 Element UI上传图片和PDF，支持预览

如上图，使用Element UI的el-upload组件，并且预览的时候可以展示图片和PDF格式文件；

原创 一个简单的布局

【代码】一个简单的布局。

原创 前端通知组件封装

如果所示，实现如上图效果，点击小铃铛，从右侧展示通知，点击其中一条调到另一个页面；

原创 前端工程化，前端监控，工作流，部署，性能

创建项目的时候，配置下ESlintstylelintprettiercommitlint等;ESLint 是一个静态代码检查工具，用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。在前端开发过程中，ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方，从而提高代码质量。.eslintrcStylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具，可以帮助开发者遵循一致的代码风格和最佳实践。

原创 如何利用AI提高内容生产效率?

在业务开发中会遇到各种个样的问题，怎么才能快速的提高开发效率是每一个人将要面对的；那在现今的AI时代，如何可以使用AI提高内容生成效率这个就是我们现在要讨论的话题；AI在内容生成方面已经展现出了巨大的潜力，可以帮助我们显著提高内容生产的效率。以下是一些具体的方法：AI文章生成器：基于用户输入的关键词或主题，AI文章生成器可以快速生成符合要求的文章。这些生成器通常基于大量的语料库进行训练，能够模仿人类写作风格，生成通顺、连贯的文章。

原创 前端双语实现方案（VUE版）

结构如下en.jszh-CN.jsindex.js。

原创 element UI 设置type=“textarea“ 禁止输入框缩放

时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。注意上图，第一张是可以缩放的，第二章不能缩放的。

原创 制作一个评价卡片

原创 多张固定宽度元素，随着屏幕尺寸变化自动换行

多张固定宽度元素，随着屏幕尺寸变化自动换行。

原创 饿了么实现一行四张卡片

如图实现上面的卡片展示。

原创 轮播卡片切换实现

如上图，实现一个轮播卡片能力，支持手动滑动，手动拖动，已经点击两端切换按钮。

原创 使用jscpd对比重复代码

检查项目中重复的代码，或者代码片段。

原创 使用VS Code Counter统计代码量

项目需要统计每个文件有多少行，有多少行注释，多少行空白；1、在应用中心搜索 VS Code Counter 安装。3、输入Counter。选择对应项目开始计算。

原创 MAC iterm 显示git分支名

要在Mac上的iTerm中显示Git分支名，您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架，它提供了许多有用的功能和插件，包括在终端中显示Git分支名。4、更新iTerm设置：打开iTerm的设置，并确保在“Text”选项卡下选择了“Use system font”选项。2、启用Oh My Zsh插件：在Oh My Zsh插件列表中找到“git”插件，并将其启用。现在，您应该能够在iTerm终端中看到当前活跃的Git分支名。如果您尚未安装这些工具，请先进行安装。

原创 mac下配置git自定义快捷命令

编辑文件 vim .zshrc 按i进入编辑模式，加入 source ~/.bash_profile 后，esc，再输入 :wq 保存退出。在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效。需要重新执行 : source ~/.bash_profile后，才会生效。1、自己是在bash中配置的环境变量，而当前系统使用的是shell。最后输入命令 source ~/.zshrc 刷新刚刚的配置。输出是/bin/zsh，说明使用的是zsh。终端输入：echo $SHELL。

原创 网格布局(大练习)

最近对网格布局研究了一下，写了一个简单的demo。

原创 github鉴权失败

如上图所示 git push 时发生了报错，鉴权失败；

原创 SVELTE调研

SVELTE使用，调用，数据对比，维护，社区等等。

原创 2022年工作架构分析

最常见的表单通过类XML语法定义。一些库支持通过一些特定结构的 JSON (Schema)来生成类XML标签。表单设计器通过可视化编排产出 Schema 数据。所以可以粗略的认为 表单设计器就是Schema设计器。Schema 本身是一个JSON ，Schema 通过一些特定字段描述和定义 JSON的数据结构。schema动态数据。

原创 CLI的使用

抽离自己业务定制的业务（比如：axios,http,图片处理）yoman的generator必须使用名称先初始化一下 tnpm init 然后安装 yeoman-generator 里面包含很多可以使用的方法链接到全局，变成全局模块升级yoman解法降低版本：结果。

原创 Node 使用 MySQL

使用进行安装。

原创 Node RESTful API说明

REST即；表述性状态转移是。满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。