- 博客(58)
- 收藏
- 关注
原创 文件上传限制类型参考
【代码】文件上传限制类型参考。在上传文件过程中,设计需求上这边总是需要对上传文件进行限制和判断,避免用户的盲操作,导致上传文件类型不对后,无法得到正确的信息,造成不好的体验影响,所以在页面上我们需要对文件类型做判断。
2023-03-16 17:36:12
1638
原创 基于element-plus的el-dialog二次封装
本文章旨在提供思路参考,可根据具体项目需求进行封装。类名为添加自定义样式,可根据需求添加自己的样式。代码如下: 属性可参照。
2023-03-07 10:38:03
2373
转载 今天一次性给你讲清楚: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
1660
3
原创 浏览器刷新页面不记录之前得滚动位置
例如:打开页面,滚动了一段距离之后再刷新页面,页面就会自动滚动到之前得位置,我们不想要浏览器这个默认行为,想刷新页面就回到页面顶部该怎么办呢?可以轻松实现页面刷新的时候,浏览器不会记住之前滚动的位置。
2022-09-13 14:26:32
471
原创 前端下载文件
浏览器如果在处理一些它自己可以处理的文件类型的时候,它其实是优先帮我们展示出来的,比如说图片、pdf、txt;1. 浏览器直接下载,a 标签添加 download 属性,download 需要同源才能生效。在一些特定的场景下,我们想要下载文件到本地,而不是在浏览器直接打开。2. 通过 fetch 或 xhr 下载到内存,再通过浏览器下载。HTML 和正常的 a 标签下载代码一样,一般是在 nginx 上配置。3. 添加 header。
2022-09-13 11:44:28
355
原创 浅谈VUE3和VUE2的区别
Vue2Vue3beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted响应式原理Vue2 响应式原理基础是;Vue3 响应式原理基础是。
2022-07-08 17:06:07
379
原创 CSS 实现菜单吸附效果
很多时候我们在做移动端的时候会有菜单吸附的需求,通常我们都是使用 css + js 来实现的,现在我们用纯 css 来实现一下。允许你在用户滚动后所动特定的元素或位置demo 代码如下:预览的时候切换到移动端...
2022-07-08 15:53:35
698
原创 JavaScript 一些小妙用
因为按位操作只支持32位的整型,所以小数点部分全部都被抛弃 不需要再比较数字按位操作效率高点,代码也简洁一些。也可以使用es6的 。但写开源库需要考虑兼容性的道友还是用 比较好浮点操作不精确,老生常谈了,不过可以接受误差...
2022-07-07 09:20:32
287
转载 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
1916
原创 前端代码规范,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
2877
原创 表单自定义校验规则并传递参数
自定义校验规则:const vilidRejected = (val)=>{ //-- val 为传递过来的参数 return (rule, value, callback)=>{ if(!val) { //-- 自定义校验判断 此处可扩展自己的规则需求 return callback(new Error('请输入内容')); } else { callback(); }
2022-04-01 18:05:48
989
原创 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
1225
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
2011
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
762
原创 HTML中的<meta/>标签居然能搞动画?
前言对于一名前端工程师来说,meta标签是再熟悉不过了。初学前端时,写的最多的就是下面的这句了:<metacharset="UTF-8" />但是大多数前端er对meta的认识基本上就止步于此了,不要小看它,小标签却能实现大功能。这篇文章就来带着大家一起重新认识下常常被我们忽略的meta标签吧什么是meta meta是html语言head区的一个辅助性标签,位于文档的头部,不包含任何内容,其属性定义了与文档相关联的名称/值对。 meta...
2021-11-12 11:37:56
1320
2
转载 「Webpack5 专题(四)」Babel 的配置
一、前言上一篇讲到如何配置一个基本的开发环境。本篇将介绍对于项目中 JS 文件的处理。二、babel-loaderindex.js//箭头函数constadd=(a,b)=>a+b;//Promise对象constpromise1=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(add(1,2));},1000);});constp...
2021-11-12 11:08:26
285
转载 「Webpack5 专题(三)」开发环境的设置
一、前言上一篇讲到如何处理静态资源,本篇将更进一步,介绍如何打造一个基础而不失效率的开发环境。关键词:HtmlWebpackPlugin、Source Map、Dev Server、Hot Module Replacement。二、Plugins - 快捷打包如果说,Loader 的作用是将不同的资源进行转换,那么 Plugin 则是在打包的过程中帮我们做一些事情,使打包过程更好管理。在之前的打包流程中,实际上存在两个问题。第一,我们是不可以随意删除输出文件夹(我设置的是 dist)
2021-11-12 11:07:48
395
转载 「Webpack5 专题(二)」静态资源的处理
一、前言上一篇讲解了webpack5 的基础配置。这一篇文章将会介绍如何利用 webpack 中的Loaders对静态资源做处理,Loaders 是 webpack 的核心概念之一。静态资源主要包括以下几方面的内容: 样式文件(CSS) 图片(Images) 字体(Fonts) 数据文件(Data) ... 文件结构:webpack|-/dist|-index.html|-/src|-/assets|-/fon...
2021-11-12 11:06:57
731
转载 「Webpack5 专题(一)」基础入门篇
一、前言基础篇主要围绕以下几点展开: 为什么会使用 Webpack? Webpack 打包流程 Webpack 的本源 Webpack 的配置文件 简化 Webpack 打包流程 1. 简单案例在前端开发中,如果一个页面的逻辑非常多,那么我们就有必要做业务逻辑的划分。例如,一个网页包含三个部分,分别是:Header、Sidebar、Content,这些全都通过 JavaScript 来编写,并加入到页面中。文件结构如下:my-webpa
2021-11-12 11:04:23
119
原创 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
1201
原创 JS检查数字是偶数还是奇数
const isEven = num => num % 2 === 0;console.log(isEven(2)); // Result: True
2021-10-02 15:30:00
403
原创 JS从 URL 获取查询参数
可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数。const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]) .replace(/"/g, '\\"').replace(/&/g, '","') .replace(/=/g, '":"') +'"}');
2021-10-01 09:00:00
170
原创 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
399
原创 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
1897
原创 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
6339
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
377
原创 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
143
原创 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
1304
原创 复制到剪贴板
使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。const copyToClipboard = (text) => navigator.clipboard.writeText(text);copyToClipboard("Hello World");
2021-09-28 10:59:12
201
原创 设置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
250
原创 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
88
原创 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
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人