- 博客(70)
- 收藏
- 关注
RSS订阅原创 react+antd的tab页切换的时候修改其隐藏内容的方式
tab切换应该是显示对应的内容，tab页组件得封装是切换tab的时候，内容是visibility方式隐藏改为display方式隐藏，导致切换tab，但是之前的tab的内容还占着文档流位置，把当前的内容几道下面去了，效果图如下：不相互影响布局思路：获取所有的tab对应的内容，然后循环遍历的时候单独判断是否是当前选中tab对应的内容,不是当前的就换为display方式隐藏，不占正常的文档流位置代码参考：//获取所有tab对应的内容setActiveContent =...
2020-09-11 17:02:26
2586
原创 react+antd中的tab页组件修改选中的tab样式
原图效果图思路：tab有增删，我这里是根据目录显示tab标签有选中同一个的，其实tab本身的切换也算选中同一个，1、删除某个的时候，activeKey变得同时，样式也要跟着变，不管是有顺序的删除还是无序的删除2、新增的时候，我这里的数据结构是都在最后一个加新数据，如果不是选中同一个，都是默认显示新增的数据的tab标签，也可以放最前面3、我这里是根据组件的className来判断的，获取到所有的标签document.getElementsByClassName('ant-t
2020-09-11 16:55:13
6611
原创 解决react的子组件没有history的问题
//子组件中引入import {withRouter} from "react-router-dom";//暴露的时候 Aggrid是自己的组件export default withRouter(Aggrid)//这样就能拿到this.props.history了
2020-09-11 16:48:14
1490
原创 js写card样式
整体的页面框架代码参考: html,，如果动态渲染的话会简单点，html结构图,其中文字、图片、颜色不一样，动态渲染//整个页面的框架<div class="container">//card父级 <header class="home-header"> </header>//内容区域 <article class="content-wrap"> <section c...
2020-09-11 16:43:45
1956
原创 react+antd表格操作列加Dropdown和menu写法
需求：表格的每行操作里，有一个Dropdown组件，里面是menu组件，这里在列进行渲染的时候，把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示代码分析：1、表格的列渲染操作列的时候，Dropdown的api里有overlay属性，这个里是menu标签，我这里用的bind方法绑定，并且把行数据传给下拉框，然后menu组件就可以获取到行数据{ title: '操作', dataIndex: 'operation', key: 'operation
2020-09-11 15:48:12
4003
原创 vue+element 的h5界面嵌入app的一些注意事项
情景：h5界面嵌入app里，这里用的是vue+element+mint-ui1、h5界面需要获取app的登录信息方法是app提供原生的方法，挂载在window上比如//方法 app同事肯定会给你提供//这里需要注意的：如果原生的方法需要参数，要问清楚app同事参数，如果要获取app拿的值//比如我这里要获取登录信息，一般是json形式，需要转化一些JSON.parse()//另外，要问清楚，返回的字段名，这样方便获取对应的值，比如，下方我获取的值const center...
2020-09-11 15:34:02
1842
1
原创 react+antd的table 序号和操作列多个按钮写法
使用table比较常见的是需要有勾选框以及序号列1、如果需要表单查询可以选择它的扩展插件pro table2、操作列多个按钮，如图所示：代码参考：{ title: '操作', dataIndex: 'operation', key: 'operation', ellipsis: true, align:'center', render: () => ( <Space size="middle">.
2020-09-11 15:21:37
1710
原创 js 获取多个数组的交集
情景：多条数据，每条数据里有一个字段tags，需要获取每条数据的tags交集数据结构获取每天数据的tags字段的数据很简单，就不多说，直接分析所有数据的tags数组//数据结构如下，是一个二维数组，需要获取到每个数组里的交集let arr = [ [1,2,3,4],[3,4,6],[4,5]]第一步：设置一个变量，minArr，表示所有数据里最小长度的数组，后面通过这个最小长度数组的数据和其他的数据比较取交集的数据arr.forEach(i=>{ minArr
2020-09-11 15:15:28
4712
2
原创 js判断移动端还是web端
function IsPc() { let userAgent = navigator.userAgent,Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"]; return Agents.some((i)=>{ return userAgent.includes(i) })}调用，返回的值是true（移动端）/false（web端）let state.
2020-09-11 14:57:02
942
1
原创 自己写下拉复选框组件
需求：下拉框，能够支持多个选择如图，样式自己可以调整思路：1、需要一个最外层，包裹放值得输入框以及下拉组件2、可以用flex布局，上下放输入框和下拉组件，也可以定位下拉组件3、下拉组件用的ul li，li里包裹着input类型为checkbox的框，以及span展示值，这里有点需要优化，点当行应该都选中框，现在是点框才勾选4、默认值是当前价，可以存一个全局变量，valu...
2020-04-14 13:47:42
1099
原创 遍历标签集合方法
需求：遍历选框元素的时候，获取子元素的一些属性，并给一些逻辑操作，比如符合要求的选中，特此记录一下，经常都是不长记性，明明写过的，但是下次还是要线上断点看看或者log看看，基础不扎实，就只有多记录效果图如下html，一个下拉框<ul class="selectList" > <li><input value='当前价11' typ...
2020-03-27 17:35:58
826
原创 filter方法删除数组里的值
需求：删除数组里不符合要求的值，可以用数组的方法splice（index,num),index表示从第几个开始删除，num表示删除几个，有第三个参数是往数组里添加的值，这里删除不写第三个参数，如果要替换某个位置的值，可以写上第三个参数，我这里用的过滤的方法，这样就可以过滤多个不符合要求的值/** *删除 筛选数组里的值，可以过滤多个，也就是删除多个* *value :需要删除的值...
2020-03-27 16:46:41
1245
原创 vue中运用websocket
需求：因为需要实时接收后台的消息，这次项目中用到websocket一、websocket.js的封装，主要的步骤如下，大家可以根据自己的需求进行改（因为我这里需要接收到后台的消息后对某些vue组件进行央视改变，但是这个项目没有用vuex状态管理，所以接收消息的步骤我放到了组件里，同时在main.js里进行了全局的设置，具体的我们继续往下看）/** * websockect通信 * 调...
2020-01-16 11:27:17
520
原创 vue里封装的节流防抖文件
需求：控制用户对按钮得不断地点击，因为点击按钮会不断地发请求，加重网络负担，对此进行优化节流防抖的代码转载 https://blog.csdn.net/weixin_42333548/article/details/908152581、节流防抖写成一个公用的js文件（这是一种思维，尽量把一些公用的提取为js文件，所有vue组件都可以进行引入，让我们的代码更规范、更好看、可维护性更高，为此我...
2020-01-16 10:59:16
1112
1
原创 vue封装axios以及调用
需求：为了代码更好管理和更美观，把axios进行封装了post,get请求，当然所有的请求接口也可以单独用一个js文件进行管理一、http.js（封装axios得post,get请求，post请求传参得时候要注意，除了qs，传的数组还需要提前JSON.stringify)，网上有很多资料关于封装axios，如果你有其他的功能需要，可以搜索进行再一次的封装，更符合自己的需求import a...
2020-01-16 10:52:42
687
原创 vue结合element-ui得上传文件
需求：用vue框架，结合element-ui进行本地文件得上传，同时对文件需要MD5界面如下：标题同时如果截止时间到了后，需要置灰对应的按钮：发布按钮、导入按钮、删除按钮html:就是element-ui得上传组件auto-upload：true自动上传beforeUpload：上传之前把对应的文件得信息以及参数拼接好disabled：截至时间后置灰导入...
2020-01-16 10:42:09
2363
原创 js 处理并且 、或者、 包含 、不包含的多条件查询
需求：前端的多条件查询，特别涉及到并且/或者，还有包含/不包含如图所以查询得时候的考虑一些问题，具体如下：1、目前查询的时候拿到的用户数据格式如下：let data= [{cond: { keyword:"年会", operate:"$regex"，//包含关系 }, { k...
2020-01-16 10:10:14
5039
1
原创 前端搜索功能
需求：一般下拉框之类的会有搜索功能，不能每次都让后台返回，所以直接第一次把数据存下来，然后前端进行搜索方法：{ event:'input', selector:'.auto-select-text', callback:_.debounce(function (context) { console.log('输入框输入了 ',$(conte...
2019-06-14 11:03:54
619
原创 刷新页面时，保留滚动条的位置
需求：同一个机器自动刷新时，滚动条保持上一次得滚动条位置，不是同一个机器的时候，横向滚动条会默认为在最左边，纵向滚动条会默认为置顶/** * 获取滚动位置：避免刷新时滚动条默认置顶 * ele:当前有滚动条的元素 * name:存在localStorage里的名称 * left:是否有横向滚动条 * top:纵向滚动条 */scroolEvent(ele...
2019-06-14 10:57:23
1845
原创 css 伪元素方法写小圆点
.icon-size-12 { cursor: pointer; width: 16px; height: 16px; margin: 22px 30px 0 0; background-position: center; background-repeat: no-repeat; float: right; //小圆点 ...
2019-05-22 18:00:37
13664
原创 echarts 图例颜色不重复
问题：原始的颜色是十几个颜色重复显示解决:1、随机生成颜色2、赋值给series里每条数据得itemStyle:color//随机生成颜色handleColors(){ let color = ''; let r=Math.floor(Math.random()*256); let g=Math.floor(Math.random()*...
2019-05-22 17:57:33
4774
原创 echarts 得enterable为true时，造成的其他图得tip不消失问题
问题：因为enterable为true，tooltip能够鼠标移入tooltip内查看数据，但是会有隐患得bug，邻近的图得tip不消失页面：解决：1、显示tooltip时，找到邻近的图里是否有其他的tooltip2、有的话就把邻近的图里的tooltip隐藏掉，不能清空，也不能remove//图得tips位置handleEchartTipOption(){...
2019-05-22 17:52:04
4260
2
原创 echarts 的tooltip定位到当前图，避免溢出和遮挡
问题：tooltip初始是跟着鼠标移动，当内容过多（宽度高度过大），会被其他遮挡或者会溢出屏幕外解决：思路：根据官方文档，鼠标在左侧时，tip在右侧，鼠标在右侧时，tip在左侧，这样不会溢出，太高或太宽可以设置滚动条，这样也不会被遮挡改进：1、因为内容过多，展示不完全有滚动条，所以需要鼠标能实时移到tip上进行详细查看，所以运用了 enterable:true,...
2019-05-22 17:49:28
4785
原创 点击其他地方隐藏下拉框（待完善）
思路：把点击能够展开下拉框得某些元素和其他元素比较//点击可展开下拉框得一些元素let item = [$('.ipItem')[0],$('.ip')[0],$('.myCanvas')[0]];$(document).on('click',(e)=>{ e = e || window.event; let t = e.t...
2019-05-06 18:46:11
862
原创 运行npm start报错堆内存不足
报错解决："scripts": { "start": "node --max-old-space-size=4096 dev.js", "build": "webpack --progress --profile --colors --config webpack.prod.config.js", "test": "echo \"Error: no test...
2019-05-06 18:43:10
2891
3
原创 jQ模拟下拉框以及向下三角
界面;问题：因为select自带得option不能自适应宽度，意味着option宽度有时候会比select宽度长，如下图：解决：自己模拟写一个select带向下三角得下拉框；原理：1、我这里用的div当作一个框，里面包含下拉框选中内容和三角形（三角形是靠css实现得)2、用ul/li模拟一个显示隐藏得下拉框；3、jq获取元素以及显示隐藏元素都比较方便，原生也...
2019-05-06 18:31:45
590
原创 只解决ie11中input事件初始化自动执行的问题
问题：只解决input事件初始化自动执行的问题，window10系统，自带ie11版本，用的input事件，实时监听input输入情况思路：1、通过对input框的placehodler的处理，增加input事件里的代码执行的一个判断条件；2、原来是判断的input框为空显示全部，导致初始化后，如果选中了部分，但是几秒后就又显示了全部内容，因为自动执行了input事件里的代码；3、...
2019-03-20 11:15:52
2673
原创 js 按照页面布局字段顺序提示
需求：按照xxx顺序进行提示，问题：这里要解决的就是不知道后台传回来得是哪个字段的，所以需要排序例如是这样得数据：let emptyValue = ['申请原因','外派人员'，'外派开始日期'， '目的地', '客户名称'];//提交时没有填得字段名let field = ['外派人员', '申请原因', '客户名称', '外派开始日期', '外派结束日期', '目的地']//...
2019-03-12 16:33:34
177
原创 weui switch开关判断开启还是未开启
html<!--开关--><input class="isChecked" type="checkbox" hidden="'hidden" value="off" ><div class="weui-cell weui-cell_switch"> <div class="weui-c
2019-03-12 16:27:29
3376
原创 input聚焦palcehoder不显示，失焦如果没有输入值则显示
需求：input聚焦palcehoder不显示，失焦如果没有输入值则显示(weui为例)方法：html<div class="weui-cell start_address" style="display: none"> <div class="weui-cell__hd"><label for="start_address" class
2019-03-12 16:22:27
421
原创 js 日期比较大小
需求：开始时间和结束时间比较大小，weui ui库为例方法：转化成时间戳html：<!--时间--><div class="weui-cell go-time"> <div class="weui-cell__hd"><label class="weui-label ">外派开始日期</labe
2019-03-12 15:56:06
188
原创 给当前元素添加class，移除兄弟元素的class
需求：经常会遇到一种情况，选中某个元素，要求添加单独的样式，这时候我们一般用addClass('active')，同时要移除上一个添加active类的元素的active样式{ event:'click', selector:'li', callback:function (e) { //添加单独的样式 $(e).siblings().r...
2019-03-12 15:50:48
11940
原创 Cannot read property 'replace' of undefined报错
有时候控制台报错是要显示某个JS文件得，像这样直接进入了JQ里，不是我们自己得JS文件，就很懵逼得找哪里报错了，我们得成长更多的就是找bug，解决问题得能力问题：jq里调用方法得时候报错原因：jq里调用方法得时候报错一般都是当前对象不能调用JQ得方法,如该元素调用了css(),attr(),addClass()等...
2019-03-12 14:38:02
21238
原创 模态框(蒙层和固定title,确定和取消）
需求：有title的弹框和蒙层，这里用的JQ weui,做的h5页面1、html:同级关系蒙层:<div class="grey-shaow" style="display: none"></div>固定的title:<!--弹框标题--><div class=" select-title" style
2019-03-12 14:33:31
889
原创 js 根据年月判断有多少天
需求：根据不同得年份和月份判断该月有多少天//根据年月得到天数getDayNumByYearMonth:function (year,month){ switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: ...
2019-03-12 14:25:14
2205
1
原创 jq weui 日期年月日时分秒得设置（二个弹窗）
需求：h5页面需要年月日时分秒，方法：weui得datePicker插件只有年月日得，所以时分秒就要单独用picker插件单独配置一个，网上有类似得，难点就在于在第一个年月日关闭后就弹出时分秒得弹框，这个我是加在第一个弹框关闭得onClose里调用得时分秒弹框，网上也有其他方法，在我这里无效不足：弹出二次弹框得体验isWhichTime:function (timeSelect...
2019-03-12 14:20:52
1386
4
原创 weui 用picker自定义年月日时分秒（一个弹框）
需求：h5页面做成移动端需要年月份时分秒得弹框方法：用weui得picker自定义年月日时分秒不足：上下选择月份的时候，日期不能根据月份调整成该月该有得天数，因为统一给了31天，我也做了闰年得判断，但是发现只有打开得当月才有判断，比如4月份判断了只有30天，如果4月份想选择3月份得31号，发现没有这一天代码：isWhichTime:function (timeSe...
2019-03-12 14:06:16
4959
2
原创 报错xxxx of undefined
分析：报错 xxxx of undefined,这情况一般说明上一个变量已经是undfined了如有不足，望留言交流。
2019-03-05 13:27:24
1229
原创 按照数组顺序给对象重新组合成新对象
需求：按照后台返回的数组的顺序，和返回的对象的键值合成新的对象，便于渲染到页面上 let obj={ '213_tsxRaXuUEMXLEFWkp4bwKL': "2019-02-26", '2771_CGeEeRyBRdWWkK3ZAvGAWo': "充足", '5451_BMkcv5nT9XK2g6QBFjqYuH': ["测试部"], ...
2019-03-05 13:23:27
536
原创 agGrid的checkbox选择列样式调整
需求：对agGrid里的选择列指定某些行不可选，并且checkbox框所在单元格设置成灰色背景，鼠标指向checkbox给提示‘不可选’和cursor为禁选标识展示： 代码：//选择列selectCol: { headerName: "", width: 30, maxWidth: 30, checkboxSelection: t...
2019-02-02 11:24:31
3137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人