- 博客(50)
- 收藏
- 关注
RSS订阅原创 原生JS实现图片裁剪功能（fixed布局）
功能介绍：图片通过原生input上传，使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围，图片限制了最大宽高（自行修改要的尺寸），点击确认获取新的base64图片数据，大部分需求都是弹窗进行处理，这里用到的是fixed布局，将盒子浮动起来，导致判断，取值有变化<!DOCTYPE HTML><html><head lang="en"> <meta http-equiv="Content-Type" content="text/html; cha
2023-06-26 16:05:49
1198
原创 原生JS实现图片裁剪功能
功能介绍：图片通过原生input上传，使用canvas进行图片裁剪。 裁剪框限制不允许超出图片范围，图片限制了最大宽高（自行修改要的尺寸），点击确认获取新的base64图片数据效果图：上代码
2023-06-25 15:26:37
2592
2
原创 js滚动条动画滚动到顶部
var timer = setInterval(function () {var left = window.pageYOffset;var step = Math.ceil((left - 0) / 10);window.scroll(0, left - step);if (left == 0) {clearInterval(timer);}}, 10);
2022-01-19 16:57:48
961
原创 js精确加法减法乘法
精确乘法函数/** * 乘法函数，用来得到精确的乘法结果 * 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 * 调用：accMul(arg1,arg2) * 返回值：arg1乘以 arg2的精确结果 **/export const accMul = (arg1, arg2) => { if (isNaN(arg1)) { arg1 = 0; } if (isNaN(arg2)) { arg2
2021-11-22 16:36:09
956
转载 33个非常实用的JavaScript一行代码
一、日期处理检查日期是否有效该方法用于检测给出的日期是否有效：const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00"); // true计算两个日期之间的间隔该方法用于计算两个日期之间的间隔时间：const dayDif = (date1, date2) => Math.ceil(Math.abs(
2021-11-05 17:45:25
148
原创 vscode之background设置(vscode设置背景图片)
vscode下载插件background进行自定义设置背景图片设置{ "background.useDefault": false, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99999", "width": "100%", "
2021-11-05 14:25:35
4136
原创 Math.abs() 用法
作用 : 返回一个数的绝对值Math.abs(x) 参数x必须是一个数值返回值: Number x 的绝对值。如果 x 不是数字返回 NaN,如果 x 为 null 返回 0。例如:var a=Math.abs(7.25);var b=Math.abs(-7.25);var c=Math.abs(null);var d=Math.abs("Hello");var e=Math.abs(2+3);输出:7.257.250NaN5...
2021-10-28 11:25:17
61711
原创 css文本溢出隐藏
单行文本: p{ width:300px; /*限制元素宽度*/ line-height: 30px; overflow: hidden; /*文本超出隐藏*/ text-overflow: ellipsis; /*文本超出显示省略号*/ white-space: nowrap; /*超出的空白区域不换行*/ }多行文本: p{ width:300px; /*限制元素宽度*/ line-height: 30px; display: -webkit-box;
2021-10-25 14:45:15
120
原创 happypack多线程打包配置
安装插件npm install happypack --save-dev配置//vue.config.js中进行配置//顶部引入const HappyPack = require('happypack');const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });chainWebpack(config){ config.plugin('happypack') .use(HappyPack)
2021-10-19 14:14:56
947
原创 Gzip文件压缩配置
下包npm install compression-webpack-plugin --save-dev使用//在vue.config.js中进行使用//顶部引入const CompressionPlugin = require('compression-webpack-plugin')//使用configureWebpack:{ plugins:[ new CompressionPlugin({ filename: '[path].gz[query]', algorithm
2021-10-19 12:11:18
145
原创 vue打包耗时显示插件
安装依赖npm i progress-bar-webpack-plugin chalk -dvue.config.js中进行使用const ProgressBarPlugin = require('progress-bar-webpack-plugin');const chalk = require('chalk'); configureWebpack: { plugins:[ new ProgressBarPlugin({ format: ' build [:bar] '
2021-10-17 22:06:44
571
2
原创 js如何判断空对象
ES6写法let options = {}if(Object.keys(options).length === 0) { //我现在是空对象}
2021-09-16 10:48:01
80
原创 js获取上传视屏的时长
功能实现代码: const file = e.target.files[0] window.URL = window.URL || window.webkitURL let video = document.createElement('video') video.preload = 'metadata' video.onloadedmetadata = function(){ window.URL.revokeObjectURL(vid
2021-08-04 18:27:39
289
原创 vue图片裁剪固定尺寸/vue-cropper的使用
需求:用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理)解决:使用vue-cropper插件完成插件官网: https://github.com/xyxiao001/vue-cropper效果图片:代码:安装依赖npm install vue-cropper全局挂载(main.js文件中)import VueCropper from 'vue-cropper'Vue.use(VueCropper)组件代码<template>
2021-07-30 10:44:43
3173
原创 js封装获取字节长度函数
//1个汉字三个字节 1个中文符合2个字节export const getBytesLength = (str) => { if (str == null || str === undefined) return 0; if (typeof str != "string") { return 0; } var total = 0, charCode, i, len; for (i = 0, len = str.length; i < len; i++) {
2021-07-23 10:59:30
221
原创 vue: 每次进入子组件都重新加载子组件,重新生成DOM元素
需求:情况1: 父组件每次打开子组件,都需要一个全新的子组件情况2: 使用el-dialog弹窗模式加载子组件, 子组件具有保存/关闭按钮, ①子组件点击保存,下次进入子组件需重新加载组件,全部已填内容清空. ②子组件点击关闭,未点击保存,下次进入内容不清空解决方案子组件使用watch监听值的变化从而改变内容(如果要清空内容,很麻烦)使用key属性方法 ①:如果每次进入都需要重新刷新子组件,则在父组件设定时间戳,每次点击更新时间戳替代key. ②子组件点击关闭,未点击保存,下次进入内容不清空
2021-07-21 11:00:16
6956
4
原创 获取昨日/今日/近7日/近30日
效果: 点击对应按钮自动获取对应时间vue中静态结构:<el-radio-group v-model="radio1" style="margin-right: 5px" @change="radioChange"> <el-radio-button :label="-1">昨日</el-radio-button> <el-radio-button :label="0">今日</el-radio-button>
2021-06-23 10:13:40
446
原创 input获取光标位置,插入emoji
在使用emoji表情的时候,需要在多个文字中间进行插入表情需要使用原生获取input框(因为使用组件会被包裹一层,使用ref无法直接获取) onSelectEmoji(emoji) { let input = document.getElementById("input"); let startPos = input.selectionStart; let endPos = input.selectionEnd; let resultText =
2021-06-01 16:21:47
672
原创 VUE的input框赋值后无法进行编辑
问题情况 : data中有定义对应字段,input框也进行绑定对了v-model 但进行赋值后,input输入框无法进行操作原因: 空input框进行赋值后,不存在setter和getter方法,导致无法实现双向绑定解决:使用vue的全局方法: this.$set(data, property, value)data为要修改的对象，property为要添加的属性，value就是这个属性的值例如: this.$set(this.form, "contactPersonCardId", idCard)
2021-05-14 12:04:42
1786
原创 JS根据url获取图片真实宽高 && 上传图片获取真实宽高
根据url获取真实宽高var url = require("url");var http = require("http");var sizeOf = require("image-size");http.get(url.parse(imgUrl), function(response) { var chunks = []; response .on("data", function(chunk) { chunks.push(chunk); }) .on(
2021-05-14 11:51:55
787
原创 常用git命令
1：git branch branchName(在本地创建一个命名为branchName的分支)2：git branch 查看当前自己所在的分支3：git branch -a 查看服务器的所有分支以及自己当前所在的分支4：git push origin branchName(把命名为branchName的本地分支推送到服务器)5：git checkout --track origin/branchName (切换为远程服务器上的命名为branchName的远程分支)6：如果你的搭档要把他
2021-05-11 17:52:01
50
原创 element-tree 实现部门-人员选择(支持ID相同)
使用element-tree实现id相同的选择相同人员可在不同部门出现, 当勾选其中一个人员时,其它部门的相同人员也要勾选上右侧可进行删除已勾选人员, 并且树状图勾选状态取消若有勾选,进入时候默认选中效果如下:例如: 点击勾选总经办的王五,技术部的王五也要勾选上,右侧删除王五的时候,左侧相关王五的勾选全部取消因为element-tree出现重复id的时候,会导致被覆盖,只能勾选中一个,解决方案: 修改element-ui tree的源码tree-store.js 文件 仿照源码增加了两
2021-05-05 16:31:12
9499
111
原创 element-tree搜索筛选,加载过滤出的父节点以及其所有子节点
需求: 使用element-tree实现部门的树状图, 并有搜索功能, 输入内容搜索出对应的部门,以及部门的所有子节点效果如下:代码如下: <div> <div class="search"> <el-input placeholder="请输入内容" v-model="filterText" clearable> <el-button slot="append" icon="el-icon-search"><
2021-05-05 15:44:04
4895
10
转载 常用的正则表达式
一 校验数字的表达式n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$有1~3位小数的正实数：^[0-9]
2021-04-21 11:06:53
71
原创 微信开发者工具如何打开企业微信小程序
在微信开发者工具中进行打开显示:但真机调试扫码打开,就马上闪退,而且不可能一直在手机调试解决办法:1…微信开发者工具打开 工具–插件2…模拟器插件安装企业微信小程序模拟器3…切换编译模式...
2021-03-25 18:21:52
1242
原创 git没有push后被覆盖代码
代码被覆盖操作如下：git add . git commit -m ‘123’git checkout dev-123切换分支后，我直接pull了一次代码，导致我本地修改的代码全被覆盖修复办法：回退到commit的固定版本操作：git reflog 查询commi的日志可以看到HEAD中有个数字，这就是要回退固定板吧的字段最后通过git reset --hard DEAD@{3} 去回退...
2021-03-11 10:31:51
456
原创 使用css实现三角形
需要的效果（下图中任意一个颜色的三角形）以上图案实现的代码.box{ width: 0px; height: 0px; border-bottom: 100px solid #6cf; border-left: 100px solid #ccc; border-right: 100px solid #0a0; border-top: 100px solid red; }css写三角形，是使用了border属性进行完成的
2021-02-02 10:41:14
108
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人