- 博客(51)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 知识查漏补缺
z-indexz-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。使用z-index的条件:目标盒子需是定位盒子(非static)取值z-index： auto盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。integer（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠
2021-04-01 17:21:55
655
原创 antv x6开发技能累计
findParent： // 判断是否可以嵌套。添加@mousedown.stop。我喜欢通过群组的方式去定义链接桩。
2024-07-12 15:11:53
153
原创 使用el-tree实现不同区域的拖拽功能时遇到的坑点
利用el-tree实现在两个区域的拖拽，1.树上的拖拽排序，2.将树上节点拖拽到画布上。在将节点拖拽到画布上的时候，只要在树上移动过，松开鼠标的时候，树上的拖拽排序功能也生效了，那么如何使这两个拖拽功能互斥呢？
2023-06-27 10:02:50
1866
原创 使用flex布局，el-table自适应失效的问题
el-table 组件的宽度是动态计算的，源码中resize事件绑定在 this.$el 上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。在右侧区域，即 flex：1；（给表格的父元素加）el-table外多包裹一层div，包裹的容器设置绝对定位及宽度，继承父级宽度。el-table只能自适应变大，不能自适应变小。flex属性的容器设置相对定位。
2023-06-08 11:04:05
1067
原创 浅谈Web缓存
浏览器每次请求时，首先判断是否有缓存，若无缓存则向服务器发送请求，并将响应结果存至缓存。若有缓存，第一选择都是走强缓存——直接访问浏览器缓存，若缓存数据有效（评判指标：有效时间，依据：Expires或Cache-Control）则直接从缓存返回数据；若缓存数据无效，则走协商缓存（解决服务器端有资源更新的问题）。协商缓存的要点就是判断资源有无更新（依据：Last-Modified/If-Modified-Since,ETag/If-None-Match）。
2023-01-05 10:28:38
388
原创 elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）
而dolayout事件会重新计算fixed的高度，这时候我们可以看到，在设置fixed高度时候，此时的this.scrollx是改变列宽前的值，而我们需要的是改变列宽后scrollX的值。：el-table在设置了fixed的条件下，滚动竖向滚动条到最底部的时候，会出现表格错位的问题。：fixed部分也是一个表格，在有滚动条的时候没有加上滚动条的高度，所以会导致错位。可以看出来 fixed表格的高度取得是表格的高度减去竖向滚动条的宽度，3.监听元素变化，表格元素变化之后，也需要调用此方法。
2022-09-07 15:23:46
5958
原创 webrtc网络传输协议
WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、展示等功能，并且还支持跨平台，包括linux、windows、mac、android等。简单地说，信令就是协调通讯的过程，一旦信令服务建立好了，两个客户端之间建立了连接，理论上它们就可以进行点对点通讯了。在WebRTC中，信令起着举足轻重的作用。但实现没有标准化，比如http、websocket、xmpp等。WebRTC实现了基于网页的语音对话或视频通话，目的是无插件实现web端的实时通信的能力。...
2022-08-31 15:16:02
578
原创 使用rollup按需打包一个组件库
demo地址 github：https://github.com/liushuhon/rollup-demo一 rollup简介rollup官网: https://www.rollupjs.com/rollup 是一个 JavaScript 模块打包器，在功能上要完成的事和webpack性质一样，就是将小块代码编译成大块复杂的代码，例如 library 或应用程序。在平时开发应用程序时，我们基本上选择用webpack，相比之下，rollup.js更多是用于library打包，我们熟悉的vue、reac
2022-05-07 16:55:44
2928
2
原创 代码编写规范
概述规范的代码，是项目质量的保障。本代码规范从typescript、 javascript、css、vue 等几个方面，对日常开发中的代码编写，给出了规范性的指导与建议，能有效避免代码级别的缺陷与错误；也可依据本规范，在代码审查中，对不符合规范的代码提出问题；是 Segma 前端团队的重要规范之一。优先级说明A：必要的非特殊情况下，必须遵守的规范，通常这些规范会帮你避免错误。B：强烈推荐的被大量使用的规则，大多数都能改善代码可读性与开发体验，但即使违反，也不会导致错误。C：谨慎使用的使用起来
2022-04-22 17:35:10
4148
原创 GIT规范
概述针对不同业务场景，需采用不同的代码分支策略，也意味着实施不同的代码集成与上线流程，会影响整个研发团队的每日协作方式。因此研发团队需结合业务场景选择适合自己的分支管理策略研发流程标准说明不会强制各研发团队使用某一种分支管理策略，本文罗列了常⻅分支管理策略，供各研发团队结合自己业务场景参考选择；也可找本文作者，共同探讨适合自己团队的代码分支管理方式管理规范原则上远程分支只能有五类： master、dev、feature/xxx分支、hotfix/xxx分支、release分支。【master】：
2022-04-22 16:47:31
674
原创 element-ui中destroy-on-close=true 与 v-if 的区别
场景: 最近在一次工作中, 使用了destroy-on-close这个属性, 本意的想在切换弹窗显隐的时候重新加载一下页面的数据, 然而却发生了意想不到的bug.解决方案: 通过在弹窗内部组件debug时候发现, destroy-on-close属性为true的时候, 关闭弹框的时候内部组件会重新请求接口, 这似乎与我的需求不太匹配, 我需要的是新打开弹框的时候再去请求接口, 所以这里使用v-if更好. 如果弹框里面的是表单项等, 使用destroy-on-close更好...
2022-03-15 14:35:26
2360
原创 第十三章----客户端检测
客户端检测是JS中争议最多的话题之一，因为不同的浏览器之间存在差异，所以经常需要根据浏览器的能力来编写不同的代码。能力检测在JS运行时中使用一套简单的检测逻辑，测试浏览器是否支持某种特性。ep: 盘点IE5之前的版本中没有document.getElementById这个DOM方法，注意：能力检测最适合用于决定下一步应该怎么做，而不一定能够作为辨识浏览器的标志。用户代理检测通过浏览器的用户代理字符串确定使用的是什么浏览器。用户代理字符串包含在每个HTTP请求的头部，在JS中可以通过navigat
2022-02-10 17:26:05
712
原创 前端权限判断
前言在一些项目中，涉及到对权限的判断，包括登录权限、页面权限、数据权限、按钮权限。登录权限分为游客访问和登录后访问页面权限给用户赋予一些角色后，用户可访问有权限的路由。数据权限一般由后端判断某些数据的展示与否按钮权限前端控制按钮的展示与否登录权限登录权限控制要做的事情,是实现哪些页面能被游客访问,哪些页面只有登录后才能被访问.在一些没有引入角色的软件系统中,通过是否登录来评定页面能否被访问在实际工作中非常常见.解决方案： 在路由守卫里，通过路由里的meta信息来判断此路由是否需
2022-01-05 17:32:49
1861
原创 你不知道的并发/继发请求操作
你需要知道的知识async是 Generator 函数的语法糖，总是返回一个promise。async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。继发请求使用 for循
2021-12-08 17:29:42
345
原创 WebSocket心跳重连机制
阅读本文章前请先了解WebSocket场景WebSocket在连接关闭的情况下会触发onclose事件，在链接异常的情况下会触发onerror事件。而在弱网条件下，onclose事件触发的灵敏度却不高，往往已经断网很久了才触发onclose事件，前端又去进行重连操作，对实时界面的展示不友好。所以，本文将介绍心跳重连机制来改善这一现象。解决方案心跳重连机制：前端在WS连接成功的情况下，开始执行心跳函数，首先向服务器端发送‘ping’信息，服务器内若收到信息则会返回’pong’信息。在一定时间内，前端收
2021-11-19 16:02:47
2850
原创 关于element-ui中那些你不知道的技巧
问题重现<el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item label="拼控器资源池名称：" prop="name"> <el-input v-mode
2021-10-21 14:33:32
614
原创 ES6运算符
链式运算符?.使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或者undefined。如果是，就不再往下运算，直接返回undefined。Null判断运算符 ??ES5 || 缺陷：原本意图——左侧为null或者undefined时，使默认值生效。但实际上左侧有部分假值，如：’’ false 0 都使默认值生效，这明显不符合逻辑的，假如我们需要的值就是’’ false 0 怎么办？？？类似 || 但是只有左侧为null或undefined才生效let num=null?.
2021-10-19 08:37:51
128
原创 vues ref reactive refs toRefs
refref是什么可以生成 值类型（即基本数据类型） 的响应式数据；,值存在ref对象的value里, 通过value来修改值;用于模板和reactive, 也可当做dom里的ref使用ref 不仅可以用于响应式，还可以用于模板的 DOM 元素。使用: let a = ref(1);取值: a.value<template> <p ref="elemRef">今天是周一</p></template><script>
2021-10-14 10:24:34
174
原创 ES6 函数的扩展
1 函数参数的默认值1.1 基本用法function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello1.2 与解构赋值默认值结合使用参数默认值可以与解构赋值的默认值，结合起来使用。function foo({x, y = 5}) { console.log(x, y);
2021-05-31 14:32:45
69
原创 npm发布测试版本
1. package.json修改version“version"：“1.0.6-beta”，2.提交测试版本npm publish --tag=beta3.下载测试版本npm install @fz/components@beta
2020-12-23 14:34:02
663
原创 彻底弄清JavaScript中的this
为什么要用thisthis可以在同一个执行环境中使用不同的上下文对象。它其实提供了一种更加优雅的方式来隐式“传递”一个对象引用，因此可以使API设计的更加简洁且易于复用。this到底是谁this既不是自身也不是当前函数的作用域。我们可以通过代码来测试。判断是不是自身function fn(){ console.log(this.name)}fn.name = 'xxx'fn() //undefined判断是不是函数作用域function foo() { va
2020-12-10 13:47:56
122
原创 vue3学习笔记
filtervue3中无过滤器，建议用方法调用或计算属性替换它们。或者是注册全局属性，使用globalProperties属性。import {createApp} from 'vue'import App from './App.vue'import './index.css'const app = createApp(App);app.config.globalProperties.$filters = { filterCount(value: any) { re
2020-12-10 11:50:15
191
原创 git推送.gitignore无效
推送.gitignore无效若没有生效，是因为gitignore只能忽略那些原来没有被 track 的文件，如果某些文件已经被纳入了版本管理中，则修改 .gitignore 是无效的。解决方法是先把本地缓存删除，然后再提交。git rm -r --cached .git add .git commit -m "update .gitignore"git push -u origin master ...
2020-12-07 17:06:33
112
原创 使用el-tab的时候渲染echarts图表为100px
问题echarts渲染时tab选项卡display为none，所以width：100%没有可继承项，被echarts自带方法切割成100px。解决思路：销毁组件，在tab选项卡被选中时重新渲染组件，这个时候就会有宽度继承。建议使用第二种第一种 解决：通过 v-if 重新渲染组件即可。<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <
2020-11-10 10:53:15
485
原创 el-table 去掉四周border
/deep/ .el-table.el-table--border { border: 1px solid transparent; } /deep/ .el-table--border th:nth-last-child(2) { border-right-color: transparent; } /deep/ .el-table--border:after { ..
2020-11-02 10:38:25
1555
原创 element多选下拉框中实现全选、部分选择、全不选功能的两种方式
1、使用CheckBox在el-select下拉框中增加el-checkBox选项，示例代码<template> <div class="test"> <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect'
2020-10-16 14:29:03
2303
原创 checkbox的三种状态——全选、部分选择、全不选
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>checkbox有三种状态全选(显示的’√’), 选中部分(显示的’-’), 全不选(啥都没显示)对于indeterminate和v-model绑定的a和b的值如果true true 或者 true false样式为-如果false true样式为√如果false false样式为不勾<template> <div class
2020-10-16 09:36:39
2319
转载 git commit 提交的时候报错husky ＞ pre-commit hook failed (add --no-verify to bypass)（解决办法）
这个问题是因为当你在终端输入git commit -m “XXX”,提交代码的时候,pre-commit(客户端)钩子，它会在Git键入提交信息前运行做代码风格检查。如果代码不符合相应规则，则报错，而它的检测规则就是根据.git/hooks/pre-commit文件里面的相关定义。查询了网上的解决办法，总结为以下三种解决方案，个人喜欢第三种：卸载husky。只要把项目的package.json文件中devDependencies节点下的husky库删掉，然后重新npm i 一次即可。或者直接在项目根目录
2020-10-15 15:22:38
1659
原创 用鼠标滚轮控制水平坐标轴的移动
监听mousewheel事件若deltaY为100，则该元素的scrollLeft加上100<div class="main-content" @mousewheel="handleWheelEvent"></div> handleWheelEvent(e) { this.$refs.tableList.bodyWrapper.scrollLeft += e.deltaY; },...
2020-09-23 10:05:10
490
转载 for in与 for of的区别
for…of与for…in的区别https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以任意顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时，for…of循环和for…in循环之间的区别。Object.proto
2020-09-16 11:35:16
365
原创 es6中的Map对象
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
2020-09-16 11:16:17
121
原创 异或运算
异或（xor）是一个数学运算符。它应用于逻辑运算。异或的数学符号为“⊕”，计算机符号为“xor”。其运算法则为：a⊕b = (¬a ∧ b) ∨ (a ∧¬b)一个数和0进行异或运算 = 这个数本身 a⊕0 = a相同的数进行异或运算 = 0 a⊕a = 0满足交换律和结合律 a⊕b⊕a = (a⊕a)⊕b = 0⊕b = b...
2020-09-16 11:13:47
1515
原创 docker常用命令
docker run -p 8080:80 -d nginxdocker ps 查看正在运行的容器docker ps -a 查看所有容器docker images 查看所有镜像docker cp index.html 27322606e01c://usr/share/nginx/html 将index.html拷贝到27322606e01c://usr/share/nginx/html路径下(//usr/share/nginx/html是nginx的默认文件路径)docker rmi 48cc..
2020-09-14 14:44:22
83
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人