神膘护体小月半的博客

原创 css - 文字首尾衔接跑马灯效果

【代码】css - 文字首尾衔接跑马灯效果。

原创 css 的 clip-path 属性，绘制气泡

【代码】css 的 clip-path 属性，绘制气泡。

原创 bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合，不生效问题

/ 如果是保存成功，退出当前页时，就不要再进行编辑与否的判断了。// 一些不需要判断编辑状态的场合。// 在当前页没做操作，直接走了。// 当前页面编辑过，先拦截住。"退出当前页将丢失未保存内容"// 锁 - 优先级最高的。// 当前页面是否编辑过？

原创 js 实现 scss 的 mix 效果

原创 使用 el-calendar 生成万年历可多选

原创 bug 记录 - 使用 el-dialog 的 before-close 的坑

手动点击关闭按钮，或者点击 model 空白区域时，弹窗被关闭。未执行 form 表单的 resetFields 方法，所以再次打开时，弹窗保留了上次操作的痕迹（form 表单未重置）因此需要监听 dialog 的关闭事件，官方提供了一个方法，before-close。"执行了 beforeCloseDialog"

原创 el-table 结合 slot 具名插槽遍历封装列表模板

父组件添加特殊样式如果想为某些列添加特殊样式，可以在 columns 中添加特殊参数比如为金额列添加颜色，大于 0 的显示绿色，否则显示红色比如添加操作列并回传点击事件父组件点击表格第一行的按钮1时，可以看到，父组件可以接收到传递的参数利用具名插槽如果 reset 标记不够满足父组件中的定制化样式，还可以利用具名插槽比如为姓名列添加文本内容比如截取日期格式可以将 columns 数组中的 prop 属性作为具名插槽的 name 来使用模板组件

原创 正则方法记录

正则方法记录_随缘更新

原创 el-table 动态计算合并行

动态计算 rowspan

原创 落地页头图被版心遮挡效果实现

【代码】落地页头图被版心遮挡效果实现。

原创 对象数组按照非升序或降序的既定顺序排序

【代码】对象数组按照非升序或降序的既定顺序排序。

原创 使用 flex 简单实现 table 自适应页面

当页面整体宽度较小，顶部搜索模块高度自动撑开时，table 宽度动态变小，只展示 4 行数据。当页面整体宽度较大，顶部搜索模块没那么高，table 高度自动变大，展示 7 行数据。保证页面其他模块宽度高度自适应，动态改变中部 table 的高度。

原创 利用数组的 reduce 方法，整合对象数组，合并属性

效果存在两个对象数组针对属性 date 对两个对象数组进行合并效果如下代码利用 mockjs 模拟数据请求，通过 getList1 和 getList2 分别请求回来两个数组的数据利用 Promise.all 方法等待两个接口请求完成后，进行数据处理利用 concat 方法对两个数组数据进行拼接利用 sort 方法对合并后的数组进行排序，排序顺序为日期升序利用 reduce 方法生成新数组，针对 date 进行合并，并且根据不同的组别 group 分到不同的数组中处理后的数组格式

原创 img 标签的 object-fit 属性

【代码】img 标签的 object-fit 属性。

原创 复杂类型 el-form 表单的校验

活动类型，form-iem 内部嵌套 form-item，用新的 prop 属性去校验。

原创 bug 记录 - animation 在 IOS机型掉帧情况

【代码】bug 记录 - animation 在 IOS机型掉帧情况。

原创 table 常见属性及跨行跨列

table 常用属性width - 宽度传值为百分比或具体尺寸表格横向内容默认为弹性布局如图设置宽度为 400 (默认绘制成 400px)如图设置为 80%height - 高度传值为百分比 (从父元素继承) 或具体尺寸除去 thead 部分，剩余高度默认弹性布局如图为 thead 部分添加背景色，可看出整体 table 高度为 height 设置的值，剩余部分由 tbody 部分占用border - 边框表格及单元格的边框如图设置边框为 1cellspa

原创 利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果

【代码】利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果。

原创 keep-alive 的简单使用

vue-router 的嵌套与模块化router 实例中增加 children 属性，形成层级效果。App.vue 中的 router-view 承载的是 router 实例最外层的路由对象，如 /login、/404 等PageHome.vue 中的 router-view 承载的是 children 中的路由对象，如 /home、/userList、/dataList 等为了使阅读方便，使用方便，可以将 router 实例进行模块化分解，将不同功能模块的路由抽离到不同文件中。如上所示，

原创 el-autocomplete 必填校验问题

【代码】el-autocomplete 必填校验问题。

原创 PC端实现滚动分页懒加载

PC端实现滚动分页懒加载

原创 JS + 浮动 + 递归实现图片瀑布流懒加载

JS+浮动+递归实现图片瀑布流懒加载

原创 简易实现无缝切换自动轮播

JS+CSS 实现无缝切换自动轮播图

原创 el-upload 多文件依次上传（防抖 + 递归）

el-upload 多文件依次上传（防抖 + 递归）

原创 bug 记录 - 接口被重复调用，响应时长不同，结果被覆盖的问题

【代码】bug 记录 - 接口被重复调用，响应时长不同，结果被覆盖的问题。

原创 bug 记录 - 失焦事件被按钮点击事件触发

阻止失焦事件被触发

原创 前端下载接口返回的文件流

【代码】前端下载接口返回的文件流。

原创 dependencies 与 devDependencies

【代码】dependencies 与 devDependencies。

原创 scrollIntoView 的使用

描述将调用此方法的元素滚动到浏览器窗口的可见区域。scrollIntoView 官方文档用法element.scrollIntoView()用法同 element.scrollIntoView(true)element.scrollIntoView(alignToTop)true 表示 element 元素顶部与可见区域的顶部对齐，默认值false 表示 element 元素底部与可见区域的底部对齐element.scrollIntoView(scrollIntoVi

原创 js 事件流程

js 事件流程

原创 宏任务与微任务

宏任务与微任务

原创 使用 canvas 模拟微信生成二维码名片

使用 canvas 模拟微信生成二维码名片

原创 vue 自定义指令控制按钮权限

vue 自定义指令控制按钮权限

原创 数组一次性删除多条数据

数组一次性删除多条数据

原创 el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回

el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回

原创 flex 布局相关属性的使用

flex 布局相关属性的使用

原创 数组常用方法总结 (7) ：copyWithin / fill / reduce / reduceRight

数组常用方法总结 (7) ：copyWithin / fill / reduce / reduceRight

原创 数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray

数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray

原创 数组常用方法总结 (5) ：find / findIndex / filter

数组常用方法总结 (5) ：find / findIndex / filter

原创 数组常用方法总结 (4) ：slice / splice

数组常用方法总结 (4) ：slice / splice