前端技术
关注
分享
扫一扫
前端小峰
本人热爱编程，以前端为端口完善自己的技术栈，一起成长，一起见证。
展开
-
【CSS】两行超出部分...展示，&一行超出...展示，亲测有效
美丽的UI小姐姐总是让你…展示，不知道有什么是见不得人的，那我今天帮你做个遮羞布一行超出…展示overflow: hidden;white-space: nowrap;text-overflow: ellipsis;差不多就是这样的效果，我这里展示的是车牌一行超出…展示width:300px // 这个宽度要确定才可以给你隐藏text-overflow ellipsisdisplay -webkit-box-webkit-line-clamp 2-webkit-box-orie.原创 2022-04-11 16:33:13 · 591 阅读 · 0 评论 -
【zsh】command not found: node
背景：最新不是换了个新点脑吗，我就喜欢用oh-my-zsh, 但是什么弄好了之后，发现来个node -v,就来了command not found: node ,我就无语了直接把下面代码放进去就好，现在对mac的系统相对要熟悉点export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm[ -s "$NVM_DIR/bash_completion" ] &.原创 2022-04-11 15:23:33 · 8949 阅读 · 1 评论 -
【mac电脑更新就这样了】Can‘t update: not a git repository. mac安装git 和 homebrew
mac电脑系统更新会导致git被删除，然后我这样就可以啦原创 2022-03-16 23:24:37 · 1844 阅读 · 0 评论 -
【element-ui】组件库里面的`el-collapse-transition`居然不生效
最近在做一个属于我内部的组件库，开发到了 collapse-transition的时候，发现直接搬过来的动画实现不了，那可着急死我了，我因为我写错了，然后在代码里面去打断点，发现根本没有进入beforeEnter里面，意思就是这个组件就没有生效，那么看看如何解决的1、原因问题出现在 el-collapse-transition 组件上，但是移植时代码已饿了么的源码一致，实现方式是通过vue的函数式组件的方式来实现的，对于函数式组件也不是很了解。多方查找原因，发现出在这个原来是ES6中class类的.转载 2022-01-26 17:31:36 · 3685 阅读 · 0 评论 -
【如何分享Facebook和Whatsapp可以展示到图片和title】
首先给大家上两张图片，就可以进入今天的主题，先把这两张图放在下面吧，主要是图太大。如大家所见，我们可以可以看到文章的title和图片，是不是很神奇，我们第一时间可以回猜测这些信息是主动暴露给url上，但是错了，url上没有放任何的关于文章的信息，那么究竟放在哪里呢？当然是meta标签里面，因为meta是html文件和外界交流的桥梁，当我们分享给WhatsApp或者Facebook的连接时，可以首先是去解析文章中的一些主动暴露的资源，然后展示出来。 <meta property="og:url".原创 2021-12-26 13:00:45 · 2577 阅读 · 0 评论 -
【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面
最近在做官网，首先想到用这个EJS，有句话怎么说的，万物都可以ejs，是吧！1、ejs特点：快速编译和渲染简单的模板标签自定义标记分隔符支持文本包含支持浏览器端和服务器端模板静态缓存支持express视图系统2、ejs常用标签：写ejs基本上都要用 <% %>包起来，这是语言规则<% %> 流程控制标签 ，for循环，if else等<%= %> 输出内容标签 text文本内容，像v-text的能力<%- %>输出.原创 2021-11-17 18:29:33 · 1038 阅读 · 0 评论 -
【多个文件引入】手写一个require.context的方法
这个方法并不是require,js上面的一个方法，而是v也在node的环境自己封装了一层，那么我们也可以自己实现一下,常常用来多文件引入directory：要搜索的文件夹目录useSubdirectories：是否还应该搜索它的子目录regExp：一个匹配文件的正则表达式if (typeof require.context === 'undefined') { const fs = require('fs'); const path = require('path'); req.原创 2021-11-08 15:16:51 · 470 阅读 · 0 评论 -
【移动端组件】tab栏切换---组件1/30个组件····疯狂造轮子给自己用
switchTab切换<template> <div class="tab-cut"> <div class="common-title" v-for="(item, index) in list" :key="item.title" :style="{color: index === activeIndex ? (item.activeColor || '#0067FF') : (item.color || '#000000'),fontWeight: inde原创 2021-10-29 17:42:26 · 338 阅读 · 0 评论 -
【两端同码】判断移动端还是PC端超级好用的方法
const mqlMedia = window.matchMedia('(orientation: portrait)')function onMatchMediaChange(mql = window.matchMedia('(orientation: portrait)')) { if (mql.matches) { //竖屏 return 'portrait' } else { //横屏 return 'horizontal' } } // 输出当前屏幕模式const原创 2021-10-29 17:38:14 · 331 阅读 · 0 评论 -
【CSS】一行超出...隐藏，两行超出...隐藏
美丽的UI小姐姐总是让你…展示，不知道有什么是见不得人的，那我今天帮你做个遮羞布一行超出…展示overflow: hidden;white-space: nowrap;text-overflow: ellipsis;差不多就是这样的效果，我这里展示的是车牌一行超出…展示width:300px // 这个宽度要确定才可以给你隐藏text-overflow ellipsisdisplay -webkit-box-webkit-line-clamp 2-webkit-box-orie.原创 2021-09-26 20:56:44 · 1093 阅读 · 0 评论 -
H5移动端实现pad弹窗手上滑上移动，手下滑下移动（和高德地图上的展示框类似）
一、背景最近承接了一个需求，需要在H5页面移动端实现手滑动上移动，下滑下移动，我一看就用到了滑动的三个事件touchstart、touchmove、touchend，顾名思义，touchstart就是滑动起始的触发事件，touchmove就是滑动时的触发事件，touchend就是脱离滑动的触发事件我录制的一个效果图，网上很少见的哟二、心路只要在移动起始位置记录下触击位置，在移动中计算偏移的量，不断的给偏移位置改值，就可以达到滚动的效果，只要在结束的位置做边界的限制和初始化操作就可以满足到我的一原创 2021-09-12 14:57:30 · 2695 阅读 · 0 评论 -
【前端-经验】如果没有background-size，怎么实现评星效果，我同事我都不教TA
一上来我们就放一张图，最近在做端上页面的开发，框架是我们公司自己写的，所以很多的css和标准的W3C并没有对其，那就上面一张图的框框区域，你会怎么实现// html：<view class="star-image"> <view class="star_light_content" :style="{width: `${starListData.fast_serve_average_score*1/5.0*100}%`}"></view> <!..原创 2021-08-03 15:49:21 · 216 阅读 · 0 评论 -
【前端JS】promise多任务高并发处理
代码class PromisePool { constructor(max, fn) { this.max = max; //最大并发量 this.fn = fn; //自定义的请求函数 this.pool = []; //并发池 this.urls = []; //剩余的请求地址 this.callback = callback; } start(urls) { this.urls.原创 2021-07-14 20:21:49 · 1803 阅读 · 3 评论 -
【前端JS】生成 PDF并写入到文件夹，最后压缩下载
背景： 因为后端的同学比较忙，没时间接这个需求，但是这个又急的用，哎呀，还是想到我们前端，所以我们前端还是牛plus。这个实现呢，我之前也只是听过，没有自己去做，今天我们一起探讨下这个一长串的需求拆封任务需要生成的PDF页面编写 --> 生成多个PDF 并写入到文件夹 -->压缩并下载实现步骤1、需要生成的PDF页面编写上图页面左侧是操作区域 ，右侧是展示区域。在展示区域的跟标签加一个id标识（便于后期生成PDF）2、生成多个PDF ，并写入到文件夹在promise多..原创 2021-07-14 20:03:16 · 1508 阅读 · 6 评论 -
【前端js】xlsx插件时间转换‘xxxx-xx-xx’给我转成了五位数，咋整，我来帮你转回来吧～
背景： 最近做xlsx文件读取的时候，时间给我转成了五位数，我懵懂了，最后还是解决了，下面分享下我的方法根据度娘得知Excel存储的日期是从1900年1月1日开始按天数来计算的，也就是说1900年1月1日在Excel中是1。所以我们用new Date(xxx)的时候一直是1970年什么的。如果我们算出这边的一个差值就可以把这个问题处理了export function formatePDFData(date) { let d = new Date(); d.setTime(Math.round.原创 2021-07-14 18:08:53 · 923 阅读 · 0 评论 -
html+css 三列布局之经典布局、圣杯布局、双飞翼布局
前言在开发过程中，经常会碰到三列布局，就是左右两侧定，中间自适应，如果想看两列布局，前面文章有写两列布局上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0;原创 2021-03-14 11:51:55 · 184 阅读 · 0 评论 -
html 两列布局之宽度高度自适应解析（妙）
前言在我们整个PC端的项目上，有很多的主页面布局采用的是两列布局，左侧定，右侧自适应；或者右侧定，左侧自适应上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> body { color: #fff; } .fix原创 2021-03-14 11:39:52 · 583 阅读 · 0 评论 -
前端缓存策略
HTTP缓存缓存是指可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速率很快。当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找。而http缓存主要针如css，js，图片等更新频率不大的静态文件。缓存的优缺点优点加快网页打开速度减少网络宽带的消耗减轻服务器端的压力缺点服务器缓存中的数据变了，浏览器不知道数据是否发生改变。不利于做信息采集前端缓存HTTP缓存HTTP缓存规则主要在HTTP协议头和HTML的原创 2020-08-25 18:23:16 · 1306 阅读 · 0 评论 -
前端文件下载并设置Header
在开发的过程中有的时候因为下载接口后端不是直接给你一个地址，而是给你一个responseType为Blob类型，那我们就需要给他进行下载处理function downLoadByUrl(url){ var xhr = new XMLHttpRequest(); //GET请求,请求路径url,async(是否异步) xhr.open('GET', url, true); //设置请求头参数的方式,如果没有可忽略此行代码 /.原创 2020-08-25 17:03:44 · 3788 阅读 · 0 评论 -
JS 防抖、节流
为什么需要防抖节流？如果你了解了，那么你就会经常用，不了解，你就基本上不会用，这个在前端还是很普遍的。针对一些会频繁触发的事件如scroll、resize，按钮点击、输入框监听实时刷新，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能，所以我们可以通过防抖和节流去控制其频率1、防抖（debounce）防抖动：将几次操作合并为一此操作进行。原理：维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样原创 2020-08-12 17:23:55 · 174 阅读 · 0 评论 -
static全局变量与普通的全局变量有什么区别？static局部变量和普通局部变量有什么区别？static函数与普通函数有什么区别?
面试题：static全局变量与普通的全局变量有什么区别？static局部变量和普通局部变量有什么区别？static函数与普通函数有什么区别？面对突如其来的三联问，真的一口老血喷出来，快收回去，这个很好理解1、static全局变量与普通的全局变量有什么区别？存储方式：两个声明变量的存储都一样，静态存储方式作用域非静态的全局变量作用于整个程序，当一个源程序由多个源文件组成时，非静态的全局变量在每个文件都有效，但是静态的全局变量在本文件有效，其他文件无效2、static局部变量和普通局部.原创 2020-08-10 15:49:59 · 334 阅读 · 0 评论 -
js将粘贴复制的纯文本（去掉样式标签）
在我们操作富文本的内容是，标签是div,设置可编辑的状态，我们需要取粘贴的纯文本内容，那我们怎么处理？别怕，一起整起来<div class='paste_content' contenteditable=='true'></div> $(".paste_content").on("paste", function (event) { textPaste(event)}); function textPaste(event) { event.preven.原创 2020-08-10 14:47:22 · 5131 阅读 · 2 评论 -
XMLHttpRequest上传文件实现进度条(-onprogress- )
XMLHttpRequest上传文件实现进度条(-onprogress- )文件实现进度条、下载速率等转载 2020-08-05 17:24:12 · 1141 阅读 · 0 评论 -
HTML和JS处理打开窗口
1、在当前窗口打开：可后退html:<a href="url" target="_self"></a>js:window.open("url","_self")2、在当前窗口打开，禁止后退js:location.replace("新url");3、在新窗口打开，只能打开一个html:<a href="url" targrt="自定义窗口名"></a>js:window.open("url","自定义窗口名")4、在新窗口打开，.原创 2020-07-14 22:34:56 · 245 阅读 · 0 评论 -
vscode 如果设置是否二次确认是否删除
我在网上浏览下，没有关于这个的介绍，我们vscode很多的内容都的设置都在setting.json文件中在文件那栏点击出现首选项中的设置点击，然后搜索一个j’son就可以展示这个内容了，这个属性表示的是否需要二次确认，如果需要就是true,不需要的话就是false...原创 2020-07-03 09:51:38 · 1425 阅读 · 0 评论 -
vscode 删除的文件如何找回？？
我们由于误删除的文件其实找回还是比较简单的，因为删除的文件默认在回收站里面直接在回收站恢复一下就OK了原创 2020-07-03 09:43:25 · 5239 阅读 · 0 评论 -
js的client系列、offset系列、scroll系列详细分析
一、 client系列1、clientWidth和clientHeight表示可视区域的高度（其中只有padding包含在里面，其他的border、margin、滚动条都不包含）存在垂直滚动条:contentWidth + padding - scollbarWidth不存在滚动条:contentWidth + padding2、clientTop和clientLeft表示边框的宽度，指的是border,有滚动条就包含滚动条scrollbarWidth = (co原创 2020-06-30 11:37:45 · 581 阅读 · 0 评论 -
css实现一键设置全屏置灰
在前段时间，我们向疫情奋战的英雄致敬的时候，绝大多数的app都让自己的软件或者网站置灰，今天我们就整个b站为例子去看下这张图很鲜艳：这张图就很暗：很多人会觉得改变这个很复杂，其实只要一个属性就欧克大家可以多看下这个属性，做一些试图处理还是很不错的，很多的美颜效果就是根据这个做的，哈哈哈，自己给自己滤镜一个...原创 2020-06-30 11:24:27 · 1168 阅读 · 0 评论 -
宏任务和微任务：setTimeout和Promise执行顺序
setTimeout(function(){ console.log(1); },0); new Promise(function(a,b){ console.log(2); for(var i=0;i<10;i++){ i==9&&a(); } console.log(3) ...原创 2020-06-18 18:09:22 · 758 阅读 · 0 评论 -
innerHTML、outerHTML、innerText、outerText区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div> ooooo原创 2020-06-16 20:16:37 · 248 阅读 · 0 评论 -
浏览器处理跨域
对于开发者，浏览器会存在跨域的行为，同源策略导致不能访问到某个地址的内容，我们采用的主要是关于浏览器的安全模式找到chrome安装目录下的 chrome.exe 运行程序，以此创建快捷方式，建议把此快捷方式放到桌面；在电脑硬盘里创建一个空文件夹，并记录此文件夹的路径；右键 chrome 快捷方式，找到 属性 栏目并点击；在 目标 位置最后添加语句，--disable-web-security --user-data-dir=空文件夹的路径；然后双击 chrome 快捷方式 你可以快乐的跨域了.原创 2020-06-16 09:23:11 · 282 阅读 · 0 评论 -
js 代码运行时间
很多的时候我们可以通过测试代码的运行性能就经常会去测试他的响应时间在开头用console.time()在结尾用console.timeEnd()、输入结果如下：当然我们可以给他设置标识在开头用console.time(‘OBJ’)在结尾用console.timeEnd('OBJ')、输入结果如下：...原创 2020-06-01 10:33:52 · 357 阅读 · 0 评论 -
scss用法最全简述
sass一、什么是 sassSass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。二、安装 sasshttps://sass.bootcss.com/installnode.js 下 npm install -g sassmac 系统： gem install sasswindo原创 2020-06-01 09:34:47 · 2793 阅读 · 1 评论 -
数组的比较是否前后发生改变
数组值的比较在开发的过程中，我们经常会碰到这样的比较数组值的一个比较，我这次开发的背景是，如果前后数组没有发生改变，则不弹框，但是如果变化了就要弹框提醒是否保存当然处理，直接比较是不对的，我们需要把他转化对象或者json形式，最简单的就是转化为json形式进行比较，当然，如果你的数组是一维的纯属组的话，你直接可以Array.toString()或者join(’,’)进行转化，但是碰到数组对象...原创 2020-01-21 18:09:48 · 1658 阅读 · 0 评论 -
翻书折纸特效
这个特效大家可以自己去改变其中的值去看看有什么变化，原理起始我也不是很懂，只知道用效果展示：hover前：<style> .page{ background: pink; width: 120px; height: 120px; } .content { width: 120px; height: 120px; ...原创 2020-01-21 18:13:58 · 310 阅读 · 0 评论 -
element-ui proper选择弹出框定位错乱
在开发的过程中是否遇到过选择弹出框定位不能跟着选择框移动而移动的问题而烦恼呢，我有过，为了让大家从坑里跳出来，我有必要简单告诉你一下哟，挺好了。。。。我们先来复现一下我们的问题把，有图有真相嘛，如下图1图1：选择弹出框定位错误复现图处理方案：1、如果是el-select在el-select标签中加入:popper-append-to-body="false"这个属性，记住前面有“：”哟。2、如果是el-cascader在el-cascader标签中加入:append-to-bod.原创 2020-05-25 11:38:33 · 2187 阅读 · 3 评论 -
常用图片jpg png jpeg gif等格式介绍
常见的图片格式大全：JPEG (Joint Photographic Experts Group)TIFF (Tagged Image File Format)PNG (Portable Network Graphics)GIF (Graphics Interchange Format)BMP (Bitmap)PSD (Photoshop Document)SVG(Scalable V...原创 2019-12-25 15:55:23 · 5188 阅读 · 0 评论 -
HTTP前端缓存原理详述
HTTP缓存缓存是指可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速率很快。当某一硬件要读取数据时，会首先从缓存中查找需要的数据，如果找到了则直接执行，找不到的话则从内存中找。而http缓存主要针如css，js，图片等更新频率不大的静态文件。缓存的优缺点优点加快网页打开速度减少网络宽带的消耗减轻服务器端的压力缺点服务器缓存中的数据变了，浏览器不知道数据...原创 2020-01-01 22:36:33 · 522 阅读 · 0 评论 -
input标签copy事件的应用
在我们工作中，遇到表格需要把其从网页复制到execl表格中，利于分析。可以引用到input标签中自带的copy方法。如图所示，当我们点击复制按钮就可以赋值到我们的电脑缓存中，在execl表格中crtl+v就可以做到粘贴。复制到execl的结果如图所示：那么问题来了，怎么通过代码实现呢？把需要复制的代码最外侧套用一个input方法，在里面套用一个div，加一个id。我们图中...原创 2020-04-13 15:38:35 · 744 阅读 · 0 评论