![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
沐歌丨丶
这个作者很懒,什么都没留下…
展开
-
2024 axios封装 包括请求拦截、错误码等
【代码】2024 axios封装 包括请求拦截、错误码等。原创 2024-01-25 09:56:58 · 708 阅读 · 0 评论 -
react 实现chatGPT的打印机效果 兼容富文本,附git地址
我的思路是将字符串切割成两个数组,一个是 的标签数组,一个是按字符和标签截取的数组,效果如图:然后遍历chucksList生成新的数组,如下图:然后遍历这个数组,使用定时器插入dom即可:定义图像映射的区域。:定义文档中所有相对链接的基本URL。:插入换行符,强制文本换行。:定义表格列的属性,通常与一起使用。:嵌入外部内容,如多媒体文件或应用程序。:插入水平线,通常用于分隔内容。原创 2023-11-07 10:52:31 · 1164 阅读 · 0 评论 -
ant design DatePicker禁用之前的时间
【代码】ant design DatePicker禁用之前的时间。原创 2023-10-17 17:52:19 · 206 阅读 · 0 评论 -
ant design pro v6如何引入第三方js?如腾讯地图等!
由于ant pro隐藏.html,需要通过他们约定的方式引入即可。原创 2023-10-16 14:11:55 · 669 阅读 · 0 评论 -
2022前端vue面试题
这里是我整理的一些常见的vue面试题集,希望能够帮助到大家原创 2022-08-29 17:19:35 · 1745 阅读 · 0 评论 -
js/vue3 取消已发送网络请求的方式
前置代码,先起一个简单的node本地服务,代码如下:一、xmlhttprequest官方解释:XMLHttpRequest.abort()如果请求已经发送, 该方法将中止请求。当一个请求被中止时,它 readyState被更改为 XMLHttpRequest.UNSENT(0) 并且请求的 status代码被设置为 0。AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。你可以使用 AbortController.AbortController() 构造原创 2022-06-23 10:23:39 · 1246 阅读 · 0 评论 -
ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView
老规矩,话不多说,直接上实现方式注意:本帅用的版本 “antd”: “4.16.13”,前提代码如下 const generateUUID = () => { let d = new Date().getTime(); const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => { const r = (d + Math.random() * 16) % 16 | 0;原创 2022-05-31 13:52:58 · 4693 阅读 · 0 评论 -
webpack 的plugin简单实现 customize-cra
我是用的是 npx create-react-app my-app创建的项目个人不推荐通过 npm run eject拉取webpack配置1 下载 customize-cra 和 react-app-rewiredcnpm install customize-cra react-app-rewired --dev2 更改 package.json 中的 scripts 配置将原本以下四行做替换 "scripts": { "start": "react-app-rewired star原创 2022-05-18 23:51:16 · 610 阅读 · 0 评论 -
使用coding自动化集成部署vue/react
上一篇有记录到使用jenkins实现自动化部署web项目,这篇讲一下如何使用codin部署1.创建项目首先注册一个coding账号并创建一个项目2.录入凭证通过上图点击左下角的项目设置进入页面,点击左下角开发者选择》凭证管理》录入凭证凭证名称:随便填个root:填写服务器的root密码:填写服务器的密码3.制作仓库这一步的目的是打包后的压缩包自动上传到该目录地址:web 可以写别的,只是个名称,用来指定仓库4.构建计划点击确定后就可以进行相应配置了,也可以从外边进入设置,原创 2022-05-04 21:17:38 · 2353 阅读 · 0 评论 -
umi+Ant Design Mobile+rem搭建移动端H5框架
1.创建项目yarn create @umijs/umi-app2.安装Ant Design Mobileyarn add antd-mobile3.安装postcss-plugin-px2remcnpm i postcss-plugin-px2rem4.配置 /.umirc.ts/* * @Author: muge * @Date: 2021-12-29 10:41:57 * @LastEditors: Please set LastEditors * @LastEditTim原创 2022-03-01 15:14:52 · 5395 阅读 · 3 评论 -
ant design pro v5 Error: Module “xxx“ does not exist in container.报错
解决方案一在/config/config.ts 下注释掉 mfsu: {}, 或者删掉即可解决方案二删除/src/.umi 这个文件夹重启即可原创 2022-01-18 15:39:51 · 2421 阅读 · 1 评论 -
调整wang富文本编辑器层级
由于做了一个上传图片裁剪,被富文本挡住了,效果如下:解决方式如下://添加样式即可// wang富文本.w-e-toolbar,.w-e-menu,.w-e-text-container,.w-e-text { z-index: 1 !important; // 这是内容框}原创 2022-01-07 10:58:05 · 361 阅读 · 0 评论 -
react自定义鼠标右键菜单,跟随鼠标右键位置展示
我的练习项目用的是ant design pro,直接上代码项目demo地址 点我打开import React, { useState, useRef, useEffect } from 'react';import { message } from 'antd';import styles from './index.less';const Index = () => { const [visible, setVisible] = useState<boolean>(fals原创 2022-01-05 10:39:53 · 3346 阅读 · 0 评论 -
umi 项目安装 antd-mobile v5 后报错如何解决
在 umi 项目中引入 antd-mobile 时出现了类似下面这样的报错:These dependencies were not found:原创 2021-12-29 13:39:01 · 4051 阅读 · 0 评论 -
react-dnd 实现拖拽(ant tree)到其他列表
这是我的demo地址 : react_dnd本文将实现一个列表拖拽和一个属性组件拖拽(ant design tree)1.1.使用DndProvider定义一个可以拖拽的范围/* * @Author: muge * @Date: 2021-12-04 16:59:25 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-12-08 14:24:47 */import React, { useState } from .原创 2021-12-08 14:46:48 · 1838 阅读 · 3 评论 -
vue3+vite+ant design vue+router模板搭建
1.项目下载yarn create vite根据提示选择即可2.安装项目依赖cd 进去或者直接通过vscode打开运行 yarn 安装依赖3.安装ant-design-vue组件库cnpm i --save ant-design-vue@next然后在main.ts中引入import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(原创 2021-10-18 17:20:19 · 693 阅读 · 2 评论 -
vite+vue3+element Plus搭建
1.安装安装命令如下:yarn create viteyarn add element-plus --devcnpm install element-plus --save2.在main.ts中引入import { createApp } from 'vue'import App from './App.vue'// 引入element plusimport ElementPlus from 'element-plus';// 引入css文件import 'element-plus/原创 2021-10-16 21:34:31 · 259 阅读 · 0 评论 -
JavaScript 数字格式化,三位逗号分隔
// 数字格式化,三位逗号分隔export const formatNum = (nums: number) => { let num = (nums || 0).toString(); const re = /\d{3}$/; let result = ''; while (re.test(num)) { result = RegExp.lastMatch + result; if (num !== RegExp.lastMatch) { result原创 2021-09-13 09:29:05 · 237 阅读 · 0 评论 -
vue3 路由报错 Uncaught Error: Catch all routes (“*“) must now be defined using a param with a custom reg
错误:const notFound = () => import('@views/404/404.vue') { path: '*', name: '404', component: notFound }根据报错信息可得 必须使用正则表达式解决方案:const notFound = () => import('@views/404/404.vue') { // 匹配所有路径 vue2使用* vue3使用/:pathMatch(.*)*或原创 2021-08-09 14:26:33 · 2663 阅读 · 2 评论 -
vue3.0使用vant 覆盖原本类名样式方法 踩坑
问题:想修改 组件 ,发现只能通过style 修改,想通过类名覆盖却发现不生效未解决:用了样式穿透 /deep/:deep()之类的都不行解决方式:后来发现是scoped的问题,把scoped去掉或者再加一个 style标签代码如下代码如下:<style lang="less" scoped> 导航的样式 .nav { height: 35px; background-color: black; box-sizing: border-box;原创 2021-08-04 17:06:59 · 1069 阅读 · 1 评论 -
vue3.0 vite引入SVG iconfont
1.安装cnpm i vite-plugin-svg-icons -D2.配置 vite.config.tsimport viteSvgIcons from 'vite-plugin-svg-icons';import path from 'path';export default () => { return { plugins: [ viteSvgIcons({ // 指定需要缓存的图标文件夹 iconDirs: [path.r原创 2021-08-03 14:47:32 · 3933 阅读 · 1 评论 -
vscode保存自动将CRLF 转换成 LF
1、下载vscode插件:EditorConfig for VS Code2、在项目目录下新建文件:.editorconfig3、在项目根目录新建 .editorconfigroot = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true...原创 2021-08-02 15:50:01 · 1849 阅读 · 2 评论 -
去掉window.print()去除页眉页脚及网址
直接在样式中加入@page { margin-top: 0; margin-bottom: 0}原创 2021-07-15 15:57:08 · 1234 阅读 · 0 评论 -
2024 jspdf html2canvas react typescript封装实现导出PDF功能 支持滚动
【代码】2024 jspdf html2canvas react typescript封装实现导出PDF功能 支持滚动。原创 2021-07-15 14:53:19 · 2560 阅读 · 6 评论 -
微信小程序request请求封装
/** * 请求头 */const header = { 'content-type': 'application/x-www-form-urlencoded', 'Authorization': "Bearer " + wx.getStorageSync("token"), 'os': 'android', 'version': '1.0.0', 'device_token': 'ebc9f523e570ef14',}// url baseconst base = 'htt原创 2021-07-08 09:54:56 · 227 阅读 · 0 评论 -
JavaScript根据value值获取key
const obj = { a:1,b:2,c:3,d:4,g:4}function getMax(obj){ const maxNumber = Math.max(...Object.values(obj)) const arrs = {} for (const key in obj) { if(obj[key]==maxNumber){ arrs[key]=obj[key] } } return arrs}原创 2021-04-26 23:24:34 · 2658 阅读 · 0 评论 -
css设置了超出隐藏省略号无效解决
verflow: hidden;text-overflow: ellipsis;white-space: nowrap;设置如上三条,但并没有出现省略号,只需要添加display: block或者display: inline-block即可原创 2020-12-31 17:05:41 · 2301 阅读 · 0 评论 -
css3+js 旋转木马轮播特效
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title原创 2020-10-11 00:00:59 · 573 阅读 · 0 评论 -
React控制元素显示隐藏的方式
React控制元素显示和隐藏的方法如下:第一种是通过state变量来控制是否渲染元素,类似vue中的v-if。第二种是通过style控制display属性,类似vue 中的v-show。第三种是通过动态切换className。方法一:第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不会渲染的。class Demo extends React.Component{constructor(props){super(props);thi原创 2020-10-09 11:56:07 · 3158 阅读 · 0 评论 -
经纬度转换-高德与百度的互转
// 高德转百度(火星坐标gcj02ll–>百度坐标bd09ll)gaoDeToBaidu = (gd_lon,gd_lat) => { var PI = 3.14159265358979324 * 3000.0 / 180.0; var x = gd_lon, y = gd_lat; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * PI); var theta = Math.atan2(y,原创 2020-08-24 15:05:50 · 2398 阅读 · 0 评论 -
CSS 单(多)行文本超过部分显示省略号
1.单行显示省略号.text-singal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}2.多行显示省略号.text-all { white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;原创 2020-08-15 10:04:17 · 108 阅读 · 0 评论 -
vscode 前端常用插件
提示:顺序并不代表优先级1.GuidesGuides插件能够帮你在代码缩进的地方用竖线展示出索引对应的位置,而且点击代码,它还会将统一代码块范围的代码用统一颜色竖线标出2.Auto Close Tag插件会自动帮你补充HTML闭合标签,比如你输完的后面的尖括号后,插件会自动帮你补充3.Auto Rename Tag插件会在你修改HTML标签名的时候,自动帮你把它对应的闭标签同时修改掉4.Vue 2 Snippets5.Vetur是Vue的开发辅助工具,安装它之后会得到代码高亮、输入辅助等功原创 2020-07-15 10:37:23 · 322 阅读 · 0 评论 -
简述一下防抖和节流,以及应用场景
简述:(1)防抖:就是将一段时间内连续的多次触发转化为一次触发。(2)节流:减少一段时间内触发的频率区别:两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求。而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发)场景:(1)函数节流的应用场景一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作比如你想获取滚动条的位置,然后执行下一步动作。如果监听后执行的是Dom操作,这样的频繁触发执行,可能会影响到浏览器性能,甚至会将浏览器原创 2020-06-09 19:57:38 · 9804 阅读 · 1 评论 -
使用Promise封装原生Ajax方法--get-post
无论是工作中,还是面试中,感觉都会有需要的。get:<script> function getRequest(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.onreadystatechange = function原创 2020-06-09 16:43:00 · 492 阅读 · 0 评论 -
js事件委托--面试考点
如题:.一个ul钟有一千个li,每一个li都需要触发js操作。如何降低重复的事件绑定,从而降低性能消耗。考点:事件委托。为什么要事件委托:在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大原创 2020-06-09 13:50:09 · 347 阅读 · 0 评论 -
transparent透明
用来指定全透明色彩。transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。在CSS2中,border-color也开始接受transparent作为参数值,《Open eBook™ Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。IE6不支持border的颜色为tr原创 2020-06-09 13:00:03 · 1043 阅读 · 0 评论 -
JavaScript ES5-ES10汇总两张图
两站图汇总了ES5-ES10 ,以备以后的晋级学习。。。原创 2020-06-07 21:22:11 · 316 阅读 · 0 评论 -
ja面试 函数的节流和防抖
<!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> <script>原创 2020-06-07 21:17:53 · 188 阅读 · 0 评论 -
Webstorm自动给函数(参数)或代码块添加注释的快捷键
/** + 回车也就是 斜杆+两个** 然后回车即可原创 2020-06-07 21:16:17 · 4527 阅读 · 3 评论