- 博客(25)
- 收藏
- 关注
RSS订阅原创 React+WebSocket(SSE)实时通知+语音播报+websocket stomp协议
React+WebSocket(SSE)实时通知+语音播报+websocket stomp协议
2022-11-02 20:00:00
2456
原创 react公共倒计时组件实现
项目场景：项目场景：ant design 2.x没有倒计时组件，故写一个功能倒计时组件。开打开打直接上组件代码：import React, { Component } from 'react';export default class CountDown extends Component<any, any> { timer; props: { //倒计时间 deadtime: any; //是否行内显示 inline?: boolean;
2022-04-15 17:41:12
1509
原创 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
2022-03-31 19:42:26
2382
2
原创 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
2022-03-22 20:12:02
834
原创 富文本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
2022-03-02 16:28:30
696
原创 解决 react ＜a＞ 标签 href=“javascript:；“ console warning 问题
项目场景：我们在使用 a 标签时，href属性可以用于指定超链接目标的 URL，其值可以使任何有效文档的相对的或绝对的 URL，包括片段标识符和 JavaScript 代码段。用户选择了 a 标签中的内容，浏览器会尝试检索并展示 href 属性指定的 url 所表示的文档，或者 执行 JavaScript 表达式、方法和函数的列表。若用户不想用 a 标签的跳转能力时，而要使用自己绑定的 click 事件，往往会通过插入 js 代码段的方式，设置 href 值为javascript:;或javascrip
2021-11-02 15:53:56
2794
原创 element Table循环表格、跨表格全选按钮功能实现
文章目录前言一、跨表格全选按钮功能二、具体代码1.表格循环2.data数据格式3.方法定义4.实例5.全选操作后提交判断总结前言提示：遇到产品提到需求，根据批量查询条件搜索，渲染N个表格子数据，父级数据在表格上边显示，表格子数据循环，并且实现跨表格选中提交功能。提示：以下是本篇文章正文内容，下面案例可供参考一、跨表格全选按钮功能示例：@selection-change选中方法众所周知，一般情况都是对单个表格实现，很少循环操作表格，这里关键是方法明($event,index)就能识别是哪一条数据
2021-06-05 16:35:59
1280
原创 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
2021-04-07 19:08:53
2622
3
原创 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('接口
2021-03-19 10:59:22
1623
原创 Vue +Element UI 前端写假分页，不请求后台数据接口
文章目录前言一、使用步骤1.element分页代码2.js代码3.参考链接总结前言提示：前端做假分页，只限于适用的场景和数据或列表展示，不适用操作和编辑，望周知。提示：以下是本篇文章正文内容，下面案例可供参考一、使用步骤1.element分页代码代码如下（示例）：<div class="pagination-container"> <el-pagination @size-change="handleSizeChange" @cur
2021-01-27 19:57:14
3126
1
原创 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.域名动态判断代码如下（示例）：这个判
2021-01-18 20:00:39
1774
原创 React TS JSX项目自动化配置，打包build报错问题解决
文章目录前言一、项目打包二、Jenkins自动化部署1.配置编译打包命令2.参考文献3.最终解决总结前言提示：本页面解决方法慎重参考，本人是在自己公司的项目发现的build问题，不代表所有项目都有这个问题，请明确后再参考提示：以下是本篇文章正文内容，下面案例可供参考一、项目打包基本的md配置，本项目使用的是yarn管理工具。本地安装依赖正常，打包正常二、Jenkins自动化部署1.配置编译打包命令正常按照本地打包命令执行:yarn、yarn build:dev dev是自己配置的
2021-01-14 19:35:50
2389
原创 html的a标签disabled禁用处理
文章目录前言一、CSS里的pointer-events属性二、使用步骤总结前言html的a标签禁用问题处理提示：以下是本篇文章正文内容，下面案例可供参考一、CSS里的pointer-events属性现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：阻止用户的点击动作产生任何效果阻止缺省鼠标指.
2020-12-21 14:34:26
8506
原创 前端组件包发布到npm私服
前端组件包发布到npm私服前端组件包发布到npm私服，前端小白亲自实践文章目录前端组件包发布到npm私服前言一、 仓库概念二、操作步骤1.Nexus私服部署2.配置package.json3.切换源地址4.打包5.登录6.发布常见错误参考文档总结前言对个人来说，我们写的包往哪儿发布，无非下面三个地方。其中淘宝镜像仓库每隔十分钟会同步一下 Npm 仓库的新模块，所以实际要看的也就是往 Npm 仓库和公司内部搭建的私有 Npm 仓库上如何发布包。提示：以下是本篇文章正文内容，下面案例可供参考
2020-12-01 14:35:20
3596
原创 sessionStorage不能跨标签页解决方案--vue项目
sessionStorage不能跨标签页解决方案–vue项目现有的浏览器存储机制localStorage ：~5MB，数据永久保存直到用户手动删除sessionStorage ：~5MB，数据只在当前标签页有效cookie ：~4KB，可以设置成永久有效session cookie ：~4KB，当用户关闭浏览器时删除（并非总能立即删除）安全的认证token保存一些重要的系统会要求当用户关闭标签页时会话立刻到期。为了达到这个目的，不仅绝对不应该使用cookies来保存任何敏感信息（例如认证to
2020-09-23 14:12:18
9055
4
原创 在el-table中使用el-input-number传值默认传值value
在el-table中使用el-input-number默认传值value先写一个大家经常出现的问题<el-table ...> ... <el-table-column ...> <template scope="scope"> <el-input-number v-model="scope.row.num" :min="1" size="small" @change="handleChange(value,scope)
2020-08-31 10:39:16
5764
3
原创 拷贝数组的 JS 技巧
拷贝数组的 JS 技巧技巧 1 - 使用Array.slice方法const numbers = [1, 2, 3, 4, 5]const copy = numbers.slice()copy.push(6) // 添加新项以证明不会修改原始数组console.log(copy)console.log(numbers)// 输出// [1, 2, 3, 4, 5, 6]// [1, 2, 3, 4, 5]技巧 2 - 使用Array.map方法const numbers =
2020-07-10 10:58:54
136
原创 vue element el-checkbox全选功能实现
基于vue element el-checkbox全选功能实现<template> <div class="page-clientsManage"> <el-row class="pa-20"> <el-card class="table-card mt-20"> <el-row slot="header" class="clearfix"> <el-row class="fl"
2020-07-10 10:51:54
931
原创 Vue 页面缓存和不缓存的方法
Vue2.0 页面缓存和不缓存的方法1、在app中设置需要缓存的div<keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面2、在路由router.js中设置.v
2020-07-10 10:43:44
963
原创 Vue项目 +Element UI +vue-quill-editor 富文本编辑器图片上传功能+文字提示自定义
安装引入vue-quill-editor npm install vue-quill-editor --save在main.js全局中引入 import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'impo...
2019-09-18 19:09:59
1316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人