• 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 ...
  • vue-router配置一个后台管理系统的实例
    2018-10-31 22:54
    vue-router实例Vue.use(Router) export default new Router({   routes: [    {    path:'/manager',    name:'login',    component:Login,    beforeEnter:(to,from,next)=>{ &nb...
  • CopyWebpackPlugin配置vue开发中static静态目录
    2018-10-31 22:35
    CopyWebpackPlugin插件先看一下这个插件在webpack的配置new CopyWebpackPlugin([       {         from: path.resolve(__dirname, '../static'),         to:&nbs...
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1