![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端功能实现
道甚夷
给一个币,实现你的愿望
展开
-
koa实现excel下载前后端代码
【代码】koa实现execel下载前后端代码。原创 2024-07-04 10:26:01 · 251 阅读 · 0 评论 -
js:Cannot use import statement outside a module
Cannot use import statement outside a module原创 2022-09-06 18:17:08 · 502 阅读 · 0 评论 -
纯CSS实现各种不规则图形
https://www.html.cn/tool/css-clip-path/生成器是真的爽想要啥就生成啥原创 2020-12-11 10:45:39 · 1410 阅读 · 2 评论 -
element中table-column里slot的使用
使用场景:比如我们需要在table的某一列中使用input输入并同时更新table的data。而其他列则是展示数据即可。解决方案:我们可以使用slot来插入自定义元素,并且处理元素中的数据与table的data之间的关系。封装组件: //1. 建议使用这种写法,这样不需要在使用的时候再次解构对象。 <template slot-scope="scope"> // scopeName是配置传过来的任意名,这里使用了动态slot。 <template v-if="scope.r原创 2021-11-02 18:20:00 · 6253 阅读 · 0 评论 -
element上传组件多图-限制上传文件数量
限制文件上传数量原创 2022-06-20 09:29:38 · 554 阅读 · 0 评论 -
element-ui el-image 以及背景图片地址正确写法
// data或者哪里定义一个变量imgSrc: require(`@/assets/images/xxx.png`)<el-image :src="imgSrc">// 直接写<el-image :src="require(`@/assets/images/xxx.png`)">// 背景图片background: url(~@/assets/images/xxx.png) no-repeat center/cover;...原创 2020-08-14 17:58:45 · 6004 阅读 · 1 评论 -
js-promise-resolve应用(3)
使用promise.resolve()的then捕获异步结果。原创 2022-08-25 16:41:06 · 91 阅读 · 0 评论 -
js-promise-resolve应用(2)
在这个超时的例子中,使用promise.resolve来观察和记录正常的promise的结果,但不破坏原有的promise。原创 2022-08-25 16:21:51 · 151 阅读 · 0 评论 -
js-await代替promise优化代码
【代码】js-await代替promise优化代码。原创 2022-08-25 12:10:52 · 214 阅读 · 0 评论 -
js-设计模式-责任链-应用-管理状态(路由的next)
将多个条件的代码块分割到各个函数中,方便阅读及添加条件扩展。设置next控制是否中断条件判断。原创 2022-08-25 10:42:07 · 95 阅读 · 0 评论 -
js-对象数组新增对象元素-去重
场景:a数组合并到b数组,两数组内部都是对象元素,合并后不能存在相同对象元素。方法4:先push,后续利用map过滤处理。方法2:查找处理,利用JSON字符串。方法3:先push,后续程序过滤处理。方法1:数据源处理,转为map。原创 2022-08-24 16:25:37 · 775 阅读 · 0 评论 -
js-generator-状态机及控制状态机
使用generator自身状态。使用一个变量维护状态。原创 2022-08-23 18:39:46 · 315 阅读 · 0 评论 -
js-数组对象去重问题三归一
方法1:适用JSON.stringify+includes直接查找。三问:两个ab数组对象,把a数组对象中某一项添加到b数组对象中。二问:push不重复item(对象)项到数组会怎么处理。模式,可以直接存对象,而且是不重复的,即具有去重作用。答:判断对象是否存在数组中,不存在再加入。一问:对象数组去重你会怎么处理。原创 2022-08-23 18:37:47 · 221 阅读 · 0 评论 -
js-promise.resolve运用(1)
设置一个默认的promise.resolve,如果有点击事件,则加入一个promise.形成promise链.中间可以随时加入,最后依次执行。场景:表单提交时,需要判断是否发送消息,如果需要,则等待发送完成后再提交表单。优化,promise.resolve()的运用。...原创 2022-08-19 19:01:42 · 447 阅读 · 0 评论 -
goJS-绘图-控制显示内容
goJS,绘图,控制显示内容原创 2022-06-28 10:35:27 · 676 阅读 · 0 评论 -
element上传组件多图-上传过程中禁止再次多图上传操作
多图上传过程中禁止再次上传原创 2022-06-13 15:19:11 · 691 阅读 · 0 评论 -
node-koa2-proxy-middleware代理报错-415 Unsupported Media Type
问题status code: 415 Unsupported Media Type后端返回报错:specified enconding unsupported 具体编码类型不支持查找问题检查请求headersRequest Headers是自己的,直接请求没问题,那么问题不是出现在请求。所以看响应部分,本地直接请求服务时和代理请求时差别:本地请求:content-type: application/json;代理请求:content-type: text/plain;这个代理没给我转原创 2022-05-10 17:55:44 · 417 阅读 · 0 评论 -
js-获取元素在页面的位置
公式:位置 = getBoundingClientRect + 滚动计算let elContent = document.querySelector('.content').getBoundingClientRect()let scrollX = document.documentElement.scrollLeft || document.body.scrollLeftlet scrollY = document.documentElement.scrollTop || document.bod.原创 2022-05-09 11:34:38 · 4504 阅读 · 0 评论 -
ProtocolError: Protocol error (Page.printToPDF): Printing is not available
生成pdf不能使用浏览器预览模式,必须设置headless: trueconst puppeteerConfig = { devtools: process.env.NODE_ENV === 'development' && type !== 'pdf'}const browser = await Puppeteer.launch(puppeteerConfig);加个判断即可。...原创 2022-05-07 10:10:08 · 1119 阅读 · 0 评论 -
js保持滚动条在底部
el.scrollTop = e.scrollHeightel.scrollIntoView(false) //在底部el.scrollIntoView() //在顶部原创 2021-10-30 02:29:35 · 526 阅读 · 0 评论 -
从对像中获取指定属性
场景:后端经常返回多余的值。而回显只需要部分属性原生JSON.parse(JSON.stringify(obj, [‘key1’, ‘…’]))实例: let obj = { 'a': 1, 'b': '2', 'c': 3 }; let newObject = JSON.parse(JSON.stringify(obj, ['a', 'b']))lodash的pick方法示例:let obj = { 'a': 1, 'b': '2', 'c': 3 };_.pick(obj, [原创 2021-10-29 11:09:35 · 504 阅读 · 1 评论 -
前端读取远程文件大小
什么文件的格式都可以。setup(props) { onMounted(() => { const {proxy}=getCurrentInstance(); // vue3.0中将axios挂载到vue实例下,需要这样使用。proxy其实就是this。 proxy.$axios.get( // 自己封装的axios。临时用下,粗糙的一批。 '/news/sinahome/pc_index_1012.jpg', // 随便拿的新浪图片,可随意替换原创 2021-10-12 18:54:01 · 1029 阅读 · 0 评论 -
文字两端对齐,对text-align:justify的再次理解
text-align:对于多行文本,除了最后一行之外都可以实现两端对齐,最后一行依旧左对齐,这是因为text-align不会对文本的最后一行起作用,因此对于单行文本的段落不会实现效果,单行文本既是第一行,也是最后一行。明白了原理,那实现就容易了,在文本后面构造标签即可,可添加span标签或者使用伪元素。中英文都可以兼容。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&.原创 2021-08-23 17:25:59 · 253 阅读 · 0 评论 -
js抽奖思路以及算法
以前做后端公司做活动的时候实现过该功能,没想现在做前端也要做这功能,就像你以为逃出来了,却又进入了。面试也有机会会被问到这种问题。思路:一堆数组,打乱数组即是洗牌,然后随机抽取其中一个,然后去除该下标,重新洗牌,以此反复。php其实也有一个函数shuffle是可以直接打乱数组的,而js是需要自己去写这样的函数,里面涉及到洗牌算法,其实函数到思路很简单,就像打牌到时候洗牌一样。Fisher–Yates shuffle 洗牌算法该方法就是每次在数组中随机产生一个位置,依次将数组中的每一项与该次产生的随原创 2021-08-13 11:05:22 · 669 阅读 · 0 评论 -
css 多行省略的几种写法
<style> .box { display: block; /* display:inline-block; */ width: 100px; /* 一行start */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;原创 2020-09-14 15:21:48 · 3326 阅读 · 0 评论 -
vue -选项卡缓存划过的选项
思路是单例模式。列表里面的item封装起来。在item组件里面设置标识isInit来判断是否要再次加载当前item。props: { index: { // 当前tab下标 type: Number, default: 0, }},data() { isInit: false // 默认未初始化},watch:{ // 监听下标的变化 index(val){ if (this.i === val && !this.isInit) { this.isI原创 2020-09-05 01:17:46 · 184 阅读 · 0 评论 -
12行计算两个时间差,返回00:00:00格式
12行计算两个时间差,返回00:00:00格式直播时间用 let a = 'Thu Aug 20 2020 24:00:00 GMT+0800 (中国标准时间)' let b = 'Thu Aug 22 2020 01:30:10 GMT+0800 (中国标准时间)' function getHis(a, b) { let an = new Date(a).getTime() let bn = new Date(b).getTime() let原创 2020-08-13 17:27:58 · 306 阅读 · 0 评论 -
博客首页特效
<style>html,body { height: 100%; width: 100%; margin: 0px; padding: 0px;}ul li { list-style: none;}#fireworks { position: fixed; top: 0px; z-index: 9999;}a { position: relative; z-index: 10000}</s原创 2020-08-06 15:49:48 · 314 阅读 · 0 评论 -
ng-zorro给步骤条加更多的描述
最简洁的写法:<nz-steps [nzCurrent]="index" (nzIndexChange)="onIndexChange($event)" [nzProgressDot]="progressTemplate"> <ng-container *ngFor="let item of steps2; let idx = index"> <nz-step [nzTitle]="item.title" [nzSubtitl原创 2020-06-29 10:50:21 · 986 阅读 · 0 评论 -
ws报错没有Sec-WebSocket-Protocol
ws报错Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received解决:必须前后端配合,别想前端自己搞定。后端头信息设置'Sec-WebSocket-Protocol'的值比如wamp前端对应设置同样的值var Socket = new WebSocket(url, [protocol] );// protocol: 子协议,可以多个原创 2020-06-12 11:10:42 · 5454 阅读 · 7 评论 -
虾米音乐的一个小功能
喜欢音乐,想做音乐播放网站,但,很懒。。。 面试的时候被问到该问题,在广州厦滘地铁站附近一家叫做云雀的公司主管问的。 看了虾米音乐的代码,简单创建页面实现了该功能,现总结如下(只贴思路,无代码)。功能:从音乐列表里面点开一个页面后点击播放,怎么添加到播放列表播放音乐列表为 list.html新开页面为 a.htmllist.html 页面加载页面时设置cookie...原创 2020-01-07 16:46:46 · 176 阅读 · 0 评论