前端
文章平均质量分 61
异乡原子
人如果没有梦想 那和咸鱼有什么区别呢
展开
-
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 · 3619 阅读 · 1 评论 -
svg技术绘制血缘关系
说明项目中需要绘制作业血缘图,网上调研了下也没有找到合适的轮子,于是就自己撸了,这里只有一层依赖关系,及父与子作业。思路根据后端返回的接口数据,计算每个节点的位置坐标,根据节点文本内容计算每个节点的宽度,高度固定。得到这些位置信息后,借用svg的path标签绘制出本依赖关系图。预览 实现(代码写得比较粗糙,需要整体,这里贴个初版)接口返回的数据结构如下:代码实现:// dag.jsconst SVG_NS = 'http://www.w3.org/2000/svg'export c.原创 2020-08-05 19:34:26 · 1380 阅读 · 0 评论 -
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 · 5918 阅读 · 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 · 6048 阅读 · 0 评论 -
关于vue-router中scrollBehavior方法滚动行为的使用
好处当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置}参数说明:to, from都是路由对象;savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。案例使用场景:项目中经常会遇到异步请求接口数据,这些异步操作通常会放在created、mounted钩子里面分析:通过在不同的生命周期钩子和s原创 2020-06-02 20:55:57 · 6255 阅读 · 0 评论 -
滚动加载解决el-table是数据量大加载缓慢的问题
window.addEventListener('resize', () => { this.bindingScrollEvent() this.getTableHeight() })......// 回到列表顶部 backTop () { this.$refs.taskTable.bodyWrapper.scrollTop = 0 },// 监听滚动事件() bindingScrollEvent () { let原创 2020-05-25 18:02:06 · 5268 阅读 · 0 评论 -
基于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 · 3490 阅读 · 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 · 247 阅读 · 0 评论 -
一键复制文本内容
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 · 2426 阅读 · 0 评论 -
常用网页加载进度条
素材工具: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 阅读 · 0 评论 -
背景水印
一句话总结,动态创建canvas,绘制content,将HtmlCanvasElement使用toDataURL()方法,返回一个包含图片展示的data URI,最后创建一个div,设置background-image: url(canvasURI),平铺整个内容区// 水印export const waterMark = function ({ container = docu...原创 2019-05-30 20:11:46 · 324 阅读 · 0 评论 -
数组对象的去重
数组去重是开发过程中经常遇到的问题,对于普通类型可能new Set[...array]就可以实现,对于数组元素是对象的去重可能无能为力,这里介绍一种方法,使用数组的reduce()方法。假设一个数组:arr = [{city: 'beijing'},{city: 'shanghai'},{city: 'shenzhen'},{city: 'shanghai'},{cit...原创 2019-03-26 21:45:58 · 160 阅读 · 0 评论 -
echart更换图标
vue项目里面使用了echart绘制图表,当需要更换toolbox默认的图标时,可以采用如下方式;1.引入 const downloadIcon= require('@/assets/dataview.svg') 转成base64格式 2. 更换图标saveAsImage: { icon: `image://${downloadIcon}`}...原创 2019-02-14 17:01:27 · 1143 阅读 · 0 评论 -
css实现一个编辑区全屏切换
使用codeMirror做一个编辑区的时候,随着编辑区内容的增多,仅有宽度或高度不便于编写内容,如果能够在编辑的时候全屏切换就再好不过了。思路:将编辑区域采用fixed定位,宽度、高度均设置为100%,设置一个够用的z-index,假定该class为"editor-fullScreen"将放大、缩小两个button也采用fixed定位,z-index稍大于编辑区域值,点击放大,添加cl...原创 2019-01-24 17:03:14 · 517 阅读 · 0 评论 -
关于移动端自适应屏幕几种方法浅析
屏幕自适应说白了是指我们写的网页能够在不同屏幕大小的移动设备上自动调整元素的大小,常见的有几种方法,如rem自适应、使用媒体查询@media、动态设置meta viewpoint的device及minimum-scale、maximum-scale大小等方法。 1、rem自适应(js方式) rem是相对于根元素(html)的font-size大小,因...原创 2018-11-28 19:45:34 · 2244 阅读 · 0 评论 -
process.argv简单了解一下
process 对象是一个全局变量,它提供当前 Node.js 进程的有关信息,以及控制当前 Node.js 进程。 因为是全局变量,所以无需使用 require()。process.argv 属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数,其中:数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径第二个元素p...原创 2018-10-27 09:59:01 · 23192 阅读 · 1 评论 -
Object.defineProperty() —— 实现vue双向数据绑定的核心
前言:vue是一个mvvm前端框架,数据(m)和视图(v)通过vm实现数据双向绑定,即数据的变化会反应到视图上,相反,视图的变化也会反应到视图上,其核心就是用到了Object.defineProperty()方法,其描述符的get和set对数据双向绑定起了关键性的作用,接下来详细进行介绍。 1. 语法 Object.defineProperty(obj,...原创 2018-10-23 22:30:53 · 369 阅读 · 0 评论 -
改变radio默认样式
默认的,单选按钮radio类型的input元素会渲染成如下样式:若想修改成如下风格的单选按钮:那么,如何修改radio的默认样式呢?html页面:三步:1)、隐藏type="radio"的input标签,隐藏方式有多种,这里采用:2)、利用::before伪元素给label标签添加样式3)、利用::before伪元素给选择的radio对应的label...原创 2018-09-26 21:37:29 · 23138 阅读 · 4 评论 -
利用es6的padStart()方法和模板字符串对时间填充两位数(补0)
需求:在js中获取时间的时候往往需要进行格式化且需要对某些时间值进行前面补0的操作,传统方式是字符串拼接,如下:现在采用es6提供的padStart()方法和字符串模板进行填充:...原创 2018-09-26 21:45:34 · 6363 阅读 · 0 评论 -
es6模块export和import使用总结
一个模块就是一个文件,其它文件是无法获取这个模块里面的变量,如果需要外面的文件也能够读取这些变量,你可以使用export输出变量,外面的文件则import这个模块的变量。1. export导出模块变量 export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错 导出变量有两种方式 1) 单个分别导出每一个变量 export con...原创 2018-10-11 18:03:49 · 2573 阅读 · 0 评论 -
html <a></ a>标签使用总结
< a href=”链接的地址”>链接文本</>1、属性: 1) href=“url”的作用绝对地址(协议类型一定要加上):< a href=”http://www.baidu.com”>百度</ a> < a href=...原创 2018-09-27 21:49:50 · 11450 阅读 · 0 评论 -
css伸缩盒子
传统的布局方式,是基于盒模型,依赖position,float,display等属性。CSS3的伸缩盒子特性,使得布局更加灵活,适应性更强。 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。一、父容器的一些属性:1. displ...原创 2018-10-17 23:12:15 · 4113 阅读 · 0 评论 -
使用css的position和transform实现任意元素居中
一个案例:使用css的position和transform实现任意元素居中(方块位于圆的中心)代码:效果图:原创 2018-10-07 20:07:03 · 2457 阅读 · 0 评论 -
html5拖拽api
1.前言:在html5中,如果想拖拽元素,就必须为元素添加 draggable="true"属性,图片和超链接不用添加该属性,默认是可以被拖拽的。2.拖拽事件1)被拖拽元素事件 ondrag: 整个拖拽过程都会调用—持续触发 ondragstart: 拖拽开始时调用 ondragleave: 鼠标离开拖拽元素时调用 ondragend: 拖拽结束...原创 2018-10-07 20:33:38 · 443 阅读 · 0 评论 -
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 · 843 阅读 · 0 评论 -
ES6 Promise对象使用浅谈
1.Promise是什么? Promise是异步编程的一种解决方案,它是一个构造函数,接受一个函数作为参数,该函数的两个参数分别是resolve和reject。因此可以用new Promise()得到一个Promise实例,它能够解决传统的回调函数嵌套带来的回调地狱问题。 Promise对象代表一种异步操作,有三种状态:pending(进行中)、fulfilled(已成功)、rejecte...原创 2018-10-07 21:33:01 · 340 阅读 · 0 评论 -
浏览器工作原理简介
浏览器的主要功能是将用户从服务器请求的资源显示在浏览器窗口中。1. 浏览器的主要组成 人机交互部分(UI) 网络请求部分 js引擎部分(用于解析执行js) 渲染引擎部分(渲染html、css) 数据存储部分(cookie、localStorage、sessionStorage等)2. 浏览器内核(渲染引擎)工作原理用下面这个webkit...原创 2018-10-07 21:34:23 · 222 阅读 · 0 评论 -
css定位总结
定位position: static(默认)、fixed(固定定位)、absolute(绝对定位)、relative(相对定位)、sticky(粘性定位)1. fixed 特点:不占空间、不随滚动条移动 相对于浏览器窗口进行定位,不占空间; 如果不设置定位坐标,则就在原来的位置; 如果结合定位坐标,就是相对于目标位置的距离; 层级要比普通标签...原创 2018-10-09 22:06:14 · 1113 阅读 · 0 评论 -
css浮动,闭合浮动
1. 网站的结构就是由两部分(横向和纵向排列),如果是纵向的,就是正常的文档流,此时只用设置内容区的宽度、高度、padding、margin、border即可;如果是横向排列,就需要使用浮动float技术 2. float: left/right 浮动的特点: 设置浮动的元素不占空间 设置浮动的元素层级高普通...原创 2018-10-09 22:30:32 · 238 阅读 · 0 评论 -
提升移动端响应区域大小
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 阅读 · 0 评论 -
混合型APP集成微信支付,及填坑
公司开发的某app需要集成微信支付功能,在集成过程中也是遇到了很多坑,特此记录下这些填坑的过程(仅记录android版)1. 环境:混合app框架:cordova 8.0.0cordova create 项目名 包名(需要和微信开放平台填写的一致) app名微信支付cordova插件:cordova-plugin-wechat 2.1.0cordova-plugin-wech...原创 2018-09-21 11:26:56 · 2314 阅读 · 1 评论