Vue
文章平均质量分 59
Program W
这个作者很懒,什么都没留下…
展开
-
Vue实现Antv/X6中的示例,以及一些er图开发场景
Vue实现Antv/X6中的示例,以及一些er图开发场景。已实现ER、 BPMN、 UML、 思维导图、 自定义功能。原创 2023-08-31 10:20:45 · 2483 阅读 · 0 评论 -
任务进度bpmn绘制选型antv/x6与g6
因为想要记录业务【在整个流程开始与结束之外的操作】与流程【图中红色标码的节点为审批节点】结合的全流程进度,因为时间与一些其他原因想采用前端制作。原创 2023-02-17 15:39:41 · 2397 阅读 · 1 评论 -
Vue2实现vue-cron回显以及一些自适应改动
【代码】Vue2实现vue-cron回显以及一些自适应改动。原创 2022-11-28 11:13:06 · 1918 阅读 · 0 评论 -
Vue3封装exceljs导出数据与图片组件
原版:使用exceljs读取和导出Excel并支持图片导出2、组件二、使用示例:导出按钮组件:echarts图2.1导出效果原创 2022-11-28 09:41:11 · 1581 阅读 · 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 · 1715 阅读 · 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 · 4767 阅读 · 0 评论 -
antV/X6学习---官网实例vue实现
antV/X6学习---官网实例vue实现原创 2022-07-29 15:21:51 · 2658 阅读 · 0 评论 -
bpmn-process-designer基础上进行自定义样式(工具、元素、菜单)
处理思路可以看到工具区就是基本样式,所以在此基础上加一个class就ok了找到自定义工具,red是我们自己添加的可以用于左边工具区palette和下拉菜单popup-menu在index.scss添加colorred!important;}//gatewaydisplaynone!important;}效果通过使用自定义渲染我们可以看到初始样式的设置//设置初始样式配置(stroke线条、fill填充内部、label就是图形内部那个文本)constconfig={...原创 2022-07-29 15:13:48 · 3032 阅读 · 0 评论 -
Vite2兼容低版本chrome(如搜狗80),通过polyfills处理部分需求高版本的语法
处理vite兼容低版本浏览器,es6语法兼容原创 2022-06-29 18:50:14 · 4977 阅读 · 4 评论 -
开源项目bpmn-process-designer跑通与引入记录
先克隆项目跑跑推荐用yarn(并行下依赖,快许多【几十秒就搞定了,想起之前的痛苦时光,还中途各种异常下不到┭┮﹏┭┮】)记得配置环境变量(要重启电脑)原创 2022-06-16 14:59:16 · 3428 阅读 · 0 评论 -
微应用部署环境下,子应用无法访问(问题记录),try_files详解
微应用部署问题原创 2022-06-14 16:09:55 · 829 阅读 · 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 · 810 阅读 · 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 · 612 阅读 · 0 评论 -
Vue动态表单---Variant Form代码学习(Vue内置组件)
一文彻底搞懂ConcurrentHashMap原理 ...原创 2022-03-30 11:07:06 · 5128 阅读 · 0 评论 -
el-table通用弹窗表格【单选用户】(懒加载及其过滤)
一、单选表格用户框架是MyUI代码<my-table fit toolbar :size="'small'" ref="tables" :columns="columns" :pagination="{ layout: 'total, sizes, ->, prev, pager, next, jumper' }" :loader="loader" :pa原创 2022-03-30 10:21:13 · 459 阅读 · 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 · 1885 阅读 · 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 · 766 阅读 · 0 评论 -
前端代码格式化VSCode,插件Volar,配置默认格式化程序
一、概述vscode复制代码十分乱格式,但是需要搭配一个好的格式化程序(插件),这里选择Volar(一个标签属性多了就会帮你自动换行。就很棒)二、使用可以看到有两个Volar(Vue2选择下面的)Ctrl+Shift+F(格式化快捷键)配置默认(第一次选错了,通过这个操作重新配【爬坑的难受┭┮﹏┭┮】)...原创 2022-02-15 12:04:34 · 20723 阅读 · 6 评论 -
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 · 714 阅读 · 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 · 3224 阅读 · 0 评论 -
vue项目引入iconfont【最简单方便的Symbol引用】(从下载到使用的步骤)
一、首先找到iconfont图标库iconfont-阿里巴巴矢量图标库二、下载图标的步骤先收藏收藏(也叫入库,购物车的图标)添加到项目(这个项目不是只我们开发中的项目,代指而已)先创建项目(代指),在我的项目中(相当于你要用的这些图标在哪个项目中)我的项目这时才有添加的目标库最后下载下来【下载后是个压缩包zip】三、引用到vue项目中的步骤解压,这是解压后的文件,我们用Symbol引用只要用到这个js文件将其放到我们的icons目录下(其他不用管,那是另外两种引原创 2021-12-16 15:14:32 · 2781 阅读 · 0 评论 -
el+vue双向绑定table异常记录、string对象(json数据)的解析与重组(多k-v)动态表单
一、双向绑定table组件异常说说问题:在调接口获取到数据后直接给this.xxx双向绑定(即table中使用input组件v-model)没什么问题…但是,我需要先动获取到的数组拿到里面的string对象(比如param: "{\"前缀\":\"xx\"}"),需要通过JSON.parse()解析出来,然后通过Object的keys()和values()获取到其中的k-v-----正因如此,尝试了习惯的foreach、for...of,都导致绑定异常(异常是:在input输入数据后【无法看到输入原创 2021-12-07 18:26:52 · 1070 阅读 · 0 评论 -
若依RuoYi-Vue代码学习一---登录实现(验证码校验、token生成,token过滤【验证】)
文章目录一、验证码生成功能二、登录(校验验证码、token生成)三、【认证】token过滤一、验证码生成功能成果:可以看出这个验证码主要是:这个图片的展示代码位置com.ruoyi.web.controller.common.CaptchaController@RestControllerpublic class CaptchaController{ @Resource(name = "captchaProducer") private Producer ca原创 2021-11-22 18:05:09 · 7508 阅读 · 2 评论 -
饿了ui多form时提交,对rules判空处理,及处理时foreach和for...of差异,文件上传formData
一、多form提交业务逻辑问题是:一个表单提交、另一个是文件上传。导致了===》rules虽然提示了,但是没有拦截住文件上传的提交二、处理校验以及foreach和for...of差异获取rules的keyconst vali = Object.keys(this.rules)为什么选这两种呢?因为要遍历对象,需要key,所以用这两种简单一点先尝试foreachvali.forEach(e => { if(this.mdInfo[e] === '')原创 2021-11-18 14:59:33 · 100 阅读 · 0 评论 -
Vue中为动态角色设计动态菜单(并配置动态路由,递归菜单,处理重定向与死循环、push重定向异常捕获)
一、思路动态角色、动态菜单基本都是后端的事情了(两个表的事情)设计方面:动态角色:是配置配置两个权限数组,一个放置当前用户的全部角色,一个放置当前用户的当前角色(即一个时候只能使用一个角色)动态菜单:在每次layout刷新时调当前角色对应的菜单(这个是配置在数据库中,一个角色会给他分配哪些菜单,菜单是由前端先写上全部,然后再自己根据需要来选择)。动态路由:每次获取到菜单时,存入session缓存中,在需要跳转页面时,通过路由守卫(前置)beforeEach,对缓存中的菜单进行递归获取,然后判原创 2021-11-05 16:13:21 · 826 阅读 · 0 评论 -
指定元素全屏与退出全屏,Vue中处理监听esc并修改data数据(监听与作用域问题)
文章目录一、效果二、解决思路三、全屏与退出全屏一、效果解决的问题:vue本身监听不到全屏状态中的esc事件,导致无法修改这个按钮的样式icon和tooltip未全屏时:全屏时:二、解决思路一个重要方法:判断当前是否全屏问题:如果vue本身的话,在esc事件时是不会调用这个方法的/**浏览器当前是否全屏@return {*|boolean}*/export function isFullScreen() {return document.isFullScreen |原创 2021-11-05 15:53:24 · 1102 阅读 · 3 评论 -
处理饼图难以绑定调用接口后的数据(then作用域外使用其中的数据)
一、说下我们这个pie(饼图坑爹之处)它有两种data绑定方式直接绑定到data里<my-chart-pie :data="pieData" style="height:330px" >data() { return { pieData: { columns: ['渠道', '访问量'], rows: [ ['直接访问', 320], ['邮件营销', 302], [原创 2021-10-11 11:35:39 · 316 阅读 · 0 评论 -
记录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 · 2048 阅读 · 0 评论 -
element-ui单文件上传以后,必须刷新(不操作刷新的解决)才能再次上传文件
问题描述 使用element-ui的上传文件组件写一个批量导入,但是发现每次打开上传文件,只有进入页面第一次点击上传文件才调用上传接口,进行文件上传,前思后想,外加百度查询,我解决了这个问题。先上个图片看看问题:下边图片是上传时候打印出来的,当再次上传,没有打印东西,也就是说没有调用上传文件接口 原因 单文件上传以后,data中的fileList,已经放入一个文件了,当你再次上传,并没有清楚本文件或者覆盖上一个文件,导致上传行为并没有执行。 解决办法 上...转载 2021-09-30 11:29:28 · 2306 阅读 · 0 评论 -
前端element组件样式修改思路
一、选择组件这里用el-timeline时间线来举例<template> <div class="block"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type"原创 2021-09-18 09:29:48 · 1618 阅读 · 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 · 488 阅读 · 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 · 303 阅读 · 0 评论 -
关于element-ui的blur事件失效,select的blur的bug,以及row在@blur延迟的解决
文章目录一、blur事件失效二、使用`native`与`capture`让`blur`生效三、关于row,在@blur延迟的问题一、blur事件失效这个blur的生效十分有问题,很多时候都无效,偶尔点击元素内部以及选项的时候突然就生效了<el-select @blur="handleBlur"></el-select>二、使用native与capture让blur生效虽然点击元素内部还是会让blur生效(点开选项隐藏选项的时候生效),但是这能够确保点击元素后,在光原创 2021-08-20 09:52:40 · 7513 阅读 · 0 评论 -
js中数组的递归方法reuduce()
文章目录一、数组原型的递归方法`Array.prototype.reduce()`1、reducer 函数接收4个参数:2、语法3、参数4、 ==官方给出了累加的示例==5、==这是一些示例方法==一、数组原型的递归方法Array.prototype.reduce()reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。1、reducer 函数接收4个参数:Accumulator (acc) (累计器)Current Value原创 2021-08-19 17:32:46 · 1293 阅读 · 0 评论 -
tabs标签页的不同表单验证与绑定
一、不同tab页中的表单验证冲突通过给表单加key,使它们各自的验证不会在另一个标签中显示<template v-slot:tab1><my-form size="small" ref="mForm" key="mForm" label-width="105px" :footerAlign="'righ原创 2021-08-19 16:13:09 · 1334 阅读 · 0 评论 -
组件中混入js,并进行对象样式的相关操作
文章目录一、在混入的`js`中可以操作组件的`data`和`computed`1.==:style加入多个对象样式==2.在factory中进行操作一、在混入的js中可以操作组件的data和computed1.:style加入多个对象样式这是一个 Diagram.vue组件<div ref="content" class="my-go-diagram__content" :style="[contentStyle, myCursor]" >&l原创 2021-08-19 13:09:13 · 123 阅读 · 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 · 2902 阅读 · 0 评论 -
Vue的v-focus无法聚焦el-input,及el-input无法输入的问题
文章目录1、正常聚焦<input type="text" v-focus/>2、el-input聚焦失败<el-input type="text" v-focus ></el-input>3、el-input 聚焦成功<el-input type="text" v-focus ></el-input>directives: { focus: { // 指令的定义 inserted: functio原创 2021-08-12 14:17:12 · 1693 阅读 · 0 评论 -
Vue自定义指令directive(主要是钩子函数及其参数)
文章目录一、自定义指令directive的简介二、全局注册、局部注册三、`钩子函数(五种)`四、钩子函数参数(`el、binding、vnode 和 oldVnode`)五、动态指令参数六、函数简写七、对象字面量一、自定义指令directive的简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。二、全局原创 2021-08-12 13:41:13 · 1475 阅读 · 0 评论 -
Vue表单输入绑定修饰符(.lazy与@change)
文章目录一、修饰符1.1、`.lazy`1.2、`.number`1.3、`.trim`一、修饰符1.1、.lazy在默认情况下,v-model在每次input事件(click等)触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy修饰符,从而转为在 change事件_之后_进行同步:<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg">所以这就是组件@change原形了,原创 2021-08-11 13:39:49 · 1158 阅读 · 0 评论