input file结合vue3和vant实现上传图片效果,并显示上传进度百分比%,使用onUploadProgress input file结合vue3和vant实现上传图片效果,并显示上传进度百分比%
vue项目PC端开发,当内容滚动到最顶部时按住鼠标下拉刷新,滚动到最底部时,自动加载更多数据 找了好几个网友发的代码,为什么都不符合呢。。。难道是本人太菜??只好自己写一个了。。。废话不多说,直接上demo。其中的节流,使用了lodash的throttle方法其他注意的地方,可以看注释。如有帮助,请点个赞,谢谢!<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"&
前端fabric.js绘制多张图片,并通过mycanvas.toDataURL获取base64转换后,进行分割切割生成多个canvas图片 实现思路如下:通过fabric.js绘制多张图片,同理这一步也可以直接使用canvas绘制多张图片; 通过save()将整个绘制的canvas的内容转成base64数据,然后onload方法后对图片进行剪切操作; 分割的方法主要就是canvas的putImageData以下为代码demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="v
去除vue路由链接中的#号 只需要在vue-router配置的时候添加即可const router = new VueRouter({ mode: 'history', routes // (缩写)相当于 routes: routes})
findIndex方法的使用,返回索引值 findIndex方法的使用,返回索引值 const arr2 = [{ "corrected": [1, 2, 3, 4], "piece": 11, "pieceName": "数据1", "uncorrected": [10, 2, 3, 4] }, { "corrected": [1, 2, 3, 4], "piece": 22, "pieceName": "数据2", "uncorr
JS合并数组对象中重复数据 参考链接为:https://www.jianshu.com/p/c50515d369c4实际项目demo如下: var oldData = [ { "classid": 219, "classname": "(01)班", "gradeid": 7, "gradename": "初中一年级", }, { "classid": 224, "classname": "(02)班", "grad
typescript 对dom操作展开和隐藏 判断展开/收起的dom显示和隐藏,小于68隐藏功能获取dom结构,页面数据page_list const dom_text = document.querySelectorAll('.circular_text') as any; const heights: any = []; dom_text.forEach((item: any, index: number) => { // console.log(item.offsetHeight......
匹配两个数组,把相同的元素删除 var all_name = [{ "name": "A组", "crpMembersList": [] }, { "name": "B组", "crpMembersList": [] }, { "name": "C组", "crpMembersList": [] }, { "name": "D组", "crpMembersList": [] }, { "name": "E组", "crpMembersLi...
判断内容是否滚动到底部的demo <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } </style> </head> <body&g.
vue的页面方法挂载到全局,便于其他跨端平台调用 需求:难点:解决办法:需求:.net开发组嵌套vue的前端页面,调用其中某一个页面的方法,并传递参数进来,进行数据接口调用,并刷新vue接口数据;难点:.net只能调用整个项目的全局方法,故页面的方法要放在全局才能被调用(当时这个问题比较麻烦,虽然方法放在了全局,但是.net却不能调用)解决办法:1、.net端和前端统一调用方法的名字,如:search();如图1所示,其中,vueTest()是单独的vue挂载到全局的方法,挂载方法见32、前端将这个方法放在项目文件p
selecte 标签获取当前的选中值,通过 onchange事件获取相应的参数 html内容<select id="linewidth" onchange="line_Width(this)"> <option value="1" slected="slected">a</option> <option value="3">b</option> <option value="5">c</option> <option value="10">d</o
根据教程写的原生js的拖拽事件 根据智能社的教程,写的demo。主要是看网上的很多都有各种各样的bug,这是在上大学期间看的视频教程,现在拿出来在这里做个备注;各位同行有用到的请点个赞再走给右下角的红色区域添加拖拽事件具体的demo如下:<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <
判断一个js值是否为数字,并且不能为负数,如果有小数的话,不能多于2位 在匆忙中写了个校验数字的方法,以下为demo,验证的条件是:数值为数字,不能为负数,如果有小数,那么最多有2位小数。代码如下: var oValue = '-141'; // 字符串或者数字都可以 if (checkNumRule(oValue)) { console.log('是数字,并且大于0,小数点最多有两个'); } else { console.log('不符合验证规则'); .
接上一篇 分享类型1function downloadImg(img) { var fs = api.require('fs'); fs.exist({ path: 'fs://image/shareImg.png' }, function(ret, err) { if(ret.exist) {...