7 白马非马哥

尚未进行身份认证

人如果没有梦想 那和咸鱼有什么区别呢

等级
TA的排名 10w+

基于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

拖动调整面板大小

<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:31:57

一键复制

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

(转载)正则表达式学习笔记

原文出处:https://juejin.im/post/582dfcfda22b9d006b726d11正则表达式学习笔记正则表达式对于我来说一直像黑暗魔法一样的存在。手机正则去网上搜,邮箱正则去网上搜,复杂点的看看文档拼凑一下,再复杂只能厚着脸皮让其他同事给写一个。从来没有系统的学习过,今天准备拿下它。1. 学习目标:了解正则表达式语法在IDE中使用正则表达式在javascript...

2019-07-22 20:02:01

常用网页加载进度条

素材工具: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

背景水印

一句话总结,动态创建canvas,绘制content,将HtmlCanvasElement使用toDataURL()方法,返回一个包含图片展示的data URI,最后创建一个div,设置background-image: url(canvasURI),平铺整个内容区// 水印export const waterMark = function ({ container = docu...

2019-05-30 20:11:46

数组对象的去重

数组去重是开发过程中经常遇到的问题,对于普通类型可能new Set[...array]就可以实现,对于数组元素是对象的去重可能无能为力,这里介绍一种方法,使用数组的reduce()方法。假设一个数组:arr = [{city: 'beijing'},{city: 'shanghai'},{city: 'shenzhen'},{city: 'shanghai'},{cit...

2019-03-26 21:45:58

能巧妙利用css属性border-color制作三角形的原因

网上看了下纯CSS制作三角形的技巧,基本上是使用border-color属性,然后想为什么,发现是如下情况,请看:{border-width:50px;border-style: solid;border-color: green red;}...

2019-02-20 22:09:42

echart更换图标

vue项目里面使用了echart绘制图表,当需要更换toolbox默认的图标时,可以采用如下方式;1.引入 const downloadIcon= require('@/assets/dataview.svg') 转成base64格式 2. 更换图标saveAsImage: { icon: `image://${downloadIcon}`}...

2019-02-14 17:01:27

面板可调整大小resizable(基于vue)

       最近在做vue项目中遇到需要通过拖动面板边缘,动态调整面板宽度的问题,最开始是打算找一个vue组件解决得了,后来想了一下应该也挺简单的就自己实现了。项目中是左右宽度调整,这里只介绍左右面板resizable,上下调整原理是一样的。       思路:       step1、在左右面板之间添加一个div,div样式如下:.resizable-widget { pos...

2019-01-28 20:49:58

css实现一个编辑区全屏切换

使用codeMirror做一个编辑区的时候,随着编辑区内容的增多,仅有宽度或高度不便于编写内容,如果能够在编辑的时候全屏切换就再好不过了。思路:将编辑区域采用fixed定位,宽度、高度均设置为100%,设置一个够用的z-index,假定该class为"editor-fullScreen"将放大、缩小两个button也采用fixed定位,z-index稍大于编辑区域值,点击放大,添加cl...

2019-01-24 17:03:14

win10 shift鼠标右键 cmd变成powershell,改回显示cmd

三步走策略:第一步:打开注册表编辑器  win+R 输入 regedit第二步:找到“计算机\HKEY_CLASSES_ROOT\Directory\Background\shell”第三步:找到cmd,右键权限,管理员权限设置为“完全控制”               “HideBasedOnVelocityId”重命名“ShowBasedOnVelocityId”,即显示在sh...

2019-01-09 14:38:48

简短一篇记录一下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

使用vuex状态管理的modules进行分模块管理

情景:对于一个使用vue.js框架的大型的项目,如果项目中有好几个不同的业务模块,在数据共享的时候往往会使用vuex状态管理,在vuex中如果不进行模块化管理,store对象可能就变得非常臃肿,不仅不利于维护,也可能导致不同业务系统之间共享数据导致失误。解决:独立维护一个公共仓库store,将一些各业务系统或项目共享的数据放到里面,然后根据业务系统单独维护一个store模块(module),每...

2018-12-12 13:23:38

【转载】Vue.js插件开发

Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛,从全局组件,到为应用添加一些额外的功能、如路由(Vue Router),存储在应用程序里的不可变数据(Vuex)。一般来说,Vue插件的开发是非常简单的。Vue插件仅仅是包含一个公开方法install的对象、这个方法有两个参数:Vue 构造器和一个可选的选项对象。尽管,插件系统看起来十分简单,但其仍然可以...

2018-12-06 17:56:06

记录使用iframe嵌入第三方url页面时遇到的问题

需求:需要在iframe中嵌入第三方url,该url需要访问视频和音频以为只需要<iframesrc="url"style="width:100%;height:99%"frameborder="0"></iframe>,然后使用http://lan-ip:port就万事大吉了,没想到出现了如下两个问题:问题1:F12查看错误提示:Onlysecure...

2018-12-03 19:32:46

关于移动端自适应屏幕几种方法浅析

       屏幕自适应说白了是指我们写的网页能够在不同屏幕大小的移动设备上自动调整元素的大小,常见的有几种方法,如rem自适应、使用媒体查询@media、动态设置meta viewpoint的device及minimum-scale、maximum-scale大小等方法。       1、rem自适应(js方式)        rem是相对于根元素(html)的font-size大小,因...

2018-11-28 19:45:34

[转载]从源码的角度分析vue-router前端路由两种实现方式

原文地址:https://zhuanlan.zhihu.com/p/27588422本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页...

2018-10-31 14:17:12

vuex状态管理使用

1.前言:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以理解为一个共享仓库,可以实现多个组件共享状态。每一个 Vuex 应用的核心就是 store(仓库),两个特点:1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新;2)改变 store 中的状态的唯一途...

2018-10-27 16:40:50

vue-router路由元信息meta

1. 前言:在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等,虽然可以采用路由匹配的方式 if(to.path === '/url'),很显然当需要验证的路由较多时,会增加太多的if判断,这不利于代码维护,此时可在定义路由的时候可以配置 meta 字段,通过设置一些属性值,可以便于我们对当前的路由做一...

2018-10-27 16:05:48

查看更多

勋章 我的勋章
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。