![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
shengjon
这个作者很懒,什么都没留下…
展开
-
基于element-plus的el-dialog二次封装
本文章旨在提供思路参考,可根据具体项目需求进行封装。类名为添加自定义样式,可根据需求添加自己的样式。代码如下: 属性可参照。原创 2023-03-07 10:38:03 · 2033 阅读 · 0 评论 -
今天一次性给你讲清楚:File、Blob、FileReader、ArrayBuffer、Base64
根据 ArrayBuffer 和 Blob 的特性,Blob 作为一个整体文件,适合用于传输;blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据。Blob 对象一个不可修改,从Blob中读取内容的唯一方法是使用 FileReader。array:由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的,将会被放进 Blob;②将获取的图片文件,生成base64图片【这个在上面的filereader的时候已经演示过了,这里就不演示了】转载 2022-10-29 20:06:51 · 1486 阅读 · 3 评论 -
前端下载文件
浏览器如果在处理一些它自己可以处理的文件类型的时候,它其实是优先帮我们展示出来的,比如说图片、pdf、txt;1. 浏览器直接下载,a 标签添加 download 属性,download 需要同源才能生效。在一些特定的场景下,我们想要下载文件到本地,而不是在浏览器直接打开。2. 通过 fetch 或 xhr 下载到内存,再通过浏览器下载。HTML 和正常的 a 标签下载代码一样,一般是在 nginx 上配置。3. 添加 header。原创 2022-09-13 11:44:28 · 311 阅读 · 0 评论 -
浅谈VUE3和VUE2的区别
Vue2Vue3beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted响应式原理Vue2 响应式原理基础是;Vue3 响应式原理基础是。原创 2022-07-08 17:06:07 · 320 阅读 · 0 评论 -
CSS 实现菜单吸附效果
很多时候我们在做移动端的时候会有菜单吸附的需求,通常我们都是使用 css + js 来实现的,现在我们用纯 css 来实现一下。允许你在用户滚动后所动特定的元素或位置demo 代码如下:预览的时候切换到移动端...原创 2022-07-08 15:53:35 · 616 阅读 · 0 评论 -
vscode文件头部注释插件koroFileHeader配置
1、安装koroFileHeader直接去搜索点击安装就可以了。2、配置如果不修改默认的配置头部注释效果如下,我想去掉Author和LastEditors,并调整顺序,配置完记得重启vscode/**** Author : ''* Date : 2019-05-13 15:54:32* LastEditors : ''* LastEditTime : 2020-02-14 22:04:52* FilePath : /fileHead/in...转载 2022-04-19 17:55:34 · 1409 阅读 · 0 评论 -
前端代码规范,vue 代码规范
一、规范目的对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护。二、HTML/CSS 规范2.1 浏览器兼容性根据公司业务要求而定,一般:主流程测试:chrome 30 +、IE9+;完整测试:chrome 30 +、IE9+、360浏览器、微信 webView、手机浏览器。2.2 html 代码规范2.2.1 声明与编码html 头部声明统一<!DOCTYPE h原创 2022-04-19 16:41:55 · 2728 阅读 · 0 评论 -
表单自定义校验规则并传递参数
自定义校验规则:const vilidRejected = (val)=>{ //-- val 为传递过来的参数 return (rule, value, callback)=>{ if(!val) { //-- 自定义校验判断 此处可扩展自己的规则需求 return callback(new Error('请输入内容')); } else { callback(); }原创 2022-04-01 18:05:48 · 911 阅读 · 0 评论 -
webView跳回小程序
<template> <div class="wrap"> <el-button class="back-btn" type="primary" @click="handleClick">返回小程序</el-button> </div></template><script>export default { created(){ const s = docume.原创 2022-03-31 16:40:19 · 1143 阅读 · 2 评论 -
前端pdf文件直接下载而不是在浏览器直接打开
在 pdf 后缀添加?response-content-type=application/octet-stream<a v-if="scope.row.files.fileName" :href="scope.row.files.fileUrl+'?response-content-type=application/octet-stream'" :download="scope.row.files.fileName">{{scope.row.files.fileName}}</a&.原创 2022-03-11 11:26:38 · 1869 阅读 · 3 评论 -
70 个可能会用到的正则表达式
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以最近把开发中常用的一些正则表达式整理了一下,给自己留个底,也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/^(((ht|f)tps?):\/\/)?[\..原创 2021-12-03 16:21:53 · 729 阅读 · 0 评论 -
HTML中的<meta/>标签居然能搞动画?
前言对于一名前端工程师来说,meta标签是再熟悉不过了。初学前端时,写的最多的就是下面的这句了:<metacharset="UTF-8" />但是大多数前端er对meta的认识基本上就止步于此了,不要小看它,小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的meta标签吧什么是meta meta是html语言head区的一个辅助性标签,位于文档的头部,不包含任何内容,其属性定义了与文档相关联的名称/值对。 meta...原创 2021-11-12 11:37:56 · 1192 阅读 · 2 评论 -
JS求数字的平均值
使用 reduce 方法找到多个数字之间的平均值。const average = (...args) => args.reduce((a, b) => a + b) / args.length;average(1, 2, 3, 4);// Result: 2.5原创 2021-10-02 18:15:00 · 1044 阅读 · 0 评论 -
JS检查数字是偶数还是奇数
const isEven = num => num % 2 === 0;console.log(isEven(2)); // Result: True原创 2021-10-02 15:30:00 · 329 阅读 · 0 评论 -
JS从数组中删除重复项
可以使用 JavaScript 中的 Set 轻松删除重复项。const removeDuplicates = (arr) => [...new Set(arr)];console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));// Result: [ 1, 2, 3, 4, 5, 6 ]原创 2021-10-01 07:00:00 · 352 阅读 · 0 评论 -
JS生成随机十六进制
可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;console.log(randomHex());// Result: #92b008原创 2021-10-01 06:45:00 · 1775 阅读 · 0 评论 -
JS清除所有 Cookie
你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));...原创 2021-10-01 06:30:00 · 6092 阅读 · 1 评论 -
JS将字符串大写
Javascript 没有内置的大写函数,因此我们可以使用以下代码。const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)capitalize("follow for more")// Result: Follow for more原创 2021-09-28 19:00:00 · 346 阅读 · 0 评论 -
JS找出一年中的哪一天
查找给定日期的哪一天const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);dayOfYear(new Date());// Result: 272原创 2021-09-28 18:45:00 · 105 阅读 · 0 评论 -
JS检查日期是否有效
使用以下代码段检查给定日期是否有效。const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00");// Result: true原创 2021-09-28 11:01:15 · 1160 阅读 · 0 评论 -
复制到剪贴板
使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。const copyToClipboard = (text) => navigator.clipboard.writeText(text);copyToClipboard("Hello World");原创 2021-09-28 10:59:12 · 171 阅读 · 0 评论 -
设置localstorage过期时间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</.原创 2021-08-02 10:49:39 · 214 阅读 · 0 评论 -
JS 数组扁平化
理解:多维数组转化成一维数组用数组自带的 flat 方法 利用正则表达式,(缺点:数组里面的元素都会变成字符串类型) 利用 JSON.parse 优化正则版 通过递归方式实现 通过 reduce 实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-04-16 15:19:41 · 63 阅读 · 0 评论 -
BFC的理解及作用
BFC定义块级格式化上下文,它是指一个独立的块级渲染区域,只有 Blosk-level BOX 参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。从一个现象说起一个盒子不设置 height ,当内容都浮动时无法撑起自身 这个盒子就没有形成 BFC<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-.原创 2021-04-16 14:26:58 · 104 阅读 · 0 评论 -
JS 预编译
JS 预编译的时候做了那些事情 创建AO对象 找形参和变量的声明作为AO对象的属性名值是undefined 实参和形参相统一 找函数声明会覆盖变量的声明 // JS 预编译练习题 function fn(a, c) { console.log(a); // function a (){} var a = 123; console.log(a); // 123 console.log(c); // function ...原创 2021-04-14 16:59:54 · 56 阅读 · 0 评论 -
js 数组遍历方法总结
1. for 说明:最简单的一种,有优化的空间for (i = 0; i < arr.length; i++) { // -- 执行代码} 说明:优化版,使用临时变量存储长度,避免重复获取,数组数据量大的时候会特别明显for (i = 0, len = arr.length; i < len; j++) { // -- 执行代码}...原创 2020-04-08 16:39:13 · 184 阅读 · 0 评论 -
flex弹性布局-flex属性
.box { display: flex; /* justify-content: 子元素水平排列的方式 */ justify-content: center; /* 居中 */ justify-content: space-between; /* 两端对齐 */ justify-c...原创 2020-04-08 14:32:02 · 129 阅读 · 0 评论 -
webpack 配置项解析 注释
原创 2020-01-03 16:51:26 · 210 阅读 · 0 评论 -
正则验证密码和手机号码
1. 密码验证:至少包含字母和数字且不少于6位const regPass = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;2. 手机验证:const regTel = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;...原创 2019-12-13 14:44:18 · 264 阅读 · 0 评论 -
关闭chrome的跨域限制
该方案指Chrome49之后的版本:1. 首先在C盘目录下创建MyChromeDevUserData 文件夹2.新建一个chrome快捷方式,右键--属性--快捷方式--选项卡里选择--目标--,exe 后面添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 点击应用,然后确定就可以快乐的使用了...原创 2019-12-13 14:38:33 · 4536 阅读 · 0 评论 -
css的background属性连写
background: rgba(0,0,0,.8) url('assets/images/loading.png') fixed no-repeat center / cover;background:color img_url repeat attachment position / size颜色, 地址,固定背景,平铺,位置,size...原创 2019-11-28 10:51:55 · 695 阅读 · 0 评论 -
验证价格
//验证价格clearNoNum(value) {value = value.replace(/[^\d.]/g, “”); //清除“数字”和“.”以外的字符 value = value.replace(/.{2,}/g, “.”); //只保留第一个. 清除多余的 eevalu...原创 2019-09-26 11:48:55 · 160 阅读 · 0 评论 -
超级简单的点击按钮复制内容到浏览器的剪切板
Document复制地址$(function(){$("#copyBtn").click(function(){$(".copyLink").select(); //-----复制内容对象----tag = document.execCommand("Copy"); //------执行浏览器拷贝命令-----if (tag) {alert("复原创 2017-07-27 17:00:36 · 1961 阅读 · 0 评论 -
用JS来获取地址栏的属性值;
在实际项目开发中我们会经常利用地址栏传递一些数据,那么就会要从地址栏获取到页面传过来的数据,下面介绍的就是一个超级简单的方法来获取属性值;function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.原创 2017-09-04 10:21:06 · 1888 阅读 · 0 评论 -
CSS hover 同级元素
.child_head ul .senav:hover +.edit span{ border-left: 1px solid transparent;} 默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式,被改变的元素必须是被hover元素的子元素,如果是兄弟关系,那么你必须要这样设置了。原创 2017-09-21 11:57:48 · 4722 阅读 · 0 评论 -
js 判断浏览器类型
"JavaScript"> function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.原创 2017-09-21 16:33:13 · 250 阅读 · 0 评论 -
HTML常用符号整合
显示一个空格 > 大于 > >& &符号 & &" 双引号 " "其他常用的字符实体(Character Entities)显示结果 说明 Entity Name Entity Number? 版权 © ©? 注册商标 ® ®× 乘号 ×原创 2017-11-20 11:23:04 · 437 阅读 · 0 评论 -
Git详细使用教程
1. Git是什么;git是目前世界上最先进的分布式版本控制系统。2. git与svn的区别;SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以首先要从中央服务器哪里得到最新的版本,然后干活,干完后,需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作,如果在局域网还可以,带宽够大,速度够快,如果在互联网下,如果原创 2017-12-10 17:35:48 · 318 阅读 · 0 评论 -
修改npm安装的全局路径和配置环境变量的坑
转自:http://www.qdfuns.com/notes/30749/0f66fcf5e62eed010f744d0d4adaa870.html我之前安装npm时全是默认安装,模块全部安装在C盘了,今天心血来潮,把路径改到了D盘,结果改完后模块都不能识别了,都提示XX模块不是内部命令,这其实是环境变量配置的问题,我都是按照网上的教程改的环境变量,但是照着改也有错,反复改了好几次都不行,最后...转载 2018-09-25 16:19:30 · 2910 阅读 · 0 评论 -
css改变CheckBox的默认样式
<label class="so_far"> <div class="so_far_check"> <input type="checkbox" class="weui-check"> <p class="suggest_round">原创 2018-10-22 14:55:31 · 935 阅读 · 0 评论