前端
文章平均质量分 50
Amao?
这个作者很懒,什么都没留下…
展开
-
typescript近期理解
typescript近期理解原创 2022-11-15 18:07:52 · 421 阅读 · 1 评论 -
Typescript类,泛型,各种类型工具
Typescript类,泛型,各种类型工具原创 2022-11-15 18:07:01 · 731 阅读 · 0 评论 -
函数对象数组类型+接口
函数对象数组类型+接口原创 2022-11-01 14:54:55 · 977 阅读 · 0 评论 -
断言,类型守卫,联合声明
typescript断言,类型守卫,联合声明原创 2022-11-01 14:24:01 · 981 阅读 · 0 评论 -
react源码解析——ReactDOM.render
ReactDOM.render原创 2022-09-11 14:06:32 · 483 阅读 · 0 评论 -
前端错误处理、vue项目错误处理(异常采集)
前端异常捕获守卫原创 2022-09-10 17:00:27 · 2104 阅读 · 0 评论 -
git 流程
1原创 2022-08-06 00:56:31 · 156 阅读 · 0 评论 -
面试 场景题
前端面试 场景原创 2022-07-24 03:45:14 · 562 阅读 · 0 评论 -
react 源码解析一 createElement
react 源码分析原创 2022-07-23 11:45:08 · 233 阅读 · 0 评论 -
前端 面试题
前端面试原创 2022-06-07 21:34:01 · 3212 阅读 · 0 评论 -
js 禁止打开控制台无限debugger处理
var div = document.createElement('div');var loop = setInterval(function () { console.log(div); console.clear();}, 200);Object.defineProperty(div, "id", { get: function () { clearInterval(loop); //alert("禁止非法调试!请关闭开发者工具!");.原创 2022-03-30 21:43:47 · 1524 阅读 · 0 评论 -
封装 组件集
二次封装 ant-pro DatePicker 各类选择器合集import { ProFormDatePicker, ProFormDateRangePicker, ProFormDateTimePicker, ProFormDateTimeRangePicker, ProFormTimePicker,} from '@ant-design/pro-form';import type { FieldProps, ProFormFieldItemProps } from '@ant原创 2022-02-28 10:56:09 · 854 阅读 · 0 评论 -
二次封装 ant-d Button +form 拓展功能
二次封装 ant-d Button +form 拓展功能封装了 ant-d Button +form。 拓展了一些功能,如按钮权限参数配置,气泡确认框统一样式,下拉按钮+权限控制,form表单等类型声明文件位置import type { ButtonProps, DropDownProps, FormItemProps, ModalProps, PopconfirmProps } from 'antd';import { Dropdown } from 'antd';import { Form原创 2022-02-28 10:44:58 · 598 阅读 · 0 评论 -
二次封装 ant-pro +ProFormSelect
二次封装 ant-pro +ProFormSelect封装了ant-pro +ProFormSelect。 拓展了一些功能,如格式化,下拉搜索关键字为红色,下拉框过滤等。类型声明文件位置import { ProFormSelect } from '@ant-design/pro-form';import type { ProFormSelectProps } from '@ant-design/pro-form/lib/components/Select';import type { Fiel原创 2022-02-28 10:29:40 · 901 阅读 · 0 评论 -
ant-d pro ProFormText 二次封装
这里没啥好说的 只是单纯的合并了’password’ | ‘textArea’ 此外配合其他封装/* * @Author: your name * @Date: 2021-10-28 18:01:14 * @LastEditTime: 2022-02-22 15:19:03 * @LastEditors: Mao * @Description: In User Settings Edit * @FilePath: \archives-web\src\components\myComponen原创 2022-02-28 10:24:59 · 2575 阅读 · 0 评论 -
二次封装 ant-pro table + react-resizable实现表头控制拉拽
二次封装 ant-pro table + react-resizable实现表头控制拉拽封装了 ant-pro table + react-resizable+form 可拖动表格。 拓展了一些功能,如格式化,支持保存用户表格宽度习惯,接口分页字段配置,可编辑表格等。1 react-resizable 组件import './index.less';import { Resizable } from 'react-resizable';npm install --save react-r原创 2022-02-28 10:08:46 · 1986 阅读 · 0 评论 -
ECharts 柱形图 Y轴不等距轴
Y轴因为数据大小差距太大导致图表观感极差思路 :将页面显示的数据 data开根号或者立方根Data.map(i=>Math.cbrt(i))此外需要考虑的点:1 tooltip 显示数据需要自定义2 Y轴的数据需要逆向显示 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'F原创 2022-01-24 16:53:36 · 1174 阅读 · 0 评论 -
关于JS里的数组和对象的日常使用
一些关于js数组的基础知识点,只是日常使用,不攻坚。如有什么错误,欢迎大家指正????Array.prototype.map()返回一个新的Array,每个元素为调用func的结果。新数组的长度和原来的是一样的,他只不过是逐一对原来数据里的每个元素进行操作,并且返回函数处理后的结果。语法: var newArray = arr.map(function callback(currentValue, index, array){ //对每个元素的处理 })参数 callback:用来生成新数组用的函数原创 2022-01-14 10:11:06 · 383 阅读 · 0 评论 -
pdfjs 显示指定页码
前端 pdf原创 2021-12-20 13:44:38 · 1526 阅读 · 0 评论 -
js Math 函数
1、Math.round() “四舍五入”2、Math.ceil() “向上取整”, 即小数部分直接舍去,并向正数部分进13、Math.floor() “向下取整” ,即小数部分直接舍去alert(Math.ceil(25.9)); //26alert(Math.ceil(25.5)); //26alert(Math.ceil(25.1)); //26alert(Math.floor原创 2021-12-06 15:35:24 · 360 阅读 · 0 评论 -
前端 高级条件检索 +ant-d pro
这里写自定义目录标题import type { Key } from 'react';import { useState, useEffect } from 'react';import type { ProColumns } from '@ant-design/pro-table';import ProTable from '@ant-design/pro-table';import { getMaintainList } from '@/services/preservation/archi原创 2021-11-11 13:45:58 · 884 阅读 · 0 评论 -
打印->分页打印
该打印方式为DIV 打印局部打印style={{ pageBreakAfter: ‘always’ }} 此处为分页设置。可以以此为分线进行第二页打印。但是也要注意A4的高度为11**PX 不能超过,内容超过也会开辟第二页打印内容。<div id="tableinfo" style={{ position: 'relative', display: 'none' }}> <div>第一页</div> <div style={{ pageBreakAfte原创 2021-09-18 15:19:49 · 218 阅读 · 0 评论 -
react antd table 行点击事件改变选中行的背景颜色
需求是 点击表格某一行选中,修改选中行的背景颜色查看antd的官方文档 https://ant.design/components/table-cn/会发现文档中给出了两个属性 rowClassName 和 onRowrowClassName: 表格行的类名, 如下图: 我通过this.setRowClassName方法添加类名onRow: 用于给表格添加事件, 如onClick, onMouseEnter 等内部事件 setRowClassName = (record) => {原创 2021-09-18 15:10:47 · 2881 阅读 · 0 评论 -
react Model框可拖拽
最近因为业务需求需要将ant-d model框设置为可拖拽组件,但因为ant-d 以及pro都没用可拖拽api所以自己用原生dom简单封装了一个import React from "react";import {Modal} from "antd";// 可控长度的随机数拼接时间戳成产唯一idconst createUniqID = length=>Number(Math.random().toString().substr(3,length) + Date.now()).toString(3原创 2021-09-06 21:16:47 · 855 阅读 · 0 评论 -
OSS 封装上传文件
前端上传文件程序开发基本流程在实际项目中,一般采用分布式及微服务的 web 业务系统中,文件的上传和下载都是直接在前端来实现对 oss 的操作。也就是前端直接上传,不通过自己的服务器。这样能够实现系统无阻碍的横向扩展。另一个原因是如果要把文件保存在运行 web 服务器的同一台服务器上时,那么在文件上传时可能会占满带宽,影响 web 的访问。分开存储不占服务器带宽。阿里 OSS 提供了三种前端直传方式:浏览器签名后直接上传 OSS(无需服务端干预)浏览器请求服务器签名地址后上传(需要服务端配合)浏原创 2021-08-19 16:37:53 · 510 阅读 · 0 评论 -
react展示各类型文件,音乐类型,视频类型,图片类型,pdf类型,html,txt ,word
该文章介绍对于不同类型文件的处理。文件均已HTTP请求方式这里需要注意的是’xls’, ‘xlsx’, ‘doc’, ‘docx’ 处理 是转译 转成了PDF 小伙伴们需要和后端协调import ReactAudioPlayer from 'react-audio-player';import { Player } from 'video-react';import ViewHTML from '@/components/viewHTML/ViewHTML.jsx'; //文件处原创 2021-08-17 14:09:15 · 943 阅读 · 1 评论 -
React ant-d多选框获取选中数据,需要返回单数据非数组形式,以及回显后台数据
this.props.ListType这里的isCheck 不需要也没事可以直接用e.target.checked判断[{title:'wuyifan',isCheck:'wuyifanisCheck',value:'zhanan'},]{this.props.ListType.map(item => { return <Checkbox checked={this.state[item.value] && this.state[item.valu原创 2021-08-10 22:30:47 · 727 阅读 · 0 评论 -
分享合并表单后端数据整合。(相同数据合并)
今天有个需求,将后端返回的数据先整合后,相同字段的相同数据进行合并的操作//统计每个月分出现的次数 用于合并表格 getcombin(data, key, target) { if (!Array.isArray(data)) return 1; data = data.map(_ => _[key]); let preValue = data[0]; const res = [[preValue]]; let in原创 2021-08-10 22:17:10 · 321 阅读 · 0 评论 -
用js来判断用户端浏览器(判断QQ浏览器、谷歌浏览器)方法
用js来判断用户端浏览器(判断QQ浏览器、谷歌浏览器)方法function getBrowserInfo(){ var ua = navigator.userAgent.toLocaleLowerCase(); var browserType=null; if (ua.match(/msie/) != null || ua.match(/trident/) != null) { browserType = "IE";原创 2021-05-17 17:26:07 · 1238 阅读 · 0 评论 -
Fetch 认识
文档1.https://github.github.io/fetch/2.https://segmentfault.com/a/11900000038106524.5.2. 特点1.fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求2.老版本浏览器可能不支持1)GET请求fetch(url).then(function(response) { return response.json() }).then(function(data) { con原创 2021-05-16 00:34:16 · 123 阅读 · 0 评论 -
前端正向代理react 脚手架配置代理
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const原创 2021-05-16 00:13:28 · 154 阅读 · 0 评论 -
uniapp-微信小程序 同声传译功能实现-配合编辑器(获取后台数据)
uniapp-微信小程序 同声传译功能实现-配合编辑器同声传译插件添加方法见 同声传译麻烦在编辑器初始化 获取后台数据在编辑器上 和语音输入同步的功能编辑器部分不用同声传译时编辑器初始化,用下面的方法Content是后台的数据。最后用watch监听,不然有的时候来不及渲染,编辑器内容时有时无。EditorContext.setContents(Object object)初始化编辑器内容onEditorReady($event) { // console.log(uni.createSe原创 2021-04-14 14:39:45 · 1086 阅读 · 1 评论