- 博客(72)
- 收藏
- 关注
RSS订阅原创 array(21种)原型方法实现(push pop unshift shift slice splice reverse sort reduce indexOf find findIndex)
array原型方法实现push pop unshift shift slice splice reverse sort reduce reduceRight concat join every some filter map indexOf lastIndexOf find findIndex includeslet arr = [0, 1, 2, 3]let len = arr.push(4); // 返回数组的个数， 改变原数组// console.log(len) // 5/** * p
2021-12-31 21:51:51
549
原创 JavaScript在chrome浏览器实现录屏功能
js实现录屏功能代码实现 <video class="video" controls width="600px"></video> <button class="record-btn">record button</button> <a class="download">下载</a><script> let btn = document.querySelector('.record-btn'); btn.add
2021-11-25 22:59:36
1416
2
原创 原生js实现拖拽、缩放功能
原生js实现拖拽、缩放功能效果如下图代码实现html<div id="box"> <img class="bgimage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16suc
2021-11-25 22:49:54
1426
原创 devServer.proxy 配置本地代理、测试环境配置nginx解决canvas图片跨域问题
proxy本地代理访问图片解决跨域问题devServer.proxy代理devServer: { port: 8001, proxy: { '/busy': { target: 'http://beijing-image.oss-cn-beijing.aliyuncs.com/', changeOrigin: true, pathRewrite: { '^/busy': '/busy' }
2021-10-15 22:25:28
688
原创 js canvas拼图及压缩
使用canvas拼图将多张图片绘制在canvas上图片尺寸: 1920 * 1080 拼4张图 canvas: width = 1920 * 4 height = 1080 <canvas id="myCanvas" width="7680" height="1080"></canvas> let canv = document.getElementById('myCanvas'); let ctx = canv.getContext('2d'); let
2021-08-25 21:18:05
272
原创 利用canvas的getImageData和putImageData实现截图功能
canvas截图将图片用canvas绘制出来 <canvas id="myCanvas" width="400" height="400"></canvas> let canv = document.getElementById('myCanvas'); let ctx = canv.getContext('2d'); let image = new Image(); image.onload = function() { ctx.drawImage(image,
2021-08-24 21:10:47
2513
原创 electron + vue2.X本地运行及打包遇到的各种版本问题、文件找不到问题汇总
electron + vue2.X本地运行及打包 ps: 打包环境为windows 7基础配置及版本node版本 node v11.7.0npm版本 v6.2.0electron版本 v7.3.3electron-packager v14.2.0.NET Framework v4.5powershell v5.1ps:1、node v14版本需要windows 102、electron v13.1.9需要node v14以上版本支持3、electron-packager
2021-08-19 21:17:50
3189
原创 el-table 自定义表头el-checkbox,实现全选、单选
表格表头自定义el-checkbox，全选单选实现思路table数据添加勾选属性itemCheck，默认为false表头添加render函数，渲染el-checkbox，绑定chang事件在change事件中处理table数据，给itemCheck重新赋值，改变行勾选状态改变行勾选状态，处理表头全选、部分选中、取消全选状态处理table数据for (let val of data) { val.itemCheck = false;} this.dataList = dat
2021-07-29 22:24:30
10311
2
原创 vue实现极简swiper
极简swiper效果图HTML<template> <div class="swiperModule"> <div class="swiper_container"> <div class="slide_item" :style="{transform: `translateX(${ 300 * (index - (activeIndex - 1)) }px) scale(${index === (activeIndex
2021-06-30 21:49:43
153
原创 模拟实现element-ui的消息通知notification
实现消息通知notification创建vue文件<template> <transition name="fade"> <div class="zh_notification" v-if="notificationVisible"> <div class="notificationModule"> <div class="notifiTitle"> <span>有一条消息</span>
2021-06-29 22:25:45
775
1
原创 vue动态滑入动画
从左侧滑入最新信息的动画动画效果代码实现父组件，定时器模拟推入消息<children :infoList='debtBerthWarnList'></children >setInterval(()=>{ // 这里去掉最后的补充数据 that.debtBerthWarnList.pop(); // 模拟接口数据 let list = [{ warnType: 1, areaN
2021-06-29 22:12:34
693
原创 js事件队列（event-loop）宏任务、微任务
#为什么要有事件循环呢？eventloop顾名思义就是事件循环，为什么要有事件循环呢？因为V8是单线程的，即同一时间只能干一件事情，但是呢文件的读取，网络的IO处理是很缓慢的，并且是不确定的,如果同步等待它们响应，那么用户就起飞了。于是我们就把这个事件加入到一个事件队列里(task),等到事件完成时，eventloop再执行一个事件队列。所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务...
2021-06-07 21:11:22
2133
原创 使用echarts简单实现双柱状图重叠效果
如何使用echarts简单实现双柱状图重叠效果代码实现在series中配置如下代码// 设置柱状的圆角itemStyle: { barBorderRadius: 10},// 允许展示背景图showBackground: true,// 设置背景图颜色和圆角backgroundStyle: { color: 'rgba(255, 255, 255, 0.2)', barBorderRadius: 10}柱状图横向展示配置// X轴设置type为value,y轴设置为c
2020-10-22 22:59:52
6346
原创 fixed定位层级高于absolute定位的层级，absolute定位元素反而在上面，不能被覆盖
fixed定位 zindex=100,absolute定位 zindex=20,absolute定位的元素在fixed定位的元素上面现象说明 fixedzindex > absolutezindex// a元素样式.leftChild { position: absolute; left: 0; top: 0; z-index: 20;}// b元素样式.rightChild { position: fixed; left: 0; top: 0; z-index: 100;
2020-10-21 23:13:16
5882
原创 数组方法reduce 高级用法
reduce 高级用法reduce 语法语法接收两个参数第一个参数是一个函数第二个参数可以是数组、对象、Number等数据类型[].reduce(() => {}, [])有返回值克隆数据let arr = [ { a: 1, name: '234' }, { a: 3, name: 'sdfa' }]function mockData(arr) { return arr.reduce((mock, item) => { mock.push(
2020-08-12 22:23:33
500
原创 cnpm与npm安装依赖包的区别
npm 与 cnpm 安装依赖包的区别npm 首次安装会生成一个package-lock.json文件这个json文件用来锁定安装包的版本及所需的依赖和版本再次安装依赖的时候，会安装被锁定的版本cnpm安装不会生成package-lock.json文件cnpm 只会锁定大版本即版本号的第一位假如element-ui 最新版本 3.X.Xpackage.json "dependencies": { "element-ui": "^2.5.4" }cnpm install 安
2020-06-12 22:17:26
844
原创 使用 generator 给普通对象添加 iterator 接口
给普通对象添加iterator接口，使其能够被for…of循环原生具备 iterator 接口的数据结构如下ArrayMapSetString函数的 arguments 对象NodeList 对象TypedArray对象不具备iterator 接口，不能被for…of 循环let obj = { a: 1, b: 2}for(let x of obj) { console.log(x)}// 报错 obj is not iterable了解 generator 的含
2020-06-02 22:08:05
281
原创 echarts实现3个Y轴柱状图
在vue中使用echarts实现3个Y轴的柱状图效果图如下代码实现安装echartstemplate数据格式初始化左侧Y轴数值变为日期提示信息，如何展示百分比柱状图顶端展示百分比完整代码效果图如下有同学要说了，这不只有两个Y轴，接着往下看代码实现安装echartsnpm install echarts --save// 导入import echarts from 'echarts'template<template> <div> <div id
2020-05-19 23:47:38
6772
1
原创 微信公众号配置测试账号获取code
微信公众号内嵌H5，配置测试账号获取code登录微信公众平台配置测试账号在微信开发者工具中，获取code登录微信公众平台找到开发者工具点击公众平台测试账号配置测试账号填写信息注意点：URL 对应的服务必须启动状态Token 可随意填写往下翻，找到网页服务点击修改，填写回调地址注意点： 授权回调域名不可填写前缀http或https，否则会报redirect_uri参数错误在微信开发者工具中，获取code拼接地址参数必须按照顺序拼接 https:/
2020-05-19 22:33:16
4225
原创 vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现npm install @antv/g6 --save<template> <div id="app"> <!-- <button @click="toUpdate">切换数据</button> --> <div id="container"></div> </div></template><script>
2020-05-15 21:56:53
9483
6
原创 H5使用flex+百分比实现自适应
项目效果图效果图代码实现效果图代码实现html结构<div class="out"> <div class="box"> <div class="item"> <img src="img/bus.png" class="icon-img" alt="" /> <p class="icon-text">微...
2020-04-29 23:53:22
762
1
原创 elementui表格动态切换列的展示
应用场景，动态切换表格列的展示如图代码实现首先，不要使用v-show，要使用v-if。其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次实现方法，给表格加索引，每次切换改变索引值<el-table v-loading="listLoading" :data="list" border ...
2020-04-14 15:39:27
1759
1
原创 数据量太大，接口请求报错：net::ERR_INCOMPLETE_CHUNKED_ENCODING 200
报错原因是，接口返回数据量大，连接中断临时解决方法，设置Nginxbuffers大小http{................................ proxy_buffer_size 128k; proxy_buffers 32 128k; proxy_busy_buffers_size 128k; ................................
2020-04-10 09:39:19
1679
原创 javascript学习笔记--更新
1. 普通函数和闭包函数的区别，闭包携带了执行的环境2. 宏任务和微任务的区别 宏任务 由宿主环境API创建的任务 例如： setTimeout 微任务 由执行环境创建的任务 例如： promise...
2020-04-03 17:38:40
128
原创 element ui form表单动态prop规则校验问题
应用场景如图：选择第三方平台右侧计费规则非必选选择手动配置，右侧计费规则必选解决方案1. rules校验规则stationFeeType: [{ required: true, message: '请选择计费配置方式', trigger: 'change' }]2. prop动态，...
2020-03-30 20:38:42
5038
3
原创 promise顺序执行异步函数
1. 顺序输出func1 func2 func3function func1(cb){ setTimeout(function(){ console.log('func1') cb() },3000) } function func2(cb){ setTimeout(function(){ console.log('func2') cb() },1...
2020-03-24 16:52:48
255
原创 无法加载\Users\TAL\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.co m/fwlink/
ts文件编写时遇到标题中这个问题解决过程如下：1.win+s搜索powersholl选择以管理员身份运行2.使用set-ExecutionPolicy RemoteSigned命令将计算机上的执行策略更改为 RemoteSigned,输入Y确定这时候还是会报错，别慌，错误说是具体策略覆盖了刚更新的策略3.执行命令：Set-ExecutionPolicy RemoteSigned -S...
2020-02-26 16:45:48
977
原创 typescript class修饰符public、private、protected、static、abstract
class修饰符的使用及区别public、private、protected、static、abstractpublic：可以继承、实例化// public可以继承、实例化class Person { public name: string; constructor(thename: string) { this.name = thename; }}class Jac...
2020-01-16 20:16:35
1849
原创 typescript interface定义数组每一项都为对象
定义一个方法，返回一个数组，数组的每一项均为对象，对象中包含label和value两个属性创建一个public.ts文件javascript实现// javascript 实现export const formatYear = function () { let date = new Date().getFullYear(); let arr = []; for (let i...
2020-01-11 18:36:11
24374
原创 vue-ls 本地存储
一种可以设置有效期的本地存储方式安装npm install vue-ls --save使用import Storage from 'vue-ls';let options = { namespace: 'vuejs__', // key prefix name: 'ls', // name variable Vue.[ls] or this.[$ls], stor...
2019-12-18 20:54:11
2866
原创 报错Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
使用jquery.datetimepicker.full.min.js报错经过无数次操作，找到报错的操作过程：操作一次时间控件，切换到其他页面，打开控制台，拉动控制台缩放大小，这个时候就会发现一直报错报错原因是，拖动控制台的时候，获取不到控件的根元素，无法给控件定位查看报错信息 window.getComputedStyle(e)，提示e不是元素，打印结果为null在...
2019-12-18 20:38:57
7834
1
原创 pointer-events css控制点击穿透事件
如果有这样的场景，点击页面上飘动的雪花，触发雪花下面的元素的事件，下面的CSS特性有惊喜官方文档是这么介绍的pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。/* Keyword values */pointer-events: auto;pointer-events: none;pointer-even...
2019-12-18 20:23:17
694
原创 海康威视的视频web端（vue开发）的实时预览、录像回放和页面拖拽
效果图实现步骤1. 安装海康web插件，去海康威视官网上下载，官方不支持Mac，只支持Windows https://open.hikvision.com/2. 在index.html引入js文件，安装包里面有<script src="static/jquery-1.12.4.min.js"></script><script src=...
2019-11-20 22:04:52
24428
119
原创 项目中封装vue组件要点
最近在进行项目版本迭代时遭遇很尴尬的问题，跟各位道友分享一下在项目中二次封装了一个vue-awesome-swiper组件，复用达到八次尴尬的事情来了产品提了一个需求，要求某一个页面使用组件的时候，不允许请求当前时间的图片，需要延迟5分钟，比如当前时间 2019-10-14 20:10:00,就是说不允许请求2019-10-14 20:05:00之后的图片其他页面正常使用，无需延时...
2019-10-14 22:02:57
862
原创 webpack分环境打包，静态资源部署到不同的服务器上
静态资源部署到独立的服务器可以减轻服务器带宽压力所谓静态资源：static目录下的文件项目需求背景：1. 项目环境分为测试环境、预发布环境、生产环境2. 不同的环境，静态资源存放的路径不一致，每次打包都需要更改路径，容易忘记切换路径解决方法：根据不同环境配置不同打包命令，实现路径切换安装cross-envnpm install cross --save配置打包...
2019-10-14 21:08:05
1381
原创 element列表跳转路由时记录当前页，返回列表时还在跳转页
点击处理跳转到详情页，要求返回时还在当前页，其他页面进入时加载第一页数据代码实现// 使用sessionStorage记录当前页码sessionStorage.setItem('exceptPage', this.currentPage);// 路由进入时beforeRouteEnter(to, from, next) { if (from.path === '/n...
2019-10-09 20:59:59
857
原创 vue+axios+element formData实现文件上传
文件下载分为两步1. 上传模板EXCEL，使用formData提交2. 提交成功后，接口返回文件流，前端写入EXCEL实现下载ps: 使用表单提交的原因是，excel文件中包含ID，后端需要读取ID查询记录后，再把数据流通过接口返回代码实现1. vue组件<template> <el-dialog title="批量导入" ...
2019-09-19 21:50:43
1234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人