![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 62
Program W
这个作者很懒,什么都没留下…
展开
-
Vue实现Antv/X6中的示例,以及一些er图开发场景
Vue实现Antv/X6中的示例,以及一些er图开发场景。已实现ER、 BPMN、 UML、 思维导图、 自定义功能。原创 2023-08-31 10:20:45 · 2113 阅读 · 0 评论 -
Javascript面试常问知识点
闭包(Closure)是指一个函数能够访问并操作其词法作用域外部的变量的能力。具体来说,闭包是由函数以及函数内部能够访问的变量组合而成的包裹(Closure)。函数内部可以访问外部函数的变量和参数。外部函数执行完毕后,其内部变量不会被销毁,仍然可以被内部函数访问。闭包可以捕获并保存外部函数的作用域,使得外部函数的变量在内部函数执行时仍然可用。保护变量:闭包可以保护变量不被外部访问和修改,实现了数据的私有化,增加了程序的安全性。原创 2023-06-14 11:50:55 · 1254 阅读 · 0 评论 -
任务进度bpmn绘制选型antv/x6与g6
因为想要记录业务【在整个流程开始与结束之外的操作】与流程【图中红色标码的节点为审批节点】结合的全流程进度,因为时间与一些其他原因想采用前端制作。原创 2023-02-17 15:39:41 · 2235 阅读 · 1 评论 -
移除vue生产环境console.log,并本地打包测试
移除vue生产环境console.log原创 2022-12-07 11:58:36 · 359 阅读 · 0 评论 -
Vue2实现vue-cron回显以及一些自适应改动
【代码】Vue2实现vue-cron回显以及一些自适应改动。原创 2022-11-28 11:13:06 · 1781 阅读 · 0 评论 -
Vue3封装exceljs导出数据与图片组件
原版:使用exceljs读取和导出Excel并支持图片导出2、组件二、使用示例:导出按钮组件:echarts图2.1导出效果原创 2022-11-28 09:41:11 · 1440 阅读 · 0 评论 -
antv/g6全屏【canvas】记录
100%网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽)网页可见区域高:document.body.offsetHeight(包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight。原创 2022-11-22 10:31:11 · 1540 阅读 · 0 评论 -
antv系列图引擎X6、G6比对选择,并实现vue实例ER图
官方示例中是(使用String自定义 ToolBar 功能)但是,看了文档,我们还可以使用使用DOM自定义 ToolBar 功能// 工具栏 const toolbar = new G6 . ToolBar({// 渲染自定义节点---组件 const outEl = document . getElementById('toolbar') return outEl } , position : {官方示例注册的自定义边没有提供连线,所以我们如果有需要则得在方法中自己定义连线中途的图形制作默认。原创 2022-11-16 18:19:20 · 4541 阅读 · 0 评论 -
antV/X6学习---官网实例vue实现
antV/X6学习---官网实例vue实现原创 2022-07-29 15:21:51 · 2480 阅读 · 0 评论 -
使用tesseract.js-offline识别图片文字记录
tesseract.js是一个JavaScript库,可以从图像中获取几乎任何语言的单词。原创 2022-07-15 11:05:37 · 1088 阅读 · 0 评论 -
JS使用Puppeteer自动化进行浏览器操作记录,js执行py脚本
二、网页截图加载完页面后,对页面进行截图方法基本截图全屏截图参数四、自动化操作自动CSDN五、通过脚本方法截取指定元素的图Puppeteer中文API文档原创 2022-07-14 12:01:48 · 1059 阅读 · 0 评论 -
组合式 API----Vue3学习
一、API风格选项式 API 和组合式 API。选项式 API(也就是Vue2时的写法)使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。实际上,选项式 API 也是用组合式 API 实现的!<script>export default { // data() 返回的属性将会成为响应式的状态 // 并且暴露在 `this` 上原创 2022-05-30 16:21:13 · 678 阅读 · 0 评论 -
element+vue全屏与退出全屏(监听ESC改样式)
一、design.jsfunction toggle(ele, that, exitFullScreen, fullScreen) { if (that.isFullScreen) { exitFullScreen() that.isFullScreen = false } else { fullScreen(document.getElementById(ele)) that.isFullScreen = true }}export default原创 2022-04-24 16:08:37 · 575 阅读 · 0 评论 -
Vue动态表单---Variant Form代码学习(Vue内置组件)
一文彻底搞懂ConcurrentHashMap原理 ...原创 2022-03-30 11:07:06 · 4959 阅读 · 0 评论 -
js更少的代码处理数组的取最小、大值(sort、math【ES5/6】)
一、for循环const arr = [33, 4, 9]let max = arr[0];for (let i = 0; i < arr.length - 1; i++) { max = max < arr[i+1] ? arr[i+1] : max}let min = arr[0]; for (let i = 0; i < arr.length - 1; i++) { min = min > arr[i + 1] ? arr[i + 1]原创 2022-03-08 09:40:49 · 206 阅读 · 0 评论 -
js树结构操作(parentId转children,扁平化,递归父节点)
一、方法parentId转childrenfunction createArr(data, arr, id) { // parentId转children const filtersList = arr.filter(e => e.parentId === id); data.children = filtersList; data.children = data.children.map(e => { e = createArr(e, arr, e.id);原创 2022-03-01 12:03:25 · 1802 阅读 · 0 评论 -
Vue.mixin()+全局混入插件+this.$optiosn获取初始化选项+局部混入
一、概述Vue.mixin( mixin )用法:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。https://cn.vuejs.org/v2/api/#Vue-mixin生命周期https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%9原创 2022-03-01 10:22:46 · 693 阅读 · 0 评论 -
el表格头部拼装,filter+map的结合使用
一、场景像navicat查数据一样,select * from user;这样的数据,但因为是业务涉及修改数据表元数据,所以需要过滤离线的数据表元数据,然后保留在线表的字段拼接到列上。二、代码先过滤筛选出id为null(即在线)的字段,然后拿到它的字段名,最后拼接(ELM-UI)el-table所需的columnsif(res.list.length === 0) { // 无数据时初始化头部列,过滤离线字段 const arr =原创 2022-02-09 10:34:10 · 684 阅读 · 0 评论 -
vue+monato-editor代码编辑高亮,sql变化监听(组件化)-->优化具体语言引入
一、概念Monaco Editor 是支持VS Code的代码编辑器 。描述代码编辑器功能的好页面在 这里。它在 MIT 许可下获得许可,并支持 Edge、Chrome、Firefox、Safari 和 Opera。移动浏览器或移动 Web 框架不支持 Monaco 编辑 器。microsoft/monaco-editor代码仓库二、使用步骤引用依赖package.json,添加"monaco-editor": "^0.21.2","monaco-editor-webpack-原创 2022-01-25 14:38:14 · 3097 阅读 · 0 评论 -
js的闭包(Closure)是什么?【隐藏一个变量,间接访问它】
什么是「闭包」。「闭包」的作用是什么假设上面三行代码在一个立即执行函数中(为简明起见,我就不写立即执行函数了,影响读者理解)。三行代码中,有一个局部变量 local,有一个函数 foo,foo 里面可以访问到 local 变量。好了这就是一个闭包:「函数」和「函数内部能访问到的变量」的总和,就是一个闭包。就这么简单。有的同学就疑惑了,闭包这么简单么?「我听说闭包是需要函数套函数,然后 return 一个函数的呀!」比如这样:function foo(){ var local.转载 2021-12-31 17:12:53 · 347 阅读 · 0 评论 -
vue项目引入iconfont【最简单方便的Symbol引用】(从下载到使用的步骤)
一、首先找到iconfont图标库iconfont-阿里巴巴矢量图标库二、下载图标的步骤先收藏收藏(也叫入库,购物车的图标)添加到项目(这个项目不是只我们开发中的项目,代指而已)先创建项目(代指),在我的项目中(相当于你要用的这些图标在哪个项目中)我的项目这时才有添加的目标库最后下载下来【下载后是个压缩包zip】三、引用到vue项目中的步骤解压,这是解压后的文件,我们用Symbol引用只要用到这个js文件将其放到我们的icons目录下(其他不用管,那是另外两种引原创 2021-12-16 15:14:32 · 2418 阅读 · 0 评论 -
指定元素全屏与退出全屏,Vue中处理监听esc并修改data数据(监听与作用域问题)
文章目录一、效果二、解决思路三、全屏与退出全屏一、效果解决的问题:vue本身监听不到全屏状态中的esc事件,导致无法修改这个按钮的样式icon和tooltip未全屏时:全屏时:二、解决思路一个重要方法:判断当前是否全屏问题:如果vue本身的话,在esc事件时是不会调用这个方法的/**浏览器当前是否全屏@return {*|boolean}*/export function isFullScreen() {return document.isFullScreen |原创 2021-11-05 15:53:24 · 944 阅读 · 3 评论 -
记录Error: Cannot find module ‘less‘(webpack和less-loader版本处理)
原文:Vue安装loader报错:Syntax Error: Error: Cannot find module ‘less‘ 1.Vue组件中写了less 运行报错 2.提示我应该安装一个loader 然后执行了 npm i less-loader 运行之后还是报错: &nbs转载 2021-10-08 14:24:17 · 1940 阅读 · 0 评论 -
解决表格中动态el-input(focus、blur异常)(涉及vue、document以及原生div属性操作)
一、异常来源最初,本来需求,就简单的在表格的输入框失去聚焦的时候(或值改变的时候)进行规范校验,然后根据校验对其进行聚焦focus()事件(并给出message提示)。结果却发现如此坑爹之处:二、解决思路与步骤用vue获取ref,进行focus,没啥用用document,因为是table组件中的input,使它,聚焦的时候是整列,使其在tab(键盘tab)操作时,会去下一行同列给每个el-input动态设置id,然鹅,发现聚焦实在element封装的最外层div元素上然后原创 2021-09-29 13:18:50 · 3194 阅读 · 0 评论 -
从删除数组到ES6的filter的操作数组
一、删除数组1.1、数组的方法pop(); // 移除最后一个元素并返回该元素值 shift(); // 移除最前一个元素并返回该元素值,数组中元素自动前移 splice(deletePos,deleteCount); // 删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素1.2、delete方法缺陷在于需要索引位置,无法与for...of一起使用这种方式,删除后将那一项变成undefined,数组长度不变,之后遍历的时候会自动原创 2021-09-24 16:17:04 · 282 阅读 · 0 评论 -
浅拷贝与深拷贝
一、浅拷贝浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,无论对新旧数组的哪一个进行了修改,两者都会发生变化。slice()、concat()===当数组内部是对象时二、深拷贝深拷贝:完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。JSON.stringify和JSON.parse不仅可拷贝数组还能拷贝对象(但不能拷贝函数)使用有一些限制,对于RegExp类型和Function类原创 2021-08-27 15:25:09 · 51 阅读 · 0 评论 -
Vue的组件table中遍历my-input组件(绑定row数据)进行根据id对div进行focus
一、Vue的ref进行focus无效,同列遍历出来的input依然可以跳转二、根据div元素的id进行focus无效,div本身无法聚焦三、使div元素可聚焦1.1、div中的tabindex属性tabindex只能用数字所以这样无效这个当了浏览器就是个以div包裹的了<my-input:tabindex="'columnLen'+ row.sort" :id="'columnLen'+ row.sort" v-model="row.len原创 2021-08-25 09:49:20 · 448 阅读 · 0 评论 -
my-table中使用input绑定row动态处理focus,ref使用的异常
一、ref的异常在通过my-table的row来遍历input,而想要聚焦其中一行确定的那个input,此时用ref直接(this.$refs.xxx.focus())会导致聚焦到下一行的input中。二、动态设置处理input此时可以动态设置元素的id(:id=" 'xxx'+ row.sort")这里的sort是表格添加行时安装长度+1得来的序号(与索引类似的功能)最后就可以在每次blur事件中进行判定聚焦了callFlag() { this.$emit('onFla原创 2021-08-23 17:11:15 · 268 阅读 · 0 评论 -
gojs无法获取id、class时,通过元素直接操作canvas的样式
文章目录一、需求是`powerdesigner`那样点击一项然后在画布上鼠标样式改变1、刚开始并没有直接操作canvas的样式2、因为用的`gojs`的画布`canvas`,所以只能通过节点元素来操作了一、需求是powerdesigner那样点击一项然后在画布上鼠标样式改变1、刚开始并没有直接操作canvas的样式刚开始是操作上一节那个Diagram组件中的div元素,想简单点<div ref="content" class="my-go-diagram__cont原创 2021-08-19 13:27:58 · 406 阅读 · 0 评论 -
js获取数组对象中对象全部key,动态设置key的值,动态设置columns(数组对象横向转竖向)
获取数组对象中对象全部key先获取单个对象的keys,然后通过forof的特性获取数组中索引的值console.warn用于清晰打印const keys = Object.keys(list[0]) for (const key of keys) { console.warn(key); }动态设置key的值通过[]来动态设置对象的keyconst obj = {} for (const i in list) { co原创 2021-08-18 16:20:34 · 3135 阅读 · 0 评论 -
禁用的来源disabled以及只读readonly,Vue给icon加禁用
一、禁用disabled来源众所周知,在element ui的button可以添加disabled参数来让按钮不能点击且鼠标会有一个禁用标符。disabled表示禁用input元素,不可编辑,不可复制,不可选择,不能接收焦点,,后台不能接收到传值.<input type="button" disabled="disabled" />二、只读readonlyreadonly表示此域的值不可修改,仅可与 type=“text” 配合使用,可复制,可选择,可以接收焦点,后台能接原创 2021-08-16 13:00:45 · 2753 阅读 · 0 评论 -
标准与Vue事件重载、阻止事件冒泡、阻止事件的默认行为、Vue事件处理(三大修饰与.exact)
一、事件重载<button @click="c1">点击1</button><button @click="c2('张三')">点击2</button><button @click="c3('李四', $event)">点击3</button>methods: { c1(e) { // 没有参数,默认传递 $event console.log(e); // MouseEvent对象 },原创 2021-08-11 13:26:46 · 1179 阅读 · 0 评论 -
组建基础到渲染函数JSX、render函数
文章目录一、组件基础1.1、`Vue.component`全局注册1.2、局部注册一、组件基础1.1、Vue.component全局注册Vue.component全局注册组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="co原创 2021-08-10 17:08:43 · 392 阅读 · 0 评论 -
Vue修改node_modules插件下dist中的样式
一、修改样式的思路(js的想法)今天突然遇到一个要改bpmn源码中样式的需求,但是又不能直接去改源码打成dist包中的样式,node_module下改了也没啥用。于是想起了用js操作节点来修改样式。1.1、首先是getElementsByClassName()代码这样document.getElementsByClassName('group-closed').length1.先获取折叠了的group,2.通过获取它的长度才能获得它折叠后的第一个样式再进行修改。3...结果发现没办法原创 2021-08-06 22:09:18 · 1208 阅读 · 0 评论 -
回调函数callback()的学习
文章目录一、什么事回调函数?二、异步回调2.1、javascript中内置异步处理模式Promise三、`callback && callback(data)`什么意思一、什么事回调函数?官方是这样写的:被作为实参传入另一函数,并在该外部函数内被调用,用以来完成某些任务的函数,称为回调函数.官方示例function greeting(name) { alert('Hello ' + name);}function processUserInput(callback)原创 2021-08-05 14:31:32 · 761 阅读 · 0 评论 -
WebSocket的学习
文章目录一、WebSocket用来干什么的?特点:二、WebSocket的属性三、WebSocket的方法三、WebSocket的事件四、Vue中使用WebSocket的Demo(只有前端发送)五、后端Demo......一、WebSocket用来干什么的?就简单而言,WebSocket就做一些原来Http无法做的事,以前Http必须请求才有回应,现在WebSocket变成了连接后,服务器就可以主动了,不再被动~特点:(1)和 HTTP 一样属于应用层协议,也是建立在 TCP 协议之上,服务器端的原创 2021-08-04 16:23:18 · 126 阅读 · 0 评论 -
用于Boolean+filter()过滤false类元素
false类元素空字符串,undefined,null,0,NaNfilter(Boolean)过滤const res = [0,3,4,'',true,false,null,undefined,'test']const filterRes = res.filter(Boolean);console.log(filterRes);// [ 3, 4, true, 'test' ]原创 2021-07-30 18:07:38 · 554 阅读 · 0 评论 -
JS的Object实例、属性、方法概要,需要可立知,用到再详查
文章目录一、Object 实例和 Object 原型对象二、Object构造函数的==属性==三、Object构造函数的==静态方法==实例方法一、Object 实例和 Object 原型对象JavaScript中的所有对象都来自 Object;所有对象从Object.prototype (en-US)继承方法和属性,尽管它们可能被覆盖。二、Object构造函数的属性Object.length—— 值为1Object.prototype—— 指向 Object 函数的原型对象三、Obje原创 2021-07-30 17:29:16 · 178 阅读 · 0 评论 -
全局变量的定义(三种)、原型链与原型对象、Vue.prototype和Vue.use()定义使用插件
Vue.prototype定义常量(全局变量)在main.js中使用Vue.prototype定义变量是为添加了一个原型属性,但如果是常量(boolean,number,string,null,undefined),则可以实现全局变量Vue.prototype.name = ‘张三’Vue.prototype.$myName= ‘李四’name和$myName的区别:在于 name可以被data(){return{……}}修改。而$myName不可以, $作为vue中的一个简单约定,用原创 2021-07-30 14:59:57 · 1080 阅读 · 0 评论 -
ES6的控制台(打印状态、表格、分组、计数、计时)
一、console.log()| info()| debug()| warn()| error()console.log("console log")console.info("console info")console.debug("console debug")console.warn("console warn")console.error("console error")二、console.table()this.searchColumns({ data: { pinyin: que原创 2021-07-29 11:33:39 · 403 阅读 · 0 评论