react公共倒计时组件实现 项目场景：项目场景：ant design 2.x没有倒计时组件，故写一个功能倒计时组件。开打开打直接上组件代码：import React, { Component } from 'react';export default class CountDown extends Component<any, any> { timer; props: { //倒计时间 deadtime: any; //是否行内显示 inline?: boolean;
react引入html2canvas和jspdf生成PDF打印及下载 项目场景：项目场景：系统新增打印发货单功能开工开工两种方式引入依赖包npm install html2canvas jspdf --saveyarn add html2canvas jspdf --save直接上代码：提示：项目引入组件较多，自行理解代码即可。注意opacity: 0 处为点睛之笔。防止拷贝的dom覆盖当前样式故隐藏，display:none是不行的，pdf会白纸的哦！import React, { createRef, LegacyRef } from 'reac
ant.design从 v3 到 v4 项目场景：项目antdv3已经不能满足日常开发需求，升级v4版本解决问题描述系统环境："antd": "^3.26.3","react": "^16.12.0",升级准备：1、请将react版本升级到 React 16.12.0 以上。2、请先升级到 3.x 的最新版本。 这里升级到3.26.12（我这边是用的yarn）yarn add react@16.12.0yarn add antd@3.26.12升级开始:npx -p @ant-design/codemod-v4 an
富文本html正则剔除图片sytle、小程序RichText图片显示不全问题 项目场景：项目相关背景：小程序taro rich-text组件改变内部img图片style导致图片展示不全问题描述：遇到的问题：经数据测试发现，style会替换为空，并不会删除，存在style="",然后详情图片展示不全网上大部分是这样写的，但是还是会有问题/** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style属性：max-width:100%;height:auto * 3.修改所有styl
解决 react ＜a＞ 标签 href=“javascript:；“ console warning 问题 项目场景：我们在使用 a 标签时，href属性可以用于指定超链接目标的 URL，其值可以使任何有效文档的相对的或绝对的 URL，包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容，浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档，或者 执行 JavaScript 表达式、方法和函数的列表。若用户不想用 a 标签的跳转能力时，而要使用自己绑定的 click 事件，往往会通过插入 js 代码段的方式，设置 href 值为javascript:;或javascrip
element Table循环表格、跨表格全选按钮功能实现 文章目录前言一、跨表格全选按钮功能二、具体代码1.表格循环2.data数据格式3.方法定义4.实例5.全选操作后提交判断总结前言提示：遇到产品提到需求，根据批量查询条件搜索，渲染N个表格子数据，父级数据在表格上边显示，表格子数据循环，并且实现跨表格选中提交功能。提示：以下是本篇文章正文内容，下面案例可供参考一、跨表格全选按钮功能示例：@selection-change选中方法众所周知，一般情况都是对单个表格实现，很少循环操作表格，这里关键是方法明($event,index)就能识别是哪一条数据
Vue + Element+ Table +Form label 添加图标并hover后出现提示信息 文章目录前言一、Table 表格添加图标并提示二、Form label 表单添加图标并提示三、实例四、参考链接总结前言Vue + Element+ Table +Form label 添加图标并hover后出现提示信息。提示：以下是本篇文章正文内容，下面案例可供参考一、Table 表格添加图标并提示直接上代码代码如下（示例）：<el-table-column prop="priority" label="优先级" min-width="150" :render-header="ren
React TS JSX项目 fetch请求post方式导出下载文件 文章目录前言一、fetch请求post方式导出1.代码参考2.常见格式3.参考链接总结前言导出文件一般为get请求，当携带参数过长会导致报错，故所以用post请求体请求导出文件提示：以下是本篇文章正文内容，下面案例可供参考一、fetch请求post方式导出代码如下（示例）：1.代码参考const token = "自己项目的token"try { //此处的fetch不是项目公共定义的方法，而是没封装前的fetch const response = await fetch('接口
Vue +Element UI 前端写假分页，不请求后台数据接口 文章目录前言一、使用步骤1.element分页代码2.js代码3.参考链接总结前言提示：前端做假分页，只限于适用的场景和数据或列表展示，不适用操作和编辑，望周知。提示：以下是本篇文章正文内容，下面案例可供参考一、使用步骤1.element分页代码代码如下（示例）：<div class="pagination-container"> <el-pagination @size-change="handleSizeChange" @cur
vue 3.0项目标题icon根据域名动态修改显示不同favicon 文章目录前言一、favicon二、动态修改1.域名动态判断2.参考链接总结前言本人项目是vue3.0 cli项目，是多域名公用的前台项目，所以一个icon不能支持很多域名的项目同时使用。提示：以下是本篇文章正文内容，下面案例可供参考一、favicon<link rel="icon" href="<%= BASE_URL %>favicon.ico">vue3.0引入的icon应该是如上所示，通过环境配置的。二、动态修改1.域名动态判断代码如下（示例）：这个判
React TS JSX项目自动化配置，打包build报错问题解决 文章目录前言一、项目打包二、Jenkins自动化部署1.配置编译打包命令2.参考文献3.最终解决总结前言提示：本页面解决方法慎重参考，本人是在自己公司的项目发现的build问题，不代表所有项目都有这个问题，请明确后再参考提示：以下是本篇文章正文内容，下面案例可供参考一、项目打包基本的md配置，本项目使用的是yarn管理工具。本地安装依赖正常，打包正常二、Jenkins自动化部署1.配置编译打包命令正常按照本地打包命令执行:yarn、yarn build:dev dev是自己配置的
html的a标签disabled禁用处理 文章目录前言一、CSS里的pointer-events属性二、使用步骤总结前言html的a标签禁用问题处理提示：以下是本篇文章正文内容，下面案例可供参考一、CSS里的pointer-events属性现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：阻止用户的点击动作产生任何效果阻止缺省鼠标指.
前端组件包发布到npm私服 前端组件包发布到npm私服前端组件包发布到npm私服，前端小白亲自实践文章目录前端组件包发布到npm私服前言一、 仓库概念二、操作步骤1.Nexus私服部署2.配置package.json3.切换源地址4.打包5.登录6.发布常见错误参考文档总结前言对个人来说，我们写的包往哪儿发布，无非下面三个地方。其中淘宝镜像仓库每隔十分钟会同步一下 Npm 仓库的新模块，所以实际要看的也就是往 Npm 仓库和公司内部搭建的私有 Npm 仓库上如何发布包。提示：以下是本篇文章正文内容，下面案例可供参考
sessionStorage不能跨标签页解决方案--vue项目 sessionStorage不能跨标签页解决方案–vue项目现有的浏览器存储机制localStorage ：~5MB，数据永久保存直到用户手动删除sessionStorage ：~5MB，数据只在当前标签页有效cookie ：~4KB，可以设置成永久有效session cookie ：~4KB，当用户关闭浏览器时删除（并非总能立即删除）安全的认证token保存一些重要的系统会要求当用户关闭标签页时会话立刻到期。为了达到这个目的，不仅绝对不应该使用cookies来保存任何敏感信息（例如认证to
关注
