- 博客(28)
- 收藏
- 关注
RSS订阅原创 Material Design 风格的 UI 框架 Vuetify 使用初体验
3、提供的 message 是组件级的，没有类似于 element-plus 中 message.success() 方式的调用，在 ts 文件中很不方便；2、表格功能过于简单，没有列拖拽，只有左侧固定列没有右侧固定列，后来选了代替方案 vex-table；4、输入框没有 @blur 事件，而且不能监听 @keyup.enter 事件，很不方便；5、没有日期时间选择组件，有单独的日期选择、时间选择组件，但是时间选择组件也太难看了吧；
2024-05-30 01:07:04
403
1
原创 husky \ lint-staged \ commitlint 实现代码提交前检查
执行完项目根目录也会出现一个.然后试试提交代码，应该可以了！
2023-12-06 22:28:15
693
原创 前端使用 xlsx.js 工具读取 excel 遇到时间日期少 43 秒的解决办法
此时拿到的是标准的时间格式 ：‘Wed Nov 29 2023 23:59:17 GMT+0800(中国标准时间)’ ，这个时间格式是带时区的，有没有发现，只要输入年月日，读到的数据总是差 43 秒，解决思路也很粗暴，判断是这个时间，直接加 44 秒。element-plus el-upload 读取 xlsx 格式的 excel 文件的步骤。
2023-11-30 17:01:53
2272
1
原创 巧用 tabindex 属性解决 iframe 环境下鼠标点击元素之外的监听事件
所以我们就在右键菜单视图上设置一个 tabindex 属性，在打开菜单的时候，调用元素的 focus 方法，使元素处于焦点状态，当点击其他区域的时候，会触发元素的失焦事件，此时调用关闭菜单的方法。之前的处理方案是，打开右键菜单时在 body 上注册一个监听事件，addEventListener('click', closeMenu)。场景如下：用 js 模拟了一个右键菜单，在鼠标点击到右键菜单之外的区域时，关闭菜单。当点击到 iframe 区域时，不会触发绑定在 body 上的点击事件。
2023-11-21 15:07:46
319
原创 拖拽场景遇到 iframe 无法拖拽的问题解决方案
描述一个场景：在网页中，分为上下两部分布局，下半部分显示操作日志，下半部分的区域高度是可拖拽调整的，但是如果下半部分嵌入一个 iframe 的时候，往上拖拽可以，但是往下拖拽，一旦到了 iframe 的上面，拖拽就失效了，怎么解决呢？解决思路就是在拖拽开始的时候，给 iframe 设置一个属性：pointerEvents = 'none' ，禁用 iframe 上的鼠标行为，拖拽结束后再恢复。然后在拖拽开始和结束的时候执行方法。
2023-11-21 14:35:37
1196
原创 阿里云轻量应用服务器重置为Linux系统，从0搭建node+mysql+nginx部署环境
1、首先重置系统为官方的Linux系统，方便起见选择应用镜像-LAMP镜像。为什么直接选择node.js镜像呢？原因是我习惯使用mysql数据库，安装node镜像的话之后还需要手动安装mysql也会比较麻烦，另外我偶尔也会使用到apache的服务，所以选择lamp对我来说比较合适。2、根据官方提示首先完成最基础的设置。这一步要复制mysql初始随机密码完成mysql的初始化操作，我...
2023-02-01 23:38:55
650
原创 Socket.io + Tail-file 的日志推送服务
话不多说旋一个（仅供参考，没考虑性能、冗余问题）服务端代码：安装依赖：`npm i socket.io tail-file express -S`const app = require('express')();const fs = require("fs");const path = require("path");const server = require('http').createServer(app);const Tail = require('tail-fil..
2022-03-14 10:32:55
218
原创 vue项目代码检查工具 ESLint vs Prettier
说到vue的代码检查工具，离不开eslint的加持，经历过几个项目之后，发现eslint的配置也是千奇百怪的。其实 eslint 的配置方式跟多个因素有关：vue/vue-cli 的版本、Airbnb/Standard/Prettier 的选择、js/ts 的选择、编辑器本地配置 等都有关系，下面就几种环境给出配置参考，具体的问题还需要结合项目特点进行修正。1. vue2.6 + js + eslint standard这种组合是我接触最多的，优点是所有的代码约束都通过 eslint 来约束，只
2021-05-10 23:36:54
2175
4
原创 src=“[object Module]“ 的原因及解决方案
使用webpack4构建的项目，出现 src="[object Module]" 的原因及解决方案。Vue官方文档中说了vue-loader的基本原理，他会将Vue模板中的 转为下面这段JS代码：createElement('img', { attrs: { src: require('../image.png') // require()是CommonJS模块语法 }})对于图像我们在Webpack中一般使用 url-loader 来处理{ test: /\.(
2021-04-16 00:21:16
3050
原创 antd G6 画图表，渲染时连接线报 e.edge is not a function 的解决方法
最近项目中新引入 antv 的 g6 来话一些流程图，遇到一个问题，render渲染传进来的数值总会报 e.edge is not a function 的错，但是我本地自己写个假数据却没有任何问题，排查了一下午，终于找到病症所在：原来用于标识节点唯一值的id（我们使用的是id字段），在设置连线时，不能是Number类型，只认字符串，所以我们我们节点的id 123 改为 ‘123’ 后就好了！{ id: '123', type: 'asd', name: '合'}edg
2020-11-05 19:26:23
3249
2
原创 前端VUE常用UI框架总结
在vue2的时代，PC端的ui框架可以说elementUI独步天下，至少我在面试及工作过程中遇到的都是使用elementUI的，但是该开源项目随着核心成员的离职，更新进度似乎越来越缓慢，似乎印证了那句“开源工作一旦功成身退，再也没有动力和精力去持续维护下去”的言论了。随着vue3的时代的到来，未来前端框架翻云覆雨，走势如何还不知道，但是各大UI框架已经开始卯足了劲开发适配vue3的版本，这其中当属的便是阿里系的蚂蚁金服提供的Ant Design了，据说已经完成了70%的工作。由此产生了横向总结一下各
2020-10-22 11:11:30
3068
原创 NTKO Weboffice打开文档格式错误的解决方案
使用ntko提供的weboffice工具打开一个模板文档，发现格式不正确了，主要是页边距的设置跟源模板不一样了，分析原因得出如下结论：首先区分一下我们项目中使用的【模板】的概念跟ntko提供的【template】头部套红模板两者的区别。我们项目中的模板是直接使用文件服务中保存的模板文件，复制一份作为当前编辑文件继续编辑，也就是格式完全与服务器中保存的模板文件保持一致，而ntko的template功能其实是在一个正在编辑的文档头部追加一部分文字结构，例如套红头部（常见于公文的标准头部）。ntko打
2020-10-20 19:01:55
1716
2
原创 记录一次vue架构优化经历
目录结构：public index.html ------------ 主页面 config.js -------------- 自定义的全局配置页面 src components --------- 存放所有的组件 mixins -----------------存放全局混入 filters ------------------存放全局过滤器 styles ------------------ 存放公共样式 _var.scss ------- 预定义一些变量 m..
2020-09-08 16:11:28
224
原创 使用函数防抖监听vue鼠标滚轮事件
需求：全屏滚动页面中鼠标滚轮滚动，指定时间内触发滚动时间不重复执行1、先定义防抖函数// 函数防抖const debounce = (func, wait = 100, immediate = true) => { let timer return (...args) => { let context = this if (timer) clearT...
2020-03-23 14:28:49
2794
原创 element-ui 动态表格组件列数发生变化时表格错位问题
如下图所示，列数是月份的天数，所以选择不同的月份的时候列数是动态绑定的，但是在渲染的时候发现，28天的列变为31天的列时最左侧总会出现错位问题：在列数变动的地方加一段代码使视图重新渲染即可pickMonth (val) { this.getDays(val) // 这里使天数发生变化 // 解决选择月份后表格错位问题 this.$nextTick(...
2020-03-12 00:07:29
1747
1
原创 js小技巧：巧秒获取某个月份的天数
今天写一个表格列数是由每个月的天数决定的，所以需要一个方法来根据月份获取当月的天数按照传统的方式，需要获取当前年份、月份，然后先判断年份是否是闰年，再用 switch case 来判断月份的天数，甚是麻烦，问朋友有没有简单的方法，还真收获了一个巧妙的思路：// 根据时间戳返回当前月份有多少天getDays (date) { // 传入一个时间戳d...
2020-03-11 20:56:22
333
转载 【转载】element-ui table表格根据内容列宽自适应
搬运自简书：https://www.jianshu.com/p/a5435ec44a80由于项目的需求规定表格中的内容超出部分不能悬浮显示，要自适应宽，先element 表格的是不支持自适应的，经过搜索引用了基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件github 链接：af-table-column安装npm insta...
2020-03-11 17:08:05
4992
原创 Echarts 巧妙解决视觉映射代替图例展示，并且根据数据大小有序排列深浅颜色的问题
改造之前的效果图是这样的（图例展示）：改造之后（视觉映射代替图例）：——————————————————分割线————————————————————完整这些操作的关键点有如下几点：1、首先根据echarts文档画出地图，这里要注意的是右边图例的数据要与左边地图坐标产生对应关系，如果右边图例的顺序是固定的也就简单了，直接获取根据data数据的索引值来匹配坐标，但如果拿...
2020-03-08 23:55:38
1649
1
原创 arr.reduce()妙用：解决根据一个字符串读取多层嵌套对象属性的问题
写node过程中遇到这么一个问题，要根据一个字符串str="userInfo.uname.firstName"来判断一个前端传参是否缺少必传参数，前端通过body传参如下：{ userInfo: { uname: { firstName: 'Wu', lastName: 'Dan' }, ...
2020-03-08 23:05:53
1102
转载 【转载】element-ui resetFields 无效的问题
转载自——林间有风1.问题重现因 “添加” 和 “编辑” 字段是一样的，所以我把他们做在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了通常情况下，我们在制作后台管理页面的时候经常会遇到以下操作 “新增、编辑” 等等操作，那么在编辑的时候我们通常会取到当前行的数据而进行赋值操作触发bug的条件是先打开，编辑进行赋值，后打开新增...
2020-03-07 22:25:54
2270
1
原创 $set——vue中数据更新，视图不更新的情况探讨
很早之前就知道this.$set可以解决vue中数据更新视图不更新的问题，但是对于什么情况下才会造成视图不更新一直很模糊，今天就来确认一下什么情况会造成视图不更新。vue官网中对此的解释是：需要注意的问题是，以下变动的数组中，vue是不能检测到的，也不会触发视图更新：通过索引直接设置项，比如： app.books[2] = {...} 修改数组长度，比如：app.books.leng...
2020-03-07 20:28:06
785
原创 vue中父子组件通过props传递数据，父组件数据ajax异步更新，子组件不动态更新的解决方案
近期在开发中遇到一个问题，把项目中评分星星剥离出来抽象为一个子组件，页面中也用后发现：如果是通过v-for渲染的列表，数据可以正常通过props传递到子组件并渲染加载，但是如果是异步加载获取到的数据能正常传到子组件中，但是不会重新渲染加载。异步加载获得的数据传递给子组件通过v-for渲染的数据传递给子组件查了一些网友的帖子后发现，只要在子组件中加侦听器watch监听props中值的变化，并在值...
2019-04-29 14:48:07
16991
原创 ES6新特性之Set实现数组去重
开发遇到一个历史搜索记录去重复的问题，如果采用传统的for循环来实现，那又费精力，又费性能，想找找有没有更好的方法来实现，果然找到一个——set去重复。按照我浅显的理解,Set应该是平行于字符串、数组、对象的一个新数据类型：set。格式跟数组类似，特点是整个列表中没有重复项，自动去重。方法很简单：let new_set=new Set(arr);就这一步就完成了去重复，需要注...
2019-04-26 18:10:58
464
原创 通过css引入外部字体来使用第三方字体
第一步：声明字体名称@font-face{ font-family: 'weiyang'; src : url('../static/weiyangjianti.ttf');}第二步：引用字体div{ font-family: 'weiyang'; font-size: 16px;}...
2019-04-07 20:45:34
1450
原创 css单行文本溢出隐藏和多行文本溢出隐藏
文本溢出隐藏首先要给文本一个确定的宽度！单行：width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行：width: 150px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-we...
2019-02-25 13:46:48
3164
1
原创 Mac首次上传代码至码云操作步骤
一、在码云新建一个仓库，得到一个仓库地址；二、mac需要下载安装xcode就可以使用git；三、Git 全局设置：git config user.name //查看用户名git config user.email //查看邮箱git config --global user.name "username" //设置用户名git config --...
2019-02-25 13:18:14
1654
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人