随笔分类 - front-end
前端相关知识
摘要：yarn 安装依赖时出现以下内容： The engine "node" is incompatible with this module. Excepted version "20 || >=22". Got "18.18.0" 一、问题 二、解决办法 设置 yarn 忽略engine 校验，如下：
阅读全文
摘要：安装nvm，可以对本地环境中的node版本进行随意切换 一、安装 nvm 下载并安装 nvm ，安装手册“【nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 (uihtm.com)】 二、nvm使用 # 安装node nvm install xxx.xxx # 应用 nvm
阅读全文
摘要：问题：elementUI el-table 设置了高度height 和合计行 show-summary 之后，合计行无法正常显示 一、问题分析 根据调试，发现该问题应该属于组件bug，表格主体中给 footer留的高度不够导致，重新设置即可。 二、解决方法 添加生命周期钩子 updated ，对 t
阅读全文
摘要：elementUI实现月、季度、年 时间选择框 一、通过 el-date-picker 组件来实现月、年的选择 代码如下： <el-date-picker v-if="dateType 'month' || dateType 'year'" v-model="time" :type="dateTyp
阅读全文
摘要：js通过文件路径下载文件，而页面不发生跳转 一、js下载文件而页面不进行跳转 1）方法一： 通过a标签触发文件流形式，代码如下： let url = 'http://xxxxx.zip' fetch(url) .then(res => res.blob()) .then(blob => { cons
阅读全文
摘要：elementUI的select下拉框增加checkbox选择框 一、实现效果 二、实现方法 1、组件代码如下： <div> <el-select ref="select" v-model="value" multiple placeholder="请选择" > <el-option v-for="
阅读全文
摘要：日期时间控件实现固定步长，例如5分钟间隔、10分钟间隔 一、效果图 二、实现方法 通过日期时间控件的箭头来控制步长的显示与否，具体代码详见
阅读全文
摘要：echarts的x轴显示不全的解决办法 一、背景 当x轴类目较多时，label显示时会自动间隔显示，也就是会隐藏掉中间的label，如下图： 二、解决办法 通过设置 xAxis.axisLabel.interval = 0 来解决，如下： xAxis: { type: 'category', axi
阅读全文
摘要：vue 消息订阅与发布 一、场景 vue中非父子组件之间通信时，使用vuex有时间会很麻烦，这时候可以通过bus总线来实现 消息的订阅与发布 二、实现方法 1、main.js //main.js Vue.prototype.bus = new Vue(); new Vue({ render: h =
阅读全文
摘要：echarts实现pie自定义标签 一、环境 vue + echarts 实现饼图的自定义标签 二、实现效果 三、实现方式 import * as echarts from 'echarts'; export default { data () { return { option: { toolti
阅读全文
摘要：elementUI 时间线居左显示 一、vue + elementUI 实现时间线 Timellne 中时间戳居左显示 二、效果图 三、实现方法 关键代码： <el-timeline> <el-timeline-item v-for="(item, index) in activities" :ke
阅读全文
摘要：css+div实现各种常见边框 一、效果图如下 二、实现代码 div { width: 120px; height: 100px; margin: 10px; float: left; text-align: center; line-height: 100px; font-size: 18px;
阅读全文
摘要：要求：css + div 实现中括号边框 一、实现方式 .square_brackets { border: none; position: relative; padding: 0; height: 130px; width: 400px; } .square_brackets:before, .
阅读全文
摘要：div中多行内容垂直居中显示 一、css 样式 .wrap { height: 200px; width: 200px; border: 1px solid #232323; display: flex; justify-content: center; flex-direction: column
阅读全文
摘要：vue 实现组件全屏展示及退出 一、组件 采用 vue-fullscreen 组件 二、实现方式 <fullscreen ref="fullscreen" @change="fullscreenChange" background="#ffffff"> <div style="position: r
阅读全文
摘要：0、测试钩子函数 describe的钩子函数 在测试块describe中，存在这四个钩子函数，他会在describe执行的不同时期调用： before()：在该区块的所有测试用例之前执行 after()：在该区块的所有测试用例之后执行 beforeEach()：在每个单元测试(即it)执行前执行 a
阅读全文
摘要：vue 中 elementUI el-table 实现滚动加载 一、需求 vue 中 elementUI el-table 实现滚动加载，场景：当表格需要显示大量数据时，又想通过一页来进行展示数据。 二、实现方法 a、监听表格对应的滚动条 当表格滚动条到达底部时，通过监听触发加载下一页的方法。 b、
阅读全文
摘要：实现excel 导出 一、需求 实现 excel 的导出 二、技术 选用 easypoi 官网： https://gitee.com/lemur/easypoi#http://doc.wupaas.com/docs/easypoi/easypoi-1c0u4mo8p4ro8 三、实现 1、前端 <e
阅读全文
摘要：wrappedComponentRef={(form) => this.table = form}
阅读全文
摘要：主要用 Array.from 方法 1、array --> set （数组转set） let array = [1, 2, 3, 4]; let set = new Set(array); 2、set --> array let demo = new Set([1,2,3,4]); Array.fr
阅读全文
