- 博客(220)
- 收藏
- 关注
RSS订阅原创 前端 js 根据秒数，显示还剩的天数、小时、分钟数
该代码定义了一个格式化超时时间的函数，将秒数转换为更易读的天、小时和分钟格式。当输入秒数小于60秒时返回"--"不做统计。对于有效输入，先计算完整天数，再计算剩余小时和分钟数，最后拼接成"X天X小时X分钟"的字符串返回。函数处理了边界情况，确保输出结果清晰易读。
2025-12-10 13:09:54
105
原创 ag-grid-angular 导出excel功能，设置数字为字符串类型，防止被科学计数法调整或者0开头的数字无法展示的问题
摘要：本文介绍在ag-grid中导出Excel时防止数字被转为科学计数法的方法。通过定义excelStyles中的文本格式样式（dataType:'string'），并在columnDefs中设置对应的cellClass，可以强制将列数据以文本格式导出。同时使用processCellCallback确保所有值转换为字符串，有效保留长数字和0开头的数据格式。该方法在ag-grid-angular 22.1.1等老版本中也适用。
2025-12-03 12:29:23
324
原创 ag-grid-angular 滚动条初始化问题
sizeColumnsToFit 很重要，不然在初始化页面的时候，很可能宽度不会自适应匹配，甚至出现宽度不超过页面总宽度，并且没有数据的情况下，还是出现了横向滚动条。，都很必要，这有点类似于重新布局table，让他显示的更加正常和优化。上面几个生命周期内使用sizeColumnsToFit。
2025-07-07 18:14:36
179
原创 page-break-inside 打印分页属性
是一个 CSS 属性，用于控制打印文档中元素的分页行为。它主要影响页面内容在打印时的分页表现，尤其是在长文档或复杂布局中，帮助确保元素不会在页面中间被切断。
2025-02-12 13:04:35
825
原创 js 中文拼音排序
是JavaScript中的一个字符串方法，用于比较两个字符串并根据本地化的排序规则返回一个数字来表示它们的相对顺序。在处理中文排序时，方法非常有用，因为它能够按照中文的拼音顺序进行排序，而不是简单地按照字符的Unicode编码顺序。以下是。
2025-02-10 17:34:54
386
原创 为什么 给angular 中的自定义组件 设置样式flex:1 其高度就会超出
这意味着子元素会保持其自身的高度，而不是适应父元素的高度。这导致子元素的高度可能会超过父元素，从而产生高度超出的问题1。，子元素会尝试填充父元素的剩余空间。如果子元素的高度不固定，它可能会超出父元素的高度，导致滚动条无法正确显示。来解决问题，这样可以确保子元素不会因为默认的min-height行为而撑大父元素12。 当父元素使用flex布局且设置了。也可以帮助保持子项的原始高度3。 Flex布局默认。
2024-10-12 11:09:01
585
原创 js reduce 的别样用法
注意这里 initialValue 是个空数组，而每次循环后 返回值还是个数组，循环结束之后就相当于对原数组list 做个过滤和相关操作（相加），呢么最后一次循环返回的数组结果就是我们需要的对象数组。尽量少的代码实现了我们想要的效果。之后再用 mergeItem 接受一下最新值，即可实现了我们的逻辑。上面例子中的初始值是个空数组，之后不断地往里面塞入新的元素或者对元素的属性进行相加等，操作，最终相当于过滤并且对数组元素相加的效果，非常实用，代码精简化。reduce 用法 参考。
2024-07-18 17:48:22
307
原创 vue 自定义指令防抖和节流
要实现防抖（debounce）效果的 Vue 自定义指令，你可以使用闭包来包裹一个定时器，确保在指定的等待时间内多次触发事件时，只有最后一次触发后经过指定时间才会执行回调函数。注意，在实际应用中，你可能需要根据具体的场景和需求来调整防抖逻辑，比如考虑在防抖期间是否允许执行回调，或者是否需要在防抖期间阻止事件的进一步传播等。如果你想要的是防抖（debounce）效果（即，在一段时间内多次触发事件后，只在最后一次触发后的一段时间内执行一次方法），则需要使用不同的逻辑。在这个例子中，我们定义了一个。
2024-05-20 15:10:23
815
1
原创 CSS height auto 过渡
ps:可能有伙伴会问，呢上面的例子和height:auto有什么关系，需要注意。height的默认值就是auto;
2023-12-11 18:07:22
858
原创 vue2 按钮权限控制组件 Authority
通过这种方式，你可以灵活地根据具体情况来进行组合和使用，来实现更丰富的权限控制逻辑。，表示只有管理员可以看到插槽中的内容，因此按钮会被显示。属性根据传入的角色和权限数据决定是否显示插槽内容。注意：核心思想是使用插槽的方式，控制显示隐藏。这里使用了插槽来显示具有权限的内容。这里展示了三个使用场景，其中第一个。权限时，才能看到插槽中的内容。，表示是普通用户，但是在拥有。第一步，创建一个名为。
2023-10-08 12:21:29
592
原创 webscoket 封装
<el-table-column header-align="center" align="center" label="序号" width="60" > <template slot-scope="scope"> <span>{{ scope.$index + 1 }}</span> </template>
2023-08-21 17:21:25
454
原创 解决el-cascader 点击单选按钮，但是不触发懒加载，调用展示下层接口
【代码】解决el-cascader 点击单选按钮，但是不触发懒加载，调用展示下层接口。
2023-08-18 16:33:42
1543
3
原创 el-table 树形结构数据 设置某一层，新增按钮不展示
属性以及其他相关部分根据您的实际需求进行调整，确保适配您的数据结构和表格列定义。同时，需要在样式部分的。的返回值来确定当前行的层级，并根据层级判断是否显示新增按钮。方法，通过递归查找当前行的父节点并计算层级。在修正后的代码中，我们添加了一个。类的样式，以隐藏新增按钮。
2023-07-31 18:16:00
1317
原创 uniapp 的uni.getImageInfo接口API 获取失败
原因：如果你的图片很小，一般小于10kb,小程序会自动把你的图片转换成base64位，呢么就会导致你使用uni.getImageInfo接口报错，所以上面列出了，取消此功能的方法，这样就可以正常使用了，但是缺点是请求个数变多。
2023-06-16 15:38:02
5388
转载 uni-app textarea auto-height 文字出现上下滚动
uni-app textarea auto-height 文字出现上下滚动-腾讯云开发者社区-腾讯云
2023-06-12 16:11:19
620
转载 Vue 插槽详解
这句话的意思就是，没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容。Vue插槽，是学习vue中必不可少的一节，当初刚接触vue的时候，对这些掌握的一知半解，特别是作用域插槽一直没明白。我们在内写的"你好"起作用了！在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。说白了就是我在组件上的属性，可以在组件元素内使用！
2023-05-09 17:50:01
175
转载 js 监听div的resize事件
我们平时在监听resize变化时，一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。
2023-01-29 13:08:06
1115
转载 Element-UI el-upload组件，上传失败，但是依然显示文件列表
最近在使用element-ui的 el-upload组件，发现一个问题，就是我在上传文件过程中，上传失败了，文件列表还展示，非常尴尬。
2023-01-18 16:45:06
3566
转载 前端实现HTML转PDF下载的两种方式
在项目工具方法存放文件夹utils中创建// 导出页面为PDF格式} else {}}}})}}}以上两种实现方式各有优劣，方式一是纯前端实现，需要引入第三方插件，可能会导致项目体积增加。方式二虽然更加简洁，但a标签的download属性为HTML5新增属性，可能存在兼容性问题。如果有需要，可以根据自己情况来选择。
2022-12-16 15:05:20
3343
1
转载 vue 带参数跳转打开窗口
如果参数在路径中：router.js path: '/project/:id'var { href } = this.$router.resolve({ path: '/project', query: { id: this.id }});window.open(href);获取参数：this.$route.query.id如果参数不在路径中：1.不打开新窗口： path: '/projectlist' , name: '项目列表...
2022-01-13 11:57:26
345
转载 Vue transition实现点赞动画效果
爱心效果材料：爱心图标两个，没有我这种 icon 组件的用 png 图片代替<transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon> <icon data="@icon/unl...
2022-01-07 14:26:10
2431
转载 tinymce-vue使用教程
转自：tinymce-vue使用教程 - 简书一、资源下载npm install tinymce -S //当前版本^5.1.1npm install @tinymce/tinymce-vue -S //当前版本^3.0.1二、安装语言包资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目
2022-01-04 16:04:19
12053
2
转载 element-ui Upload多文件一次上传，获取选择的文件的数量
<el-upload ref="fileUpload" v-loading="fileloading" class="upload-file" :action="uploadUrl" :multiple="true" :limit="9" :on-preview="handleFilePreview" :on..
2021-12-29 18:43:57
5144
1
转载 Vue - 生命周期函数(activated)
● <keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。● 如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时
2021-12-27 13:09:57
1684
原创 el-input 输入手机号
<el-form-item label="手机号：" prop="phone"> <el-input v-model="identityForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="identityForm.phone = $event.target.value" :placeho...
2021-12-20 19:30:36
2104
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人