cabinx的博客

关于hevc编码格式的视频在各端浏览器兼容性问题的解决方案1.背景描述最近开发中遇到了一个视频的兼容问题，同样的都是MP4格式的视频，但是他们编码方式不一样就会导致可能不能正常播放，其根源在于编码方式不一样，那么在播放的时候就需要对应的解码方式，就像一把锁，总是需要一把钥匙来解开它。前面所说的编码格式就是HEVC格式，而且就算是在windows10自带的视频播放器上面也是不能正常播放的，除非装上专门的插件（但是目前这款插件是收费的）。关于HEVC的简介： HEVC是High Efficiency V

vue项目中解决eslint与prettier同时使用时校验冲突问题1.需求背景最近在项目已有的代码校验校验工具eslint基础上加入了prettier，其原因也是为了约束开发团队代码风格统一，初衷是好的，但是在实际使用过程中就出现了两个代码校验工具校验冲突问题。解决方案其实冲突的根源在于两者对于校验代码格式都有参与，但是两者的校验规则又不一定相同，这就是冲突的根源。解决的思想就是让eslint专注于代码质量问题的校验，其他的代码风格问题就让prettier来处理就能够解决冲突，具体处

antdv内a-table单元格合并方案总结1.需求背景最近在vue+antdv项目中需要对表格进行单元格合并处理展示：解决方案在a-table中设置属性:columns="columns"，列表数据tableData需要是一个相同的数据排列在一起的数组，rowSpan（合并行数）colSpan（合并列数）// 1.在columns中对要设置单元格合并的列设置customRender（单元格合并的参数在attrs属性内）：columns: [ {

关于js防抖与节流的简介与方案总结需求描述:在项目中进行窗口的resize、scroll，输入框内容校验等操作中，如果事件处理函数调用的频率无限制，不仅加重浏览器的负担，也会导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来限制高频率的动作，提升用户体验。解决方案-防抖:防抖：利用定时器，当高频次触发事件时，规定时间段内没有再触发事件，事件处理函数才会执行一次。如果持续触发，那么就清除掉持续触发的定时器，定时器的回调就不会执行，解决方法：c

一篇很详细的思维导图(组织机构树)工具(vue-org-tree)的使用总结1.业务需求：最近应公司业务需求，需要在vue项目中使用思维导图（组织机构树）功能，用来展示系统产品的质量追溯。然后呢，我就开始收集资料了，后来呢就发现了两款比较好且社区比较活跃的思维导图插件vue2-org-tree、v-org-tree，其实这两款插件无论在使用上还是视图上都大同小异，主要是在一些API上有不同。2.需求分析：我在这里呢我用的是vue2-org-tree。（注意：这两款插件在兼容性方面兼容主流浏览器

el-tree树形实现鼠标拖拽，以及通过点击上下移按钮实现tree节点上下移动1.业务需求：vue项目开发需求是：使用el-tree组件实现树形鼠标拖拽功能，并且在每一个树形节点的后面增加上移和下移的按钮，通过点击按钮实现节点上下移动。2.解决方案：el-tree组件使用HTML如下（我使用的这种是可以自定义树形节点内容的写法）：<el-tree ref="menutree" :data="treeD

vue性能优化方案总结1.问题描述：目前Vue虽然被广泛应用，但是其存在项目首屏优化，Webpack编译配置优化等问题，所以我们仍然需要去关注Vue项目性能方面的优化，使项目具有更高效的性能，更好的用户体验。2.解决方案：1.v-for与v-if避免同时使用：v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度且浪费性能，尤其是当之需要渲染很小一部分的时候，正确做法是使用 computed 属性（通过computed对要遍历的数组先进行筛选，再进行遍历渲染）。

vue项目解决打包后index.html里面的引入文件没有引号问题总结1.业务需求：vue项目打包后，index.html里面的引入文件没有引号，导致打包后的项目不能正常运行。2.解决方案：在项目找到vue.config.js文件，然后添加如下代码： chainWebpack: config => { config.plugin('html').tap(args => { args[0].minify=false return ar

el-table单元格合并方案总结需求描述:最近项目中需要实现el-table合并特定单元格的功能。解决方案:首先，给el-table加上span-methods属性:span-method="spanMethod"然后，为spanMethod写方法（注意：1.tableData需要是一个相同的排列在一起的数组，2.rowIndex（行的角标），rowspan（合并行数），columnIndex（列的角标）colspan（合并列数））// 表格数据处理handleData()

antdv表格a-table合计功能实现总结1.需求背景最近开发财务项目中使用到了UI框架antdv，而使用最多的就是a-table了，它继承了antD表格的许多优点，在表格内容自定义功能上是有绝对的优势的。在财务项目中更多的会与数字打交道，从而就不可避免的需要使用到表格列合计功能。如果是没有分页的表格列合计功能是简单的，但是带有分页功能的表格列合计功能可不是那么简单的，好了，话不多说，进入主题吧。解决方案1.首先我的方法是通过新加一合计行的原理来进行的，所以首先在请求数据的回调中对要合计