7 白马非马哥

尚未进行身份认证

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

等级
博文 39
排名 13w+

常用网页加载进度条

素材工具:https://icons8.com/preloaders/https://loading.io/http://autoprefixer.github.io/思路:使用一个空白div固定定位到页面上(z-index设置大一点),内容加载完后隐藏该div<divclass="loading"><divclass="pic">&...

2019-06-03 21:15:21

背景水印

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

2019-05-30 20:11:46

数组对象的去重

数组去重是开发过程中经常遇到的问题,对于普通类型可能newSet[...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:greenred;}...

2019-02-20 22:09:42

echart更换图标

vue项目里面使用了echart绘制图表,当需要更换toolbox默认的图标时,可以采用如下方式;1.引入constdownloadIcon=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样式<ahref="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插件是为应用添加全局功能的一种强大而且简单的方式。插件的用途很广泛,从全局组件,到为应用添加一些额外的功能、如路由(VueRouter),存储在应用程序里的不可变数据(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、动态设置metaviewpoint的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与Historyinterface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的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

process.argv简单了解一下

process 对象是一个全局变量,它提供当前Node.js进程的有关信息,以及控制当前Node.js进程。因为是全局变量,所以无需使用 require()。process.argv 属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数,其中:数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径第二个元素p...

2018-10-27 09:59:01

Object.defineProperty() —— 实现vue双向数据绑定的核心

    前言:vue是一个mvvm前端框架,数据(m)和视图(v)通过vm实现数据双向绑定,即数据的变化会反应到视图上,相反,视图的变化也会反应到视图上,其核心就是用到了Object.defineProperty()方法,其描述符的get和set对数据双向绑定起了关键性的作用,接下来详细进行介绍。   1.语法    Object.defineProperty(obj,...

2018-10-23 22:30:53

使用cordova + vue搭建混合app框架

1.前言:在进行hybridapp开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova丰富的插件调用原生代码,获取设备相关信息、调取手机摄像头等 2.创建cordova项目  1)创建cordova项目  前提:安装node和cordova,安装方式很简单,自行百...

2018-10-18 13:48:06

css伸缩盒子

   传统的布局方式,是基于盒模型,依赖position,float,display等属性。CSS3的伸缩盒子特性,使得布局更加灵活,适应性更强。   CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。一、父容器的一些属性:1.displ...

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