- 博客(50)
- 收藏
- 关注
RSS订阅原创 monaco editor 代码编辑器全屏切换
思路给全屏、恢复两个操作分别绑定监听事件，在事件回调函数中做对应的操作；利用了Monaco editor 的layout()函数，在调用的过程中，动态传递width和height实现全屏和恢复初始的功能预览实现// css操作.editor-fullscreen { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100% !import
2020-08-05 19:43:53
3599
1
原创 svg技术绘制血缘关系
说明项目中需要绘制作业血缘图，网上调研了下也没有找到合适的轮子，于是就自己撸了，这里只有一层依赖关系，及父与子作业。思路根据后端返回的接口数据，计算每个节点的位置坐标，根据节点文本内容计算每个节点的宽度，高度固定。得到这些位置信息后，借用svg的path标签绘制出本依赖关系图。预览 实现（代码写得比较粗糙，需要整体，这里贴个初版）接口返回的数据结构如下：代码实现：// dag.jsconst SVG_NS = 'http://www.w3.org/2000/svg'export c.
2020-08-05 19:34:26
1375
原创 monaco editor编辑器代码diff的实现
背景利用monaco editor这款编辑器做代码比较，支持sql、shell、python脚本及json字符串效果图代码CodeDiffEditor.vue<template> <div class="the-code-diff-editor-container" ref="diffContainer"> </div></template><script>import * as monaco from 'monaco
2020-07-10 18:17:30
5903
5
原创 使用extraCssText解决echarts图中tooltip文本内容太长
问题描述：echarts图中tooltip文本内容太长在用echarts绘制折线图时，可能会遇到seriesName太长，导致tooptip显示不全，多余的文本被隐藏的问题，如下：提供两种方法解决该问题：方法1：格式化重新输出，使用tooltip的formatter配置项，格式化输出，网上很多例子可使用，可自行参考方法2：使文本支持换行展示，使用tooltip的extraCssText配置项，给tooltip添加样式即可，简单方便 tooltip: { trigger: 'axis',
2020-06-10 16:55:36
6039
原创 关于vue-router中scrollBehavior方法滚动行为的使用
好处当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置}参数说明：to, from都是路由对象；savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。案例使用场景：项目中经常会遇到异步请求接口数据，这些异步操作通常会放在created、mounted钩子里面分析：通过在不同的生命周期钩子和s
2020-06-02 20:55:57
6247
原创 滚动加载解决el-table是数据量大加载缓慢的问题
window.addEventListener('resize', () => { this.bindingScrollEvent() this.getTableHeight() })......// 回到列表顶部 backTop () { this.$refs.taskTable.bodyWrapper.scrollTop = 0 },// 监听滚动事件（） bindingScrollEvent () { let
2020-05-25 18:02:06
5265
原创 git合并某次提交到某个分支
git合并某次提交到某个分支起因有时候在merge完代码后，可能会忘记切换回原有分支，此时巴拉巴拉写了一堆代码，准备提交的时候，发现不是自己的开发分支，而且无法切换。如feature/dqc分支提交的代码，切换到develop分支后，merge；然后继续在develop上进行开发解决1，将develop上尚未提交的代码提交，然后push2，git log，查出本次提交的commit id（eg: f7168eb6b564c349ab9c4828aac126827a754b21）3, 切换回fe
2020-05-25 17:55:28
367
原创 基于vue的monaco-editor使用
说明：本文主要介绍文本编辑器monaco-editor结合vue的使用单独封装一个基础组件：CodeEditor.vue<template> <div class="the-code-editor-container" ref="container"></div></template><script>// 编...
2019-11-26 20:10:30
3486
1
原创 拖动调整面板大小
<template><div class="the-datasource-container" ref="dataSourceDom"><div class="left-box" :style="{'width': leftWidth + 'px'}">左侧</div><div class="resize-bar" :sty...
2019-11-04 15:33:40
246
原创 一键复制文本内容
span等非输入控件一键复制：sqlCopy () { const input = document.createElement('input') input.setAttribute('readonly', 'readonly') input.setAttribute('value', this.data) document.body.appendCh...
2019-08-07 21:17:25
2425
转载 （转载）正则表达式学习笔记
原文出处：https://juejin.im/post/582dfcfda22b9d006b726d11正则表达式学习笔记正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜，邮箱正则去网上搜，复杂点的看看文档拼凑一下，再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过，今天准备拿下它。1. 学习目标：了解正则表达式语法在IDE中使用正则表达式在javascript...
2019-07-22 20:02:01
201
原创 常用网页加载进度条
素材工具：https://icons8.com/preloaders/https://loading.io/http://autoprefixer.github.io/思路：使用一个空白div 固定定位到页面上（z-index设置大一点），内容加载完后隐藏该div<div class="loading"> <div class="pic"> &...
2019-06-03 21:15:21
735
原创 背景水印
一句话总结，动态创建canvas，绘制content，将HtmlCanvasElement使用toDataURL()方法，返回一个包含图片展示的data URI，最后创建一个div，设置background-image: url(canvasURI)，平铺整个内容区// 水印export const waterMark = function ({ container = docu...
2019-05-30 20:11:46
321
原创 数组对象的去重
数组去重是开发过程中经常遇到的问题，对于普通类型可能new Set[...array]就可以实现，对于数组元素是对象的去重可能无能为力，这里介绍一种方法，使用数组的reduce()方法。假设一个数组:arr = [{city: 'beijing'},{city: 'shanghai'},{city: 'shenzhen'},{city: 'shanghai'},{cit...
2019-03-26 21:45:58
160
原创 能巧妙利用css属性border-color制作三角形的原因
网上看了下纯CSS制作三角形的技巧，基本上是使用border-color属性，然后想为什么，发现是如下情况，请看：{border-width:50px;border-style: solid;border-color: green red;}...
2019-02-20 22:09:42
340
原创 echart更换图标
vue项目里面使用了echart绘制图表，当需要更换toolbox默认的图标时，可以采用如下方式;1.引入 const downloadIcon= require('@/assets/dataview.svg') 转成base64格式 2. 更换图标saveAsImage: { icon: `image://${downloadIcon}`}...
2019-02-14 17:01:27
1140
原创 面板可调整大小resizable（基于vue）
最近在做vue项目中遇到需要通过拖动面板边缘，动态调整面板宽度的问题，最开始是打算找一个vue组件解决得了，后来想了一下应该也挺简单的就自己实现了。项目中是左右宽度调整，这里只介绍左右面板resizable，上下调整原理是一样的。 思路： step1、在左右面板之间添加一个div，div样式如下：.resizable-widget { pos...
2019-01-28 20:49:58
7832
原创 css实现一个编辑区全屏切换
使用codeMirror做一个编辑区的时候，随着编辑区内容的增多，仅有宽度或高度不便于编写内容，如果能够在编辑的时候全屏切换就再好不过了。思路：将编辑区域采用fixed定位，宽度、高度均设置为100%，设置一个够用的z-index，假定该class为"editor-fullScreen"将放大、缩小两个button也采用fixed定位，z-index稍大于编辑区域值，点击放大，添加cl...
2019-01-24 17:03:14
508
原创 win10 shift鼠标右键 cmd变成powershell，改回显示cmd
三步走策略：第一步：打开注册表编辑器 win+R 输入 regedit第二步：找到“计算机\HKEY_CLASSES_ROOT\Directory\Background\shell”第三步：找到cmd，右键权限，管理员权限设置为“完全控制” “HideBasedOnVelocityId”重命名“ShowBasedOnVelocityId”，即显示在sh...
2019-01-09 14:38:48
4300
1
原创 简短一篇记录一下css3中pointer-events属性禁用a标签以及鼠标穿透
pointer-events是css3的一个属性，属性值特别多，这里只记录下none、auto两个属性的使用，其它属性和svg相关。案例1：禁用a标签点击给a标签设置pointer-events:none样式<a href="XXX" style="pointer-events:none; opacity: 0.5">你点击我没反应，哈哈</a>但，此时键盘...
2018-12-19 11:40:46
1242
原创 使用vuex状态管理的modules进行分模块管理
情景：对于一个使用vue.js框架的大型的项目，如果项目中有好几个不同的业务模块，在数据共享的时候往往会使用vuex状态管理，在vuex中如果不进行模块化管理，store对象可能就变得非常臃肿，不仅不利于维护，也可能导致不同业务系统之间共享数据导致失误。解决：独立维护一个公共仓库store，将一些各业务系统或项目共享的数据放到里面，然后根据业务系统单独维护一个store模块（module），每...
2018-12-12 13:23:38
3270
转载 【转载】Vue.js插件开发
Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛，从全局组件，到为应用添加一些额外的功能、如路由(Vue Router)，存储在应用程序里的不可变数据(Vuex)。一般来说，Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数：Vue 构造器和一个可选的选项对象。尽管，插件系统看起来十分简单，但其仍然可以...
2018-12-06 17:56:06
137
原创 记录使用iframe嵌入第三方url页面时遇到的问题
需求:需要在iframe中嵌入第三方url，该url需要访问视频和音频以为只需要 <iframe src="url" style="width:100%; height:99%" frameborder="0"></iframe>，然后使用http://lan-ip:port就万事大吉了，没想到出现了如下两个问题：问题1：F12查看错误提示：Only secure ...
2018-12-03 19:32:46
7192
原创 关于移动端自适应屏幕几种方法浅析
屏幕自适应说白了是指我们写的网页能够在不同屏幕大小的移动设备上自动调整元素的大小，常见的有几种方法，如rem自适应、使用媒体查询@media、动态设置meta viewpoint的device及minimum-scale、maximum-scale大小等方法。 1、rem自适应（js方式） rem是相对于根元素（html）的font-size大小，因...
2018-11-28 19:45:34
2243
转载 [转载]从源码的角度分析vue-router前端路由两种实现方式
原文地址：https://zhuanlan.zhihu.com/p/27588422本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页...
2018-10-31 14:17:12
312
原创 vuex状态管理使用
1.前言：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，可以理解为一个共享仓库，可以实现多个组件共享状态。每一个 Vuex 应用的核心就是 store（仓库），两个特点：1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新；2）改变 store 中的状态的唯一途...
2018-10-27 16:40:50
342
原创 vue-router路由元信息meta
1. 前言：在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等，虽然可以采用路由匹配的方式 if(to.path === '/url')，很显然当需要验证的路由较多时，会增加太多的if判断，这不利于代码维护，此时可在定义路由的时候可以配置 meta 字段，通过设置一些属性值，可以便于我们对当前的路由做一...
2018-10-27 16:05:48
4220
原创 process.argv简单了解一下
process 对象是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。 因为是全局变量，所以无需使用 require()。process.argv 属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数，其中：数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径第二个元素p...
2018-10-27 09:59:01
23137
1
原创 Object.defineProperty() —— 实现vue双向数据绑定的核心
前言：vue是一个mvvm前端框架，数据（m）和视图（v）通过vm实现数据双向绑定，即数据的变化会反应到视图上，相反，视图的变化也会反应到视图上，其核心就是用到了Object.defineProperty()方法，其描述符的get和set对数据双向绑定起了关键性的作用，接下来详细进行介绍。 1. 语法 Object.defineProperty(obj,...
2018-10-23 22:30:53
367
原创 使用cordova + vue搭建混合app框架
1. 前言：在进行hybrid app开发时，可以采用vue.js前端框架进行h5页面开发，然后使用跨平台cordova工具打包成app，如android或ios等，再h5页面也可以使用cordova丰富的插件调用原生代码，获取设备相关信息、调取手机摄像头等 2. 创建cordova项目 1） 创建cordova项目 前提：安装node和cordova，安装方式很简单，自行百...
2018-10-18 13:48:06
7241
3
原创 css伸缩盒子
传统的布局方式，是基于盒模型，依赖position，float，display等属性。CSS3的伸缩盒子特性，使得布局更加灵活，适应性更强。 CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。一、父容器的一些属性：1. displ...
2018-10-17 23:12:15
4104
原创 es6模块export和import使用总结
一个模块就是一个文件，其它文件是无法获取这个模块里面的变量，如果需要外面的文件也能够读取这些变量，你可以使用export输出变量，外面的文件则import这个模块的变量。1. export导出模块变量 export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错 导出变量有两种方式 1） 单个分别导出每一个变量 export con...
2018-10-11 18:03:49
2569
原创 提升移动端响应区域大小
css技术储备：1. background-origin: 设置背景坐标的原点，规定 background-position 属性相对于什么位置来定位。默认值是left top左上角 1）border-box：从border的位置开始填充背景，会与border重叠； 2）padding-box：从padding的位置开始填充背景，会与padding重叠；...
2018-10-09 22:33:53
701
原创 css浮动，闭合浮动
1. 网站的结构就是由两部分（横向和纵向排列），如果是纵向的，就是正常的文档流，此时只用设置内容区的宽度、高度、padding、margin、border即可；如果是横向排列，就需要使用浮动float技术 2. float: left/right 浮动的特点： 设置浮动的元素不占空间 设置浮动的元素层级高普通...
2018-10-09 22:30:32
238
原创 css定位总结
定位position: static（默认）、fixed（固定定位）、absolute（绝对定位）、relative（相对定位）、sticky（粘性定位）1. fixed 特点：不占空间、不随滚动条移动 相对于浏览器窗口进行定位，不占空间； 如果不设置定位坐标，则就在原来的位置； 如果结合定位坐标，就是相对于目标位置的距离； 层级要比普通标签...
2018-10-09 22:06:14
1111
原创 vue-devtools调试工具安装
chrome浏览器安装vue-devtools插件由于vue是数据驱动的，所以这就存在在开发调试中查看DOM结构并不能解析出什么。但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试1. 准备： vue-devtools插件下载地址：https://github.com/vuejs/vue-devtools 我下载的是vue-devtools-...
2018-10-08 20:01:53
370
原创 浏览器工作原理简介
浏览器的主要功能是将用户从服务器请求的资源显示在浏览器窗口中。1. 浏览器的主要组成 人机交互部分（UI） 网络请求部分 js引擎部分（用于解析执行js） 渲染引擎部分（渲染html、css） 数据存储部分（cookie、localStorage、sessionStorage等）2. 浏览器内核（渲染引擎）工作原理用下面这个webkit...
2018-10-07 21:34:23
221
原创 ES6 Promise对象使用浅谈
1.Promise是什么？ Promise是异步编程的一种解决方案，它是一个构造函数，接受一个函数作为参数，该函数的两个参数分别是resolve和reject。因此可以用new Promise()得到一个Promise实例，它能够解决传统的回调函数嵌套带来的回调地狱问题。 Promise对象代表一种异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、rejecte...
2018-10-07 21:33:01
340
原创 css3新增选择器
前提： E——表示element元素 data——表示属性1. 属性选择器 E[data] —— 选择带有data属性的元素对象 E[data="one"] —— 选择带有data属性的元素对象且属性值为one E[data^="o"] —— 选择带有data属性的元素对象且属性以o开头 E[data$="e"] —— 选择带有dat...
2018-10-07 21:04:54
842
原创 html5拖拽api
1.前言：在html5中，如果想拖拽元素，就必须为元素添加 draggable="true"属性，图片和超链接不用添加该属性，默认是可以被拖拽的。2.拖拽事件1）被拖拽元素事件 ondrag: 整个拖拽过程都会调用—持续触发 ondragstart: 拖拽开始时调用 ondragleave: 鼠标离开拖拽元素时调用 ondragend: 拖拽结束...
2018-10-07 20:33:38
443
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人