DO_IT_JACK
选择大于努力!
实践出真知!
展开
-
虚拟加载 vue-virtual-scroller 解决大数据加载过多,卡顿问题
项目场景:手机端数据过200条,input框点击输入就卡死!原因加载的节点太多了!思路:页面显示的数据只有少部分,其他的都隐藏掉!解决方案:vue-virtual-scroller 解决加载过多,卡顿问题安装命令npm install --save vue-virtual-scrollermain.js引入 注意css文件引入,不然页面上需要import组件,样式才起作用import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'原创 2021-01-22 21:12:11 · 6157 阅读 · 0 评论 -
vue-json-excel 简单易学 纯前端导出表格
项目场景:前端table页面数据 导出成excel适用于普通表格,没有合并行,没有复杂计算,没有背景要求等等!极简的原样输出效果图案例1 table使用设计生成列名列值 导出数据://顶部按钮<download-excel style="width: 40px; height: 28px; display: inline" :data="json_data" :fields="json_fields" :name="excelName"> <el-l原创 2021-04-24 16:54:29 · 1024 阅读 · 0 评论 -
flex基础总结
flex-start 左对齐(默认)flex-end 右对齐center 居中space-between 两端对齐,两端项目居最右最左,中间项目等距分布space-around 均匀对齐,每个项目两侧都等距,所以项目之间的间距比项目与边框之间的大一倍stretch 如果项目未设置高度或设为auto,将占满整个容器的高度(默认)flex-start 左上flex-end 左下center 居中baseline 项目的第一行文字的基线对齐。原创 2024-06-29 21:22:56 · 650 阅读 · 0 评论 -
瀑布流vue-grid-layout vue2中使用 =》项目首页,动态编辑,嵌入子件模块
一、vue中简单案例具体可看官网 https://jbaysolutions.github.io/vue-grid-layout/zh/1、安装组件NPMnpm install vue-grid-layout --save安装后如果有报错找了一圈,是版本问题,降版本即可npm install vue-grid-layout@2.3.7 --save2、vue文件<template> <div style="width: 100%; height: 100%">原创 2023-08-07 18:28:55 · 322 阅读 · 0 评论 -
v-code-diff 代码对比,文本对比
【代码】v-code-diff 代码对比,文本对比。原创 2024-06-30 07:37:12 · 231 阅读 · 0 评论 -
前端代码统一格式化=》Prettier配置指南
本文主要介绍Prettier(一种代码格式化插件)的基本配置,读者可以拿来即用,也可以根据自己的风格自行调整。prettier共有23个配置,这里列举了其中常用的13个(项目基本够用),大家感兴趣可以查看prettier官网完整配置由于JSON文件不支持注释,为了方便大家复制即可使用,我单独又写了一份注释代码段。我一共列举了13个常用的配置,大家可以根据自己的风格继续改造,剩下的10个项目根本不常用,感兴趣的可以去官网深入了解。原创 2024-07-01 21:38:27 · 313 阅读 · 0 评论 -
前端优化:防抖(debounce) _ 节流(throttle)
防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove)、输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖。原创 2023-08-06 13:15:48 · 185 阅读 · 0 评论 -
flex元素间距gap
我们在使用flex布局时,有时候需要设置item之间的间距,我们来看一下几种设置间距的方法。原创 2024-06-29 21:32:23 · 530 阅读 · 0 评论 -
vue style scoped 样式修改,权重
某一个不共用的单独页面,或者是仅对某一个功能页面使用的单独页面, 可以使用scope,样式私有了,其他页面也不会去改它的样式,如果是共有页面的组件,并且是封装好的,其他页面,可能会改变它的样式,则不使用scope在vue中引入第三方组件库的时候,vue组件中样式的scoped就会阻碍我们修改第三方组件库的样式在所有需要重新定义样式的element组件上添加自定义class(防止自定义样式影响全局)原创 2024-06-30 07:47:02 · 184 阅读 · 0 评论 -
vue json字符串 界面输出
【代码】vue json字符串 界面输出。原创 2024-06-30 07:48:18 · 67 阅读 · 0 评论 -
界面布局 => VUE2 div分割(div-splitter-v2)
前端界面布局,常见的如左右布局,上下布局,组合布局,如同下面的方式。实现上面的功能,逻辑上也是清晰,就是每次写代码,都要重复造轮子!代码实现逻辑也不复杂,其实就是定宽度,不管是px还是百分比。这样后面做界面布局,就可以节约精力,专注于业务逻辑的代码了!于是我封装了这些功能,vue2,vue3都可以使用!浏览器界面变化,内容宽高自适应。具体源码,可以看gitee连接。左右拖动调整,上下拖动调整。上下布局与左右布局的嵌套展示。原创 2024-06-28 21:56:51 · 423 阅读 · 0 评论 -
vue中 echarts + element-resize-detector 样式自动刷新
【代码】vue中 echarts + element-resize-detector 样式自动刷新。原创 2023-08-07 20:07:23 · 204 阅读 · 0 评论 -
拖拽插件 vue-js-grid 宽高flex响应动画
在拖动结束后,可以触发事件(建议使用防抖),只要把items中的顺序,后台保存住 即可!可以直接拖拽 而且挺流畅的。原创 2023-08-16 18:16:23 · 188 阅读 · 0 评论 -
VUE2 二维码生成组件(qrcode-v2)
二维码值,支持汉字,英文,数字,基本够用!源码如上,可以二开!原创 2024-06-28 22:01:45 · 332 阅读 · 0 评论 -
ExcelJS 前端导出excel,echart图表
数据是一行一行的插入的!无论表头还是单身数据。合并行,列,使用 worksheet.mergeCells()设置样式 ,可以使一行一行的设置,也可以按照列去设置 worksheet.getRow(1).alignment = {vertical: ‘middle’, horizontal: ‘center’}设置行隐藏,worksheet.getRow(1).hidden = true;//隐藏第一行行 与 列 都是从1 开始的。原创 2024-06-30 07:32:28 · 181 阅读 · 0 评论 -
虚拟加载 vxe-list 解决加载过多,卡顿问题
再多数据 都可以渲染,就看你后台是否允许查询这么多了。vue2 使用V3版本。vue3 使用V4版本。原创 2023-08-16 18:07:16 · 259 阅读 · 0 评论 -
动态显示滚动条(鼠标进入才显示)
需要注意的是,如果容器想要带滚动条,那么它本身要设置滚动overflow: auto;滚动条通过transparent,看不到,hover的时候改变颜色,显示出来。鼠标进入区域后,才显示滚动条,界面更加美观一些。监听鼠标事件,设置overflowY的属性实现。滚动条宽度最好给,避免宽度总是变化,闪。基本pass 代码量多,不方便。设置同样颜色的滚动条和背景色。以假乱真,避免白边的不协调。原创 2024-06-29 13:05:33 · 798 阅读 · 0 评论