- 博客(39)
- 收藏
- 关注
RSS订阅原创 使用js图片压缩
压缩原理：将图片读入canvas，并使用canvas的toDataURL方法将图片base64化，在此过程中，可以设定quality值，即图片质量值，值为0.1到1之间，值越小，压缩度越高。
2022-06-08 15:21:10
2080
原创 简短实用的JavaScript代码
1、数组去重这是一个原生的JS函数但是非常简洁，Set接受任何可迭代对象，如数组[1,2,3,3]，并删除重复项2、获取URL的查询参数这个获取URL的查询参数代码，是我见过最精简的3、生成随机十六进制代码（生成随机颜色）使用JavaScript简洁代码生成随机十六进制代码4、返回一个键盘5、创建特定大小的数组6、本地时间通过一堆HTML，您可以创建一个本地时间，其中包含您可以一口气读出的源代码，它每秒都会用当前时间更新页面7、日历创建过去七天的数组，如果将代码中的减号换成加号，你将得
2022-06-08 15:16:10
1571
原创 vue属性之 $attrs和$listeners 简单记录
v-bind="$attrs" 通过绑定此属性可以让父组件的props传参渗透到孙组件v-on="$listeners" 通过绑定此属性可以让孙组件的 $emit 事件冒泡到父组件子组件在中间做一个传递的动作;// 这是父组件<div> // 这是子组件 <child1 @childSubmit="childSubmit" :type="type"></child1></div>// ---------------------------
2022-03-23 09:43:22
1416
2
原创 flex布局 一行4个元素 后面不够4个元素对齐
父元素.container { display: flex; flex-wrap: wrap; }子元素.list {width: 24%; height: 100px;background-color: skyblue;margin-top: 15px;}如果是一行3个 就是3n .list子元素分4份 也就是24% * 4 = 96% 剩下4%如果是一行3个 margin-right 也就是除以2 不是除以3了.list:not(:nth-child(4n))
2021-10-26 14:08:00
3208
转载 推荐几个功能强大的表格组件库,支持原生、react、vue、angular
原生表格SpreadJS 电子表格handsontable 电子表格ag-grid 功能强大的表格gridmanager 功能强大的表格cheetah-grid 唯一支持百万级数据量的表格支持 jquery 表格datatables 功能强大的表格easyui 功能强大的表格支持 angular 表格handsontable 电子表格ag-grid 功能强大表格gridmanager 功能强大的表格easyui 功能强大的表格支持 react 表格handsont
2021-09-14 11:17:15
1381
原创 学习一下算法题
1.两数之和给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]var sum = function(nums, target) { if(nums.length < 2)
2021-06-16 17:06:33
91
原创 vue集成activiti6.0 详细教程
1.下载activiti前端代码放到public文件夹下2.新建activiti组件<template> <div style="position:relative;height: 100%;"> <iframe id="iframe" :src="modelerUrl" frameborder="0" width="100%" height="720px" scro
2021-06-16 17:00:03
5468
16
原创 使用el-dialog关闭时浏览器卡死问题（dialog里面是el-tabs）
el-dialog二次封装了 变成了全局组件 在使用包裹el-tabs时 关闭dialog 就会突然卡死 我还以为是电脑问题 经过多次测试发现 将destroy-on-close设置为false（关闭时不销毁dialog里面的元素）问题得以解决 网上搜了很多 都不对...
2021-05-10 11:55:50
2308
4
原创 【加精】你一定会用到的ES6代码片段,快收藏吧！
1、如何隐藏所有指定元素？const hide = (...el) => [...el].forEach(e => (e.style.display = "none"));// Examplehide(document.querySelectorAll("img")); // 隐藏页面上所有<img />元素2、如何确认元素是否具有指定的类？const hasClass = (el, className) => el.classList.contains(c
2021-01-11 16:13:29
104
1
原创 js常用工具方法
// 限制输入框 只能输入数字和小数this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^\d.]/g,'')// 限制输入框最大值为 50if (this.listQuery.maxPer > 50) { this.listQuery.maxPer = 50}/*限制输入框 只能输入数字*/this.listQuery.maxPer = this.listQuery.maxPer.replace(/[^0-9]/g,'')
2020-11-28 00:04:31
74
原创 2020-11-12 函数防抖 函数节流
概念：函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。**1、函数防抖(debounce)实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调.
2020-11-12 10:02:58
97
原创 JS 小数点加减乘除 精准计算
//js 加法计算//调用：accAdd(arg1,arg2)//返回值：arg1加arg2的精确结果function accAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r
2020-11-12 09:58:07
611
1
原创 vue滚动公告组件封装
组件 <template> <div class="wrap"> <ul id="marquee"> <li v-for="(item,index) in lists" :key="index">{{item}}</li> </ul> </div></template><script type="text/ecmascript-6">export defau
2020-09-30 13:34:00
475
原创 vue中刷新当前页面重新加载页面数据的方法
业务场景在管理后台，在执行完，增，删，改，操作的时候。我们需要刷新一下页面，重载数据。在JQ中我们会用到location.reload()方法，刷新页面；在vue中，这里需要用到一个 provide / inject 这对用例。（其他方法：this.$router.go(0)，会强制刷新，出现空白页面体验不好）这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。实现原理就是通过控制router-view 的显示与隐藏，来重渲
2020-09-28 13:13:26
3999
原创 $router 和 $route 的区别
vue-router中 $router 和 $route 有很大区别：this.$router打印出来是：表示全局，是router构造方法的实例。this.$route打印出来是：表示的是当前页面的路由信息：1.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。2.$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。3.$r
2020-07-30 10:43:56
216
原创 【记录】for of 与 for in的区别
demo1const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a // b // c } for (let i of obj) { console.log(i) // Uncaught TypeError: obj is not iter.
2020-07-22 15:58:06
112
原创 vue-cli脚手架竟然可以这么玩
Vue Cli根据提示完成初始化项目后可以使用vue ui命令使用GUI界面管理项目默认配置可以满足绝大多数项目，非常方便如需进一步了解可参考vue-cli官方文档配置在项目根目录下添加vue.config.js文件，内容如下const path = require('path')const resolve = dir => path.join(__dirname, dir)// 项目部署基础// 默认情况下，我们假设你的应用将被部署在域的根目录下,// 例如：https:
2020-06-12 09:40:46
120
原创 create React App
Create React App创建项目TypeScript模版增加配置请查看# 默认创建项目yarn create react-app <项目名># 使用typescript创建项目yarn create react-app <项目名> --template typescript优化package.json将原来的dependencies、scripts改为以下{ "scripts": { "dev": "react-scripts start"
2020-06-12 09:40:00
263
原创 vue.js竟然可以这么玩!
Vue.js父子组件生命周期顺序/* 加载渲染过程 */parent beforeCreate ↓parent created ↓parent beforeMount ↓child beforeCreate ↓child created ↓child beforeMount ↓child mounted ↓parent mounted/* 更新过程 */// 子组件更新
2020-06-12 09:38:56
180
原创 移动端vw适配方案
移动端vw适配方案如果使用 create-react-app创建项目 可参照参照该文最后章节1、安装PostCSS插件相关依赖postcss-import 解决@import引入路径问题postcss-url 用来处理文件，比如图片文件、字体文件等引用路径的处理autoprefixer 自动处理浏览器前缀，一般脚手架会自带# 安装依赖yarn add postcss-import postcss-url autoprefixer -D/* 当前依赖版本 */{ "devDepen
2020-06-12 09:38:19
269
原创 CSS你学会了吗?
Css样式1、文本域内容解析换行，解析换行符white-space: pre-wrap;2、网站全局黑白色/* 须在html上设置 */html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXIm
2020-06-12 09:37:22
80
原创 node.js[PM2]
PM2（Process Manager 2）Node进程管理工具，简化Node App管理的繁琐任务，如性能监控、自动重启、负载均衡等。常用命令# 启动apppm2 start yarn --name AppName -- start# 查看所有apppm2 list# orpm2 ls# 启动，all表示全部app，CMD表示命令（如：yarn），-i max 表示cluster模式，数量为最大cpu核数，--watch表示当文件变化时自动重启应用，args表示参数pm2 sta
2020-06-12 09:36:35
263
原创 node.js[http-server]
http-serverhttp-server是一个简单的，零配置的命令行http服务器。安装npm install http-server -g# oryarn global add http-server使用http-server [path] [options]可用选项-p 要使用的端口（默认为8080）-a 要使用的地址（默认为0.0.0.0）-d 显示目录列表（默认为'True'）-i 显示autoIndex（默认为'True'）-g或者--gzip当启用时（默
2020-06-12 09:35:55
86
原创 axios的基础使用,你学会了吗
AxiosAxios 是一个基于promise的HTTP库，可以用在浏览器和node.js中。安装yarn add axios# ornpm i axios -S基本使用/** * 1、基础使用1 * axios(config) * 2、基础使用2，url不在配置中指定 * axios(url[, config]) * 3、默认请求方法别名 * 使用别名方法时， url、method、data 这些属性都不必在配置中指定。 * axios.request(config) *
2020-06-12 09:34:41
3622
3
原创 node.js[yarn]
yarn快速、可靠、安全的依赖管理工具。比npm好用 0_0安装# 使用npm安装npm i -g yarn# 使用npm升级yarnnpm update -g yarn相关问题及解决方案# 可能会安装失败，原因基本都是权限问题# MacOS / Linuxsudo npm i -g yarn# windows可以使用管理员权限启动的命令行# 检查yarn -v# 如果出现找不到该命令的问题，需要配置全局环境变量# 该问题多出现在windows系统# 环境变量中
2020-06-12 09:32:35
67
原创 node.js[Npm]
Npm版本# 版本号# <主版本号>.<次版本号>.<修补版本号>x.y.z# 修复bug，小改动，增加z# 增加新特性，可向后兼容，增加y# 有很大的改动，无法向下兼容，增加x# 大于等于修补版本号# 如：~1.2.3，表示从>=1.2.3到<1.3.0~version# 大于等于次版本号# 如：^2.3.4，表示从>=2.3.4到<3.0.0^version# 版本完全匹配# 如：2.3.4，表示版本=2.
2020-06-12 09:30:08
81
1
原创 【记录】vue请求封装，axios请求封装。
线上地址文件 后端部署可直接拉取 config.jswindow.g = { baseUrl: "https://niub.com/"}配置文件 config/index.jsajaxUrl: { baseUrl: { // 项目开发阶段请求的基地址 dev: 'http://99.99.99.9/', // 非有效地址 请替换 //...
2020-05-27 10:11:52
94
原创 【记录】前端js常用匹配规则（正则表达式）
//以下代码仅供参考，如有错误还请各位大哥大姐指导修正//使用方法 供新手参考 :// 在vue文件中 import { regZh } from './util.js'// regZh("要检测的字符串")//匹配有没有中文export const regZh = (str)=> { return RegExp(/[\u4e00-\u9fa5]+/).test(str)}//只允许中文export const regOnlyZh = (str)=> { return R.
2020-05-22 09:44:37
495
转载 【记录】vue 实现一个简单的全局调用弹窗
1.实现效果图2.第一步，新建一个.vue文件 定义一个弹框的基本模板 style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里 ，样式是用less写的，需要你的项目引入less 注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径<template> <div id="tip_alertModal"> <...
2020-04-28 09:44:39
704
1
转载 【记录】JS数组降维--Array.prototype.concat.apply([], arr)
循环降维let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];function simpleNormalizeChildren(children) { let reduce = []; for (let i = 0; i < children.length; i++) { if (Array.isArray(children...
2020-04-27 13:53:28
332
原创 【记录】JS find方法
/*数组中，取出满足要求的第一个值*/ const myArr=[1,2,3,4,8,12]; var v1=myArr.find(value=>value>8); console.log(v1); /*通过数组下标取对应值*/ var v2=myArr.find((value,index,arr)=>{ return ...
2020-04-27 13:22:12
266
原创 【记录】js数组排列组合
let arr = [['L码', 'M码'],['白色', '蓝色', '灰色'],['是', '否']]let newArr = [];let result = []; resultToArr(arr, 0); function resultToArr(arr, index){ for (var i = 0; i<arr[index].length; ...
2020-04-27 13:18:49
207
转载 【记录】es6之扩展运算符 三个点（…）
对象的扩展运算符理解对象的扩展运算符其实很简单，只要记住一句话就可以：对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }12上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz =...
2020-04-27 10:09:54
144
原创 【记录】【随笔】Element饿了吗 table表格复选框记忆功能、分页使用、头部el-form-item搜索区域的一些注意事项。
element 官方文档有说明 有不明白的就去看文档哦~// table表格选中分页记忆// 只需要简简单单几行代码即可实现<el-table :row-key="getRowKeys" ref="multipleTable" @selection-change="handleSelectionChange"> <el-table-column type="selec...
2020-04-01 11:26:44
629
原创 【记录】VUE路由传值
出发页: this.$router.push({name: 'goods', params: {id: 123} })目标页: console.log(this.$route.params.id)// 注意: id 不会携带在url地址里, 页面刷新id就没了, 可能会报错出发页: this.$router.push({path: '/goods', query: {id: 12...
2020-03-28 16:49:26
69
转载 【记录】【转载】简单易用,基于js或vue项目实现一次批量文件下载功能
之前使用的方法一直是使用js动态创建a标签,然后模拟a标签点击下载后面项目需要点击下载多个文件, a标签就不满足需求了,a标签点击只能下载一次文件,如果有多个文件就会自动覆盖,下载最后一个文件网上搜索了很多经验, 自己记录一下, 借用一下大神的代码, 再次感谢!<el-form-item> <el-button @click="table_export" type...
2020-03-28 12:59:31
323
原创 【记录】VUE项目使用e-charts插件,页面使用,组件引入方式
【记录】记录自己使用e-charts插件// 页面使用echarts// 因为我使用的地图需要修改省份名称, 接口返回的省份名称和echarts提供的地图省份对不上,// 所以要修改官方的map文件里的 JSON, 及JS文件, 这里引入// 我把这两个文件复制出来, 放在项目根目录下, 然后在根目录下修改 import china from '../assets/js/china.j...
2020-03-27 10:03:00
129
转载 【记录】【转载】Git pull(拉取)，push(上传)命令整理（详细）
前言：博主最近在学习git命令，因为git是一个非常好用的分布式版本管理工具，功能比svn强大，与SVN不同点是Git去中心化，每一个分支都是一个中心，并且支持本地仓库存储，像如今很多大公司都用git做版本控制。话不多说，具体命令整理如下： git拉取远程代码git clone https://xxx.git git拉取远程指定分支下代码（-b 分支名称）git cl...
2020-03-27 09:12:31
451
原创 【记录】wepy框架小程序下拉刷新及上拉加载更多
网上看了很多自己试着写了下, 可以实现.下拉刷新及上拉加载更多 这两个函数必须要写在onLoad生命周期同级别, 否则报错.<!-- 上拉加载更多 --> <view wx:if='{{!loadingBox}}'> <view wx:if='{{moreLoading}}'> <image src="../../assets/icons...
2020-03-26 16:11:09
385
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人