• Vue实现Popper跟随弹出层,添加到body中,不受父级元素影响的方式
    2019-07-23 16:04
    前言像element中的这种自定义select,实有一个弹出层跟随一个input输入框。为了能让他看起来更像真的select,我们就需要把弹出层添加到body元素中。因为如果不这样的话,如果input输入框的父元素有一个overflow:hidden样式,那么这个弹出层可能就会显示不全。vue组件中弹出层添加到body中这个弹出层在jqeury实现中添加到body中我们轻车熟路。那么在vue的组件中,我们又该怎么做,才能将弹出层添加到body元素中呢。或者我们可以写一个vue的跟随弹出层组件,方便所有需要跟随弹出层的地方来使用。ele...
  • 通过Set对象便捷判断所选格子和已占用的格子是否冲突
    2019-07-23 15:36
    应用场景像上面这种需求,就是会议室管理。已有的会议会占用一定的时间段。这时候我们通过拖动的方式来选择时间段创建新的会议的时候,就需要新的会议的时间段和已有会议的时间段不能冲突。我们就需要像上面这样判断多种情况下的冲突。这样的话,我们就需要写很多if...else...,或者switch...case..,甚是麻烦。巧用Set判断时间段冲突ES6中提供了一个Set对象,是一个iterable可遍历的对象。Set对象跟Array对象很类似,最主要的区别就是Set对象中的元素不能重复。类似的代码如下:let stime=8; le...
  • vue transition实现展开收起动画
    2019-05-21 21:52
    Vue中transition实现展开收起动画transition是vue提供用来实现过渡动画的,可以轻松实现排序,删除,新增等各种动画。但是最近使用transition来实现展开,收起动画时,发现最简便的设置height属性的transition过渡是不起作用的。这种情况是基于我们不知道容器div的高度的情况下。如果div的高度是既定的,那么通过transition实现展开收起动画是能轻松搞定的。对于不定高的div的展开收起动画,我们就需要借助transition的回调函数来来实现了。不啰嗦,直接看代码<template>...
  • 获取图片base64编码/预览图片
    2019-04-17 21:49
    获取图片base64编码的方法 let img = new image();  let dataURL;  img.onload=function(){       var canvas = document.createElement("canvas");       canvas.wi...
  • vue多级权限组件的实现
    2019-04-07 00:34
    首先实现递归checkbox的组件假定,我们要实现的权限组件效果是这样的:要实现点击系统,下面的都全选,点击基础功能,用户管理半选,系统半选。点击新增组织,如果基础功能没有选中,则基础功能改为选中。<template> <div class="permit_cont"> <div v-if="datas.childResoList.length>0" :class="{'top_check':datas...
  • canvas实现贪吃蛇小游戏
    2019-03-07 22:50
    canvas实现贪吃蛇小游戏贪吃蛇小游戏体验点击体验通过画布实现的贪吃蛇小游戏。游戏效果如下:小游戏的源码如下:<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minim...
  • 百度地图自定义图层实现海量点聚合
    2019-03-04 23:07
    百度地图自定义图层    百度地图开发中,地图的覆盖层提供我们往往根据实际项目的需求来展现符合产品的覆盖物,以此来契合整个系统的UI风格等。简单的开发,可以使用百度地图提供的marker,InfoWindow,Label等来实现基本的点位标注,信息展示的。但对于复杂的需求,我们就需要通过自定义覆盖层来实现了。   下面我们看一下自定义覆盖的实现方式://1,定义一个覆盖物,原型指向BMap的Overlay对象。 function myOver(pt){   &nbs...
  • web断点续传的原理和实现
    2018-11-03 01:00
    断点续传所谓断点续传,前提是上传文件为大文件,如果文件较小,则体现不出断点续传的优势。断点续传大文件的优势:1、文件上传过程中上传了一半,网络中断,再次上传可以从上次中断处开始上传,节省带宽和上传时间。2、由于断点续传需要验证文件的hash,可以避免相同文件多次上传,节约服务器存储空间,节约用户操作时间,加上友好提示,可以提高用户的体验度。断点续传的实现过程:1、java服务器端我们只做简单介绍,需要实现一个两个接口,一个用来查询对应hash的文件是否已经上传,如果上传,上传了多少,是否完成。另一个接口用来保存上传的内容到文件里面,如...
  • spark-md5生成hash码,spark-md5计算大文件hash码实现断点续传
    2018-11-01 23:19
    spark-md5import SparkMD5 from 'spark-md5'; var hexHash = SparkMD5.hash('Hi there');        // hex hash var rawHash = SparkMD5.hash('Hi there'...
  • webpack结合worker-loader来使用webworker
    2018-11-01 22:57
    web workerweb worker是js中启动的子线程,不能操作dom和windows对象,但是可以执行ajax,处理复杂数据,如二进制blob数据,或者websocket连接,worker和主线程通过postMessage和onmessage进行通信。本文不是主要介绍worker,主要讲webpack中如何使用web workerworker-loaderwebpack中提供了一个loader叫做worker-loader,用来实现web worker的功能。第一步需要install worker-loadernpm ...
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1