- 博客(48)
- 收藏
- 关注
RSS订阅原创 index.html打包插入注释
HTML:<!-- <%= htmlWebpackPlugin.options.buildInfo %> --> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,
2021-04-15 14:28:18
481
原创 移动端使用scrollTop方法点击展开内容使该区域在滚动到浏览器最顶端
如上图，点击甲骨文不能再当前位置展开，而是去顶部，其中不能被header遮住代码如下：$('#content .item').click(function (e) { $(this).siblings().removeClass('item-active') if (e.target.className === 'content-title') { $(this).toggleClass('item-active') $('html, body').scrol.
2020-12-14 00:30:26
1192
原创 iphoneX和iphone11浏览器z-index失效问题解决办法
问题描述使用swiper做轮播图，其中左右切换图片按钮在安卓手机或ios低版本浏览器正常显示，但是在iphoneX以上机型不显示，在图片下面，其中按钮是绝对定位，设置了z-index任然不能生效原因谷歌浏览器都是直接将一个盒子一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该
2020-12-14 00:09:57
2108
1
原创 antD Form表单Select下拉多选支持互斥逻辑
需求：下拉多选科室中选择全部科室，不能选择其他科室，去掉全部科室可选择其他任意科室如图：代码实现如下：<Form.Item name="deptCode" label="科室" rules={[{ required: true, message: '必填信息不能为空' }]} getValueFromEvent={e => getValueFromEvent(e)} > <Select mode="multiple"
2020-10-10 15:46:45
3115
4
原创 AntD中Form组件中的Select下拉改为受控组件
需求：在form下拉多选组件中，当选择全部时,清空其他选项使用form中的getValueFromEvent方法getValueFromEvent=(e)=>{ if (e.find(item => item === '0')) { return ['0']; } return e;}<Form.Item {...formItemLayout} label="用户"> {getFieldDecorator('diseaseAreaId
2020-07-24 13:19:22
2147
原创 AntD中TextArea固定高度
需求：去掉TextArea右下角下拉，文字超出带滚动<TextArea maxLength={200} style={{width: '100%', resize: 'none'}} placeholder="最多200个字符" rows={5} />
2020-07-24 11:37:37
7402
2
原创 eslint处理单行 is undefined
/* global andioid:false */javascript: andioid.getCallback(‘111’);
2020-04-01 18:41:04
738
原创 时间控件在iphonex上显示NaN的问题
api中的时间格式为 2020-03-30 09:30 这种 “ - ” 链接符， ios不支持这种 “ - ” 链接符，但安卓手机，pc上都显示正常。解决方法：let date = '2020-03-30 09:30';let format = date.replace(/-/g, '/');let newDate = new Date(format);// 或直接初始使用/格式le...
2020-03-30 09:39:22
631
原创 解决antd message多次点击弹出多个信息提示
点击一个按钮，提示一条信息，多次点击，提示出多条相同的提示解决办法：弹窗前先删除``message.destroy();message.info(‘正在开发，敬请期待！’);
2020-03-16 18:26:01
5923
3
原创 禁止点击Input输入框出现以前输入过的记录
在原生input或者antd中的Input会出现清空input框后出现输入过的记录解决办法：// 注意：antd中 autoComplete中C大写,其他情况小写<Input placeholder="请输入通知标题" autoComplete="off" />解决后：...
2020-03-12 10:03:25
3028
2
原创 react登录密码加密crypto-js使用方法
crypto-js是一个用于加密的JavaScript库安装yarn add crypto-js 或 npm install crypto-js使用import CryptoJs from 'crypto-js';// password = '123456';// md5加密const pwd = CryptoJs.MD5(password).toString();// SH...
2020-02-25 14:17:32
6269
1
原创 前端实现轻量化部署实践
背景传统部署方式传统的手工部署存在缺点非常多，就不一一描述了，而且还很low（出去没法装X）。。。Jenkins+Docker自动化部署项目采用jenkins部署是很方便，但是也存在安装配置麻烦，最最重要的是依赖后端同学或者运维同学搭环境，没有运维经验前端同学还是放弃吧，本人按教程也没有安装成功。。。使用node-ssh实现前端轻量化部署node-ssh是一个基于ssh2的轻量级np...
2020-01-19 17:47:24
1495
原创 IE8兼容性问题及解决办法
css兼容1.css3选择器IE9IE8IE7:first-childyesyesyes:last-childyesnono:nth-child(n)yesnono:first-last-child(n)yesnono2.css3媒体查询IE8不支持媒体查询解决：respond.js，在页面中所有css文件的引用位置之...
2019-12-30 19:19:42
379
原创 前端面试中的 BFC使用
BFC 又称 Block Formatting Context （块状格式化上下文）大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。margin 塌陷首先我们知道当在相邻的块级元素的 margin 会发生合并现象（称为：外边距折叠）通常会发生在：相邻元素，父子元素 margin 接触处，或者一个空的块级元素。解决办...
2019-12-26 15:32:20
607
1
原创 ECharts y轴坐标均分，且最小值不出现小数
yAxis: { max:value=>{ console.log(value) if (value.max<10) { return 10; } let max =value.max; let val = max / 5; const round = true...
2019-12-07 11:49:22
3838
原创 VsCode前端常用插件
插件功能Auto Close Tag自动闭合HTML标签Auto Rename Tag修改HTML标签时，自动修改匹配的标签Chinese (Simplified)中文汉化包ES7 React/Redux/React-Native/JS snippets针对符合react语法规范各种缩写快捷键Formate: CSS, LESS and SCSS...
2019-11-23 17:06:27
709
原创 Failed to minify the bundle Error from Uglifyjs 打包压缩报错
在执行启动npm start正常，npm run build失败的情况下，原因之一是 Uglifyjs只能压缩es5代码，遇到es6代码会报错解决办法在webpack配置文件.webpackrc.js添加"es5ImcompatibleVersions": true...
2019-11-22 15:01:00
6188
1
原创 js把扁平数据转成树形数据
treeData(source) { let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 return cloneData.filter(father => { let branchArr = cloneData.filter(child => father.id == ...
2019-11-05 16:25:20
707
原创 nodejs连接mysql报错throw err; // Rethrow non-MySQL errors解决方法
环境：mysql: 8.0+ ；win10； 64位；报错主要信息：D:\projects\nodejs\blog-1\node_modules\_mysql@2.17.1@mysql\lib\protocol\Parser.js:437 throw err; // Rethrow non-MySQL errors ^Error: ER_NOT_SUPPORTED_...
2019-10-31 11:19:44
23017
10
原创 使用umi打包项目兼容低版本浏览器如safari，chrome等
umi.js 中有运算符 Safari和低版本Chrome报错，参考 umijs.org 文档，配置正确的 targets在umirc.js中配置targets 2.1.0+targets: { chrome: 49, firefox: 45, safari: 7, edge: 13, ios: 7 },注意：umi版本// umi默认兼容最低浏览器版本Default: { chro...
2019-10-28 15:27:37
8399
原创 移动端或ipad自带safari浏览器调试插件vConsole使用
适用移动端浏览器调试，ipad的safari浏览器调试均可方法一，使用CDN引入在index.html中<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><script> // init vConsole var vConsole = new ...
2019-10-28 15:19:45
5290
原创 vue打包优化及路由引入优化
在vue-cli中已对打包速度进行了优化，但是在大型项目的情况下打包速度还是会变慢，各大厂在打包js文件作出了很多优化，参考了网易公司前端开发的vue项目进行了总结： //vue.config.js 文件修改 const path = require('path'); cosnt uglifyJsPlugin = require('uglifyjs-webpack-plugin'); ...
2019-10-15 17:05:45
406
1
原创 ECharts X轴坐标文字超长字符用....显示，鼠标移上名称能够显示全称
1.首先在option中设置triggerEvent为true：let format = (e) => { return e.substr(0, 4) + '...';}xAxis: { axisLabel: { interval: 0, rotate: 40, formatter: format, color: '#333' }, da...
2019-09-25 15:49:18
3114
4
原创 使用moment常用时间总结
确保引入moment.jsimport moment from 'moment';1.获取当月第一天（2019-09-01 00:00）moment().startOf('month')2.获取当前时间（2019-09-07）moment().endOf('day') // 2019-09-07 23:59:59moment() // 2019-09-07 13:29:13...
2019-09-07 14:46:51
2303
原创 js当前页下载文件
需求：进入系统后，直接进入全屏功能（document.body.requestFullscreen()）,在页面点击下载文档时不退出全屏方式：1.使用a链接当前页下载,注意要添加download<a href="/app_wheeljack_manager/doc/v1/download" download>下载导入格式</a>2. 使用iframe下载此方式下载...
2019-09-06 16:58:50
2635
1
原创 改造：ueditor上传多个音频，预览时播放其中一个音频暂停其他音频
暂停播放逻辑var audios = document.getElementsByTagName("audio");function pauseAll() { var self = this; [].forEach.call(audios, function (i) { // 将audios中其他的audio全部暂停 i !== self &am...
2019-08-12 17:50:53
384
原创 React实现table拖拽排序功能
1.使用antd的Table自带排序功能参照官方文档： https://ant.design/components/table-cn/#components-table-demo-drag-sorting2.使用sortablejs插件可参照文档：https://segmentfault.com/a/1190000008209715 //安装 cnpm install sortablej...
2019-07-15 17:47:26
8525
4
原创 antd组件 Input和TextArea输入字数限制
记录下antd两个标签输入时字数限制1.Input maxLength={20}，注意maxLength是number类型<Input placeholder="张三 2019-05-17" maxLength={20} />2.TextArea<TextArea placeholder="请输入说明" autosize={{ minRows: 2, maxRows: ...
2019-06-12 11:14:59
28615
9
原创 改造：ueditor上传的视频默认显示第一帧画面
ueditor上传的视频默认设置不加载，如图：原因：点击开始播放再加载资源，video标签设置了preload="none",修改代码：在ueditor.all.js文件内 找到function creatInsertStr(url,width,height,id,align,classname,type){}方法，大致在17654行附近：修改代码preload="metadata" 提前...
2019-05-30 13:16:14
3865
4
原创 ant design table 表格实现拖拽排序
antd官方文档有支持拖拽的写法，参考地址：https://ant.design/components/table-cn/根据antd的写法实现了拖拽，但是antd的写法只是实现了功能，对代码没有进行封装，如果你想在多个页面进行拖拽，可能写很多重复代码，所以，本人根据官方文档写法进行了组件化，针对多个页面只需引入即可使用。1.首先引入支持拖拽的相关插件 npm install react-d...
2019-05-28 13:30:00
26879
7
原创 改造：ueditor点击视频图标只支持上传单个视频
背景：由于在视频按钮下加入了上传音频功能，但是音频只能支持单个显示到页面上，而视频可以多个上传，所以会给测试带来困扰。有的能多个，有的能一个，为此，产品要求统一为支持单个上传，因此，苦逼的我需要对ueditor进行改造。1.因为上传视频改造，所以只需改video.js逻辑即可。文件目录：ueditor/dialogs/video/video.js;仔细读下代码发现上传用的是WebUploader...
2019-05-24 18:58:25
851
原创 使用antd中Tabs内嵌套使用DatePicker控件选择时间弹窗定位错误解决办法
点击开始时间控件，错误如图：分析原因：Tabs控件在样式中.ant-tabs添加了overflow:hidden，导致时间控件定位失败.解决方法：在Tabs父级加class类名，修改类名ant-tabs样式 <div className="record-message"> <Tabs activeKey={activeKey} onChange={this....
2019-05-23 14:19:28
2349
原创 改造:ueditor注释掉插入视频，只保留上传视频
由于产品需求没有插入视频功能，在用ueditor需要去掉插入视频功能。1.修改文件目录 ueditor/dialogs/video/video.html2.在video.html中14行、18行加上style="display:none"，如图：3.由于是tab标签默认高亮插入视频，所以将上传视频改为高亮，14行加上class=" focus"4.在35行加入高亮focus5.点击上...
2019-05-20 10:30:17
1022
原创 使用阿里图标库Iconfont生成字体图标
1.上传svg图标2.将做好的svg图标拖拽到指定位置根据需求选择无填充色上传3.下载上传好的文件到本地4.解压后，将iconfont.css复制到项目指定位置5.在根目录下index.html引入6.webpack打包配置项plugins: [ happy_pack('js', ['babel-loader?cacheDirectory=true']), ...
2019-05-17 10:14:42
1444
原创 antd Checkbox多选框实现点选排序
实现效果：展示代码如下：import { Row, Col, Badge, Checkbox } from 'antd';const CheckboxGroup = Checkbox.Group;...<Col span={6} style={{ margin: '8px 0' }}> <Badge count={this.state.sort_reply...
2019-05-08 19:34:02
2872
1
原创 改造：ueditor插入的图片自适应编辑框大小，点击图片错位问题
在使用ueditor的编辑器时，需要让用户对插入的图片进行拉伸修改大小。当ueditor的编辑框内图片过大出现横竖向滚动条，且点击图片会错位，如图：解决图片自适应屏幕大小找到如下文件：\ueditor\themes\iframe.css这个文件里，就能看到有这一句：/*可以在这里添加你自己的css*/添加如下代码：/*可以在这里添加你自己的css*/img { max-width...
2019-05-06 18:00:59
3190
5
原创 改造:ueditor去掉本地保存成功提示
去掉本地保存成功在ueditor1.5.0版本ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。ueditor1.4.3版本是没有效果，需要修改 ueditor.all.js文件// plugins/autosave.jsUE.plugin.register('autosave', function (){...此处省略'c...
2019-05-06 15:10:59
1156
1
原创 Taro启动小程序报错缺少npm包@actions/xxx
报错如图：代码如图：import Taro, { Component } from '@tarojs/taro'import { View } from '@tarojs/components'import { connect } from '@tarojs/redux'import * as actions from '@actions/cate'@connect(state =&...
2019-05-06 14:33:09
3359
原创 常用JavaScript正则表达式
用户名正则定义基本用户名命名规则如下：最短3位，最长15位 {3,15}可以包含小写大母 [a-z] 和大写字母 [A-Z]可以包含数字 [0-9]可以包含下划线 [ _ ] 和减号 [ - ]// 首字母只能是大小写字母,匹配 第二个字符必须是大小写字母，数字，下划线，横杠并且最短5位，最长8位，总长度最短6位，最长9位.var pattern = /^[a-zA-Z][a-zA-...
2019-05-06 10:26:22
299
原创 正则判断时间年月日格式
需求：判断返回值是"2019-04-29"年月日格式还是"2019-04"年月格式，正则实现如下：const reg = /\d{4}-\d{2}-\d{2}/;let str1 = "2018-12-05";let str2 = "2018-12";console.log(reg.test(str1)) //trueconsole.log(reg.test(str2)) //false...
2019-04-29 17:32:25
4457
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人