- 博客(90)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue a-table表格重新渲染高度
a-table在切换过程中，如果出现固定列，单元格合并等情况，可能会出现表格错位等情况。解决方案：重新渲染表格。
2023-05-15 15:04:42
1209
1
原创 element合并树状表格
为了让项目2合并并能展开，项目2的下一级children应放在最后一条合并的单元格下面。需求：element合并树状表格，相同区域id合并，展开还有下一级。需要多加一些处理，确实有点麻烦，希望有更方便可以直接实现的组件。在template里单独设置第一列样式。自带表格切换/展开方法。
2023-03-24 16:05:13
712
3
原创 elment左侧菜单栏拖拽调整宽度
在Sidebar中添加一个组件div，div添加鼠标事件监听拖拽左侧距离，改变左侧菜单栏宽度。elment框架左侧菜单栏文字过长，不显示完全，需要拖拽调整左侧宽度。
2023-02-28 16:16:54
2786
2
原创 【面试】Js面试题（一）
一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段，捕获阶段（从 window 对象传导到目标节点（从外到里），这个阶段不会响应任何事件），目标阶段，（在目标节点上触发），冒泡阶段（从目标节点传导回 window 对象（从里到外），事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层面向对象是一种思想，是基于面向过程而言的，面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；...
2022-08-16 16:56:13
1481
原创 【面试】HTML（二）
结构（html 或 xhtm 标记语言）表现（css 样式表）行为（js）媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css样式，达到自适应的目的。(在指定的设备上使用对应的样式替代原有的样式。)比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小，就会导致看文章的时候特别费眼不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容参考文章哪
2022-07-14 18:02:13
321
原创 【面试题】HTML篇（一）
JPEG、GIF、PNG宽度=内容宽度+padding（左右）+margin（左右）高度=内容高度+padding（左右）+margin（左右）src 需要播放的视频地址width/eight 设置播放视频的宽高，和 img 标签的宽高属性一样autoplay 是否自动播放controls 是否显示控制条poster 没有播放之前显示的展位图片lop 是否循环播放perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属性，perload 属性会失效。mu
2022-07-13 11:42:49
215
原创 【canvas】3、使用图像、变形及裁切路径
引入图像到 canvas 里的两步基本操作：1、获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源2、使用drawImage()函数将图片绘制到画布上获得需要绘制的图片HTMLImageElement这些图片是由Image()函数构造出来的，或者任何的元素HTMLVideoElement用一个 HTML 的 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像HTMLCanvasElement可以使用另一个 元素作为你的图片源。ImageBitm
2022-06-13 17:12:13
632
原创 【canvas】2、样式和颜色
fillStyle = color设置图形的填充颜色strokeStyle = color设置图形轮廓的颜色globalAlpha = transparencyValue这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0（完全透明）到 1.0（完全不透明），默认是 1.0。也可用rgba线的样式lineWidth = value设置线条宽度。默认值是 1.0,在路径的两边各绘制线宽的一半lineCap = type设置线条末端样式。butt，round 和 squa
2022-06-13 13:59:52
181
原创 【canvas】1、基本用法及绘制形状
默认大小 300*150检查支持性 getContexfillStyle ：设置颜色画布栅格绘制矩形三种方法：fillStyle：填充颜色strokeStyle：边框颜色函数beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。在设置路径之后专门指定你的起始位置moveTo(x, y)将笔触移动到指定的坐标 x 以及 y 上。当 canvas 初始化或者beginPath()调用后，通常会使用moveTo()函数设置起点closePath()闭合路径之后图形绘制
2022-06-06 17:07:39
369
原创 flex布局
flex布局基本概念采用 FlexBox 布局的元素使用display: flex 来指定，将变成 Flex 容器（flex container），它的直接子元素」即可通过 flex 布局属性来控制其显示方式，被称为 flex-item。flex-container：布局容器，使用 display：flex 的标签；flex-item: 容器中的直接子元素；main-axis：主轴，布局方向为 row 或者 row-reverse 时它是水平方向。布局方向为 column 或者 column-re
2022-05-18 17:21:36
1706
原创 flex布局中关于 flex-item 计算公式
flex布局中关于 flex-item 计算公式⚠️如果每个 item 的 flex-grow 之和小于1，将不能按照比例计算，需要把扩展量/收缩量乘以每个 item 的 flex-grow 之和即 grows=每个 item 的 flex-grow 之和gWidth=basis+freeSpace*(grow/(grow1+grow2+…+grown))*grows(收缩同理）参考添加链接描述...
2022-05-13 09:50:04
350
原创 递归的写法
重点三要素确定递归函数的参数和返回值： 确定哪些参数是递归的过程中需要处理的，那么就在递归函数里加上这个参数， 并且还要明确每次递归的返回值是什么进而确定递归函数的返回类型。确定终止条件： 写完了递归算法, 运行的时候，经常会遇到栈溢出的错误，就是没写终止条件或者终止条件写的不对，操作系统也是用一个栈的结构来保存每一层递归的信息，如果递归没有终止，操作系统的内存栈必然就会溢出。确定单层递归的逻辑： 确定每一层递归需要处理的信息。在这里也就会重复调用自己来实现递归的过程递归求1-100之间和f
2022-04-25 11:49:12
230
原创 async 函数
async 函数和 Generator 函数async 函数就是 Generator 函数的语法糖async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await以下四点改进（1）内置执行器Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器（2）更好的语义。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果（3）更广的适用性。co模块约定，yield命令后面只能是 Thunk 函数或
2022-04-21 16:18:01
292
原创 Generator 函数的异步应用
Generator 函数的异步应用整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。Generator 函数的执行方法如下function* gen(x) { var y = yield x + 2; return y;}var g = gen(1);g.next() // { value: 3, done: false }g.next() // { value: undefined, done: true }
2022-04-20 17:26:08
267
原创 Generator 函数
这里写目录标题基本概念基本概念执行 Generator 函数会返回一个遍历器对象，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）function* helloWorldGenerator() { yiel
2022-04-15 17:51:11
958
原创 [算法-1]数组中常用算法（二分查找+双指针)
在工作中对于数组的操作比较多，比较常用的还是暴力解法。现分享一些常用到的针对数组操作的算法js数组常用操作方法：map(),forEach()、filter()、some()、every()、.lastIndexOf()、indexOf()、match()、replace()参考链接二分法前提：数组为有序数组，同时题目还强调数组中无重复元素，因为一旦有重复元素，使用二分查找法返回的元素下标可能不是唯一的，这些都是使用二分法的前提条件步骤：1、**定义区间：左闭右闭即[left, right]，
2022-04-15 10:43:21
375
原创 Vue 3.0
defineComponent函数目的是定义一个组件,内部可以传入一个配置对象// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象import { defineComponent } from 'vue';// 引入一个子级组件import HelloWorld from './components/HelloWorld.vue';// 暴露出去一个定义好的组件export default defineComponent({ // 当前组件的名字是App
2022-04-11 17:10:16
2418
原创 html2Canvas下载PDF并压缩
多选多个html生成PDF文件并打包成压缩文件JS文件import JSZip from 'jszip';import FileSaver from 'file-saver';import html2Canvas from 'html2canvas';import JsPDF from "jspdf";import { Loading} from 'element-ui'/*** * @function 把html生产pdf，然后打包下载 * @params ele 要下载的dom
2022-02-23 10:07:33
958
原创 Iterator 和 for...of 循环
Iterator 和 for...of 循环Iterator（遍历器）的概念Iterator（遍历器）的概念遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口
2022-02-10 16:17:54
713
原创 js计算当前周数及每周具体日期、每月的第一个周一
效果如图，选择年份，显示周数及对应日期##写了一个函数，传入年份，返回周数数组//设置周下拉框export function setweekOption(year){//传入年份 year=new Date(year).getFullYear() let days = getDay(year || new Date().getFullYear()) let weeks = {}; for (let i = 0; i < days.length; i++) {
2022-02-10 15:04:39
2005
1
原创 Promise 对象
含义Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息特点（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rej
2022-01-19 16:13:05
894
原创 Proxy和Reflect
Proxy概述Proxy 实例的方法Proxy.revocable()Reflect概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var proxy = new
2022-01-07 15:58:46
90
原创 Set 和 Map 数据结构
Set 和 Map 数据结构SetSet 实例的属性和方法WeakSet 结构MapMap实例的属性和操作方法与其他数据结构的互相转换WeakMapSet基本概念：类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5
2022-01-06 17:01:17
108
原创 Symbol函数
Symbol函数概述Symbol.prototype.description作为属性名消除魔术字符串属性名的遍历Symbol.for()，Symbol.keyFor()实例：模块的 Singleton 模式内置的 Symbol 值概述ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。通过Symbol函数生
2022-01-06 15:14:20
1528
原创 ant组件库 a-table表格合并单元格
需求行/列合并data中：TableHeader: [ { key: "label", dataIndex: "label", title: "类别", fixed: "left", width: 60, align: "left", colSpan: 2,//简单合并表头，合并2 ，在第二个表头加 colSpan: 0（即不渲染）
2021-12-31 13:50:22
1386
转载 变量提升和暂时性死区
变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;上面
2021-12-08 14:37:26
769
转载 常用正则表达式
1.正确表达式“^\d+" //非负整数（正整数+0）"[0−9]∗[1−9][0−9]∗" //非负整数（正整数 + 0）"^[0-9]*[1-9][0-9]*" //非负整数（正整数+0）"[0−9]∗[1−9][0−9]∗” //正整数“^((-\d+)|(0+))" //非正整数（负整数+0）"−[0−9]∗[1−9][0−9]∗" //非正整数（负整数 + 0）"^-[0-9]*[1-9][0-9]*" //非正整数（负整数+0）"−[0−9]∗[1−9][0−9]∗” /
2021-11-23 10:25:40
168
原创 2021-11-15ES6解构赋值提取对象属性
ES6解构赋值删除对象制定属性var obj={name:"ww",id:"21",sex:"女",age:"11"}let{sex,age,...obj2} =objobj2//{sex:"女",age:"11"}
2021-11-15 16:20:32
1042
原创 正则表达式匹配数字，三位分组
4 4 25 25 422 422 3189 3,189 50445 50,445n.replace(/(\d+?)(?=(?:\d{3})+$)/g, ‘$1,’)replace(/(\d{1,3})(?=(\d{3})+(?:$|.))/g,’$1,’)
2021-10-28 17:03:14
905
原创 2021-10-20利用 html2Canvas和JsPDF将HTML文件下载成PDF
方法如下思路：生成 canvas 节点，再利用html2Canvas插件 //导出PDF printOut() { var title = this.teacherName; var that = this; var shareContent = document.querySelector("#PDFDownLoad"); //需要截图的包裹的（原生的）DOM 对象 var width = shareContent.offsetWidth; //
2021-10-20 16:32:03
124
原创 vant 单选框在同一行显示
vant 单选框在同一行显示利用 <van-radio-group v-model="item.score" direction="horizontal"> <van-row> <van-col span="20%"> <van-radio name="0" checked-color="#5cccfb">差</van-radio>
2021-10-18 11:47:08
2411
原创 vue中sso登录使用VueKeycloak
下载vuekeycloakjsnpm install @dsb-norge/vue-keycloak-js --save引入import VueKeycloakJs from '@dsb-norge/vue-keycloak-jsVue.use(VueKeycloakJs, {init: {onLoad: “login-required”,checkLoginIframe: false//防止登陆后重复刷新},config: {url: process.env.VUE_APP_SSO_U
2021-10-12 16:39:04
1054
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人