- 博客(43)
- 收藏
- 关注
RSS订阅
原创 antd pro(V5) 实现多tab
官方不支持多tab，所以需要自己去处理根据以往的经验这个不是很复杂，主要的技术点如下：1.样式（抄的vue-element-admin）2.antd pro项目干预点app.tsximport TagView from '@/components/TagView';import EventEmitter from '@ytCommon/utils/eventEmitter'; //发布订阅layout headerRender方法返回TagViewonPageChange 页面改变的时候利用
2021-01-23 16:27:28
4652
5
原创 antd-pro(V5) 多项目集合
之前做一个大项目的时候用的是微前端框架乾坤，结合实际情况做了如下总结：1.完成了多个项目聚合，独立开发打包2.我们项目用不到微前端，只是项目相关很类似，需要放在一起管理。3.安装依赖的时候需要安装基座，公共项目和真实项目，多次安装依赖。结合上述要求与痛点我们需要在antd-pro框架做如下改造：1.需要支持多个类似项目独立开发与打包2.不需要引入其他框架和库3.公用依赖包解决的办法也不是很难主要利用的是APP_ROOT，具体操作如下：/package.json"sys": "cross-
2021-01-06 11:08:16
1309
1
原创 el-upload 点击已上传文件跳转
upload组件上传完毕后点击不能查看已上传的文件，现在需要点击能跳转，废话不多说直接上方法。主要利用了插槽，并根据原有样式自己重写逻辑。注意一点，删除一条的方法需要自己去重写逻辑 <el-upload class="upload-demo" :action="action" :limit="limit" :on-exceed="handleExceed" :before-upload="beforeUploadEvent" :on-succes.
2021-12-22 20:41:36
1975
原创 虚拟DOM为什么不能用下标做索引
今天发现用索引做下标的时候，删除第二个元素会出现bug，顿时觉得很神奇，因为我代码里都是这样写的，从来没出现过bug。出现的原因：如果是index做下标的话之前的索引是[1,2,3]；删除2后按道理讲应该变成[1,3]；但是实际上变成的是[1,2,undefined];虚拟DOM diff的时候就会认为2没有变化，把3删除了。那么为什么我正常开发的项目中没有出现这个问题呢？？因为正常情况下前端删除不是自己本地玩泥巴，而是通过ajax请求后端接口删除，再获取新的数据重新赋值，不是因为没有bu..
2021-05-24 22:18:51
219
原创 怎么解决浏览器记住密码
之前密码框遇到浏览器记住密码加个隐藏的空密码框就可以解决问题，现在发现不行了。每次鼠标获取焦点了就显示已经记住了的密码，如果是做某个动作前要先输入密码验证的话这就很搞笑了。怎么解决：1.使用text代替password2.模拟password以下是示例代码，不能直接在项目中使用，需要融入项目 <div class="password_wrap"> <div class="dot_wrap" v-if="input[item.param]"> <sp
2021-04-28 13:15:56
483
原创 ant-design实现单元格合并
如下图所示，官网只给了一个写死的例子，不太符合正常项目中遇到的情况.项目中一般是后端经过排序把数据返回给前端，前端根据字段设置rowSpan,期望结果如下图核心代码如下执行数据处理方法export const handleSpan = (result: any[], key: string) => { result.forEach((e) => (e.rowSpan = 1)); // 记录开始合并的位置 let num = -1; let obj =
2021-03-12 11:26:46
944
原创 uni-app路由设置、模块化
之前做的一个项目页面有大几十个，pages.json代码有400+行，而且经常有人改这个文件造成冲突，体验很不好，这次做新的项目就要规避这个问题了。从网上找到一个方法，把pages.json文件改成空对象且在根目录下建一个pages.js文件就可以用JS的方式来管理路由。注意：不支持ES6的import export 方法这样就可以使用模块化来管理路由了，多人开发冲突量会小很多。...
2021-01-27 15:50:11
3584
原创 echarts TypeError: Cannot read property ‘get‘ of undefined
今天重新打包了一下项目，发现正式环境跑不起来，经过排除发现是ehcarts版本从4.7.0升级到5.0.1，导致部分api出现问题，解决办法是在package.json找到echarts将’^4.7.0’改成’4.7.0’
2021-01-27 11:15:44
3820
2
原创 antd pro(V5) 配置自定义路径
之前想配置一个公共模块的别名，不想使用"…/…/…/…/"这样的路径，由于没有看官方文档，直接去社区或者搜索引擎里找，没有找到方法。今天我心血来潮看了一下文档，发现它是有办法修改的之前一直都是自己瞎折腾，在tsconfig.json里面配置，其实应该在config/config.ts里配置，找对了方法实现就不难了。主要要改两个地方：1.config/config.tsimport path from 'path';export default defineConfig({ alias: {
2021-01-21 13:21:25
2739
原创 antd pro(V5) 按钮权限
antd-pro的权限跟我们用的不太一样，所以需要自己开发一套。主要思路如下：1.登录的时候获取所有的按钮并存到本地2.进入页面的时候根据code判断是否显示按钮（组件形式，props.children）3.特殊的（比如disabled）提供一个方法判断有无权限1.登录页let permissions = res.roleList[0].permissions;sessionStorage.setItem('btnInfo', JSON.stringify(getBtns(permission
2021-01-21 10:46:56
2078
原创 ant-design 自定义表单校验
今天遇到一个自定义表单校验问题，按照vue的经验，只需要获取到句柄并执行特定的方法即可。但是ant-design不太熟悉，找了很多答案直接给了个form.validateFields([‘xxx’])，那个form怎么来的不知道，但是我猜测是ref，但是试了不是，后面继续查找总算找到了，记录下来留给有需要的人。核心代码如下：import { Form } from 'antd';const [form] = Form.useForm();<Form form={form}
2021-01-20 19:18:37
762
原创 antd v5 修改筛选输入框placeholder
今天做筛选条件的时候看到所有的输入框都是请输入，想改变placeholder的值，但是直接修改placeholder无效，又没有啥文档，这就很操蛋了。后面想的是自定义一个input组件，代码如下： { title: '企业名称', dataIndex: 'corpName', renderFormItem: () => { return <Input allowClear placeholder="请输入企业名称" />;
2021-01-11 20:08:09
1135
2
原创 gitlab团队管理
之前做项目的时候没有做代码提交权限管理，个把开发人员各种骚操作，后面虽然能找到是他干的，但是已经晚了，之前还不知道挖了多少坑。所有为了避免再次发生这种情况，需要利用起gitlab分支保护功能了。主要实践如下：1.对后端开发只给访客权限，前端开发给开发者权限，非项目负责人不给主程序员权限。2.添加受保护分支，不允许提交到受保护分支，开发人员在自己分支上开发，开发完提交合并请求，主程序员审核过后合并到受保护分支。...
2021-01-06 09:59:31
486
原创 antd-pro(V5)动态菜单之动态icon
之前做动态菜单的时候没有注意到Icon的问题，以为简单的加个参数即可，后面发现生成的是文本。在网上找了些资料，或者要引入全部的icons，或者写乱七八糟的方法，但是结合实际项目，这两种都不是我想要的。实际上项目开发中的菜单icon应该是设计师给的矢量图，上传到iconfont上生成字体图标，然后在项目里使用。antd-pro里使用iconfont不难，主要步骤如下：1.在iconfont上挑选或者上传图标，下载到项目中2.在global.less引入字体图标3.app.tsx页面menuDataR
2021-01-05 19:39:43
4197
原创 antd-pro(V5)动态菜单
一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。示例代码如下export const layout:
2020-12-30 20:20:18
4862
原创 antd-pro(V5) request之请求拦截 响应拦截
最近想利用antd-pro（V5）重构一套系统供新系统使用，因为后端接口格式有自己的格式，不能改变。所以网络请求这块只能前端处理了。最开始我想的是使用之前封装的方法，结果发现不太好处理与antd-pro不一致的字段，通过各种手段完成了网络请求模块后发现必须使用any类型项目才能跑，还有就是破坏了antd-pro的约定，废弃。这次将技术栈由vue+element转移到react+antd-pro就不能老是强行加入自己的想法，我们能想到的作者早已经想过了，所以一般情况下不需要自己去创造什么，只需要顺着作者的
2020-12-30 19:33:48
8510
4
原创 element-ui table 可编辑
element table组件没有直接可以使用可编辑的状态，需要自己手动编写一个。其实难度也不是很大。整体思路如下：表格字段有两种状态一种是可写，一种只读（输入框和文本切换也可以）根据cell-click事件定位到点击到的位置输入框全部变成只读状态，根据坐标设置唯一可写状态点击其他区域关闭可写状态cell-click事件无法获取点击的$index，需要做处理//html:row-class-name="tableRowClassName" //js tableRowClassNa
2020-10-28 14:38:44
2436
1
原创 uni-app textarea覆盖问题
textarea在小程序中是原生组件，层级比较高，即使给fix+9999也是被覆盖了。看了很多解决办法，但是改动量有点大，想找个代码量少的方法。从uni-app的官网上找了一个组件cover-view结合该组件的介绍我们可以知道如果我给我的fix包裹一层cover-view，那么就不会被textarea覆盖了，想法是很简单，但是实际上调试的过程很麻烦，太费时间。遇到的主要问题有2个1.1px边框没了（使用cover-view代替伪元素）2.1px边框有了 但是按钮点不动了（将事件绑定在父节点上）
2020-10-16 15:35:33
1222
原创 uni-app base64卡死问题
最近用uni-app开发了一个小程序，其中有一个功能是上传图片，这次是一个已有的项目，后端要求提交base64给他。小程序提交base64。。。但是还是得按照他的来，根据以往h5开发经验我的思路是先获取filefile转base64base64利用canvas生成小图再利用canvas转成小的base64但是实际执行的过程中困难重重，原因是小程序的环境跟h5的环境不太一样，很多方法不能直接使用。还好找的了一个插件helangCompress 可以帮我把图片压缩后面就是把图片再转化为bas
2020-10-16 15:16:07
1812
原创 Vue 2.6版本后的动态插槽
最近是搭建新的框架，vue的版本比较新，旧的语法便不想再使用了，其中在插槽是还是费了一点时间的。期望：根据字段批量生成插槽供主页自定义。问题：静态的可以显示出来，动态的显示不出来。最终的代码如下//子组件 tableColumnList是table组件内部的静态插槽名称<template v-slot:tableColumnList> <el-table-column v-for="(item, key) in tableObj.params"
2020-09-14 10:50:45
1954
原创 vue动态组件注入数据
之前也没有研究过动态组件，前两天有人问我动态组件的问题，给他解决了下顺便也记录下来。<template> <div class="home"> <div ref="currentView"></div> </div></template><script>import Vue from "vue";export default { name: "home", data() { ret
2020-09-11 16:21:26
858
1
原创 vue给对象赋值无效
今天刚上班遇到同事反馈，他的电脑上显示有问题，我自己看了一下自己的没有问题，看别人的也没有问题，就单单一台电脑有问题，使用的是chrome浏览器。然后我打开代码查看，只有一句话this.totalInfo = res;//res是后台返回的数据对象这是一个普通的赋值语句，怎么都显示不出数据，实在不行我就用了$set也是不行，最后没有办法将对象拆分成独立的string，还是不行（有点忘了）。突然发现自己不会写代码了，到底是啥情况。最后我看了下那个同事的浏览器版本，是最新的浏览器版本。这个问题可能是
2020-08-31 10:13:18
2778
原创 单页面应用多个账号登录问题
前提：前端项目中用了很多本地缓存，后端是通过SESSION会话识别账号，一个账号登录后在新窗口再登录其他账号会导致SESSION被覆盖，从而导致前面账号数据显示后面账号的，数据会串。解决方案：1.token,后端说他们没有用token不好弄给排除了2.前端自己处理，登录前先做登出操作，保证只存在一个SESSION会话；前端登录后会利用本地缓存特性自己鉴定SESSION属于哪个账号的，不是这个账号的退出到登录页面。具体操作：由于项目的特殊性，不能让多个账号同时操作，所以在用户登录的时候将用户id分别
2020-08-27 17:57:00
2665
原创 海康摄像头使用chrome打开
之前做的时候是使用ie浏览器打开摄像头，使用起来很麻烦，领导想改成用chrome打开，于是乎在网上找找解决方案。主要参考了两个例子，第一个是成功了一半后走不下去了，估计那个人不是原创，是个抄了一半的，然后我重新找了个例子。实践的核心是nginx和ffmpeg，使用下载的包再按照教程来，很容易就做出来，最终效果如下...
2020-08-26 15:21:43
3913
原创 将系统的静态资源迁移到静态资源服务器
之前公司没有静态资源服务器，最近要求运维弄了一个，项目庞大了以后打包速度会慢，而且打包体积也大，通过将静态资源迁移到静态资源服务器以后打包速度变快了，包也变小了。其中涉及到的技术点也不多，主要是设置一下静态资源的路径，在vue项目根目录下建一个.env文件内容如下 NODE_ENV = 'BASE_URL' VUE_APP_TITLE = 系统管理平台 VUE_APP_URL = 'https://public.xxx.com/'index.html里面这样调用
2020-06-03 10:49:12
363
原创 react实现keep-alive
在项目中会遇到这样一个场景 上拉了N页的时候点进详情然后再返回列表，列表会重置，这里就需要对页面进行缓存，类似vue的keep-alive。网上找了很多方案，可能demo是可以的，但是在复杂的场景下会有很多问题，基本上不能实现，经过一上午的折腾总算是弄出来了，采用的方案是 react-router-cache-route@1.8.4代码如下import React from "react";import { HashRouter, Route } from "react-router-dom";i
2020-05-11 13:41:34
1667
1
原创 react 打电话+阻止冒泡
const url = `tel:${phone}`; //点击电话阻止冒泡 const clickPhone = (event: any) => { event.stopPropagation(); }; <a href={url} onClick={clickPhone}> {phone} </a>
2020-05-09 21:37:10
542
原创 react hooks img 显示默认图片
图片请求不到的时候我希望能给一个默认图片核心代码如下import defaultImg from "./default.jpg";const { picUrl} = props.item;const [imgSrc, handleImageErrored] = useState(picUrl); <img onError={() => handleImageErrore...
2020-04-27 09:04:27
1288
原创 react 弹窗组件状态缓存
最近遇到一个问题，点击弹出一个分类筛选，选择完成后关闭弹窗后再次打开就之前的状态都没有了写法如下{show && ( <Category categoryList={categoryList} getList={getList} setShow={setShow} /> ) }网上找了很多方案都不是很满意，我...
2020-04-27 09:00:34
702
原创 vue service worker跳过等待安装
现在有这样一个问题，用户一直在管理系统上操作，项目发布版本后，得通知到用户我发版本了 你刷新一下，用户按了F5以后没有变化，或者强制刷新后再普通刷新显示有问题，这是因为service worker在本地有两个版本，但是讲道理项目发布以后在本地只能存在一个版本，于是就要用到插队功能了，后面的版本跳过等待替换前面的版本，具体代码如下1.在vue.config.js或者package.json里面添加...
2020-04-23 12:45:05
564
原创 vue项目打包上线优化
服务器环境 阿里云1G1核最低配项目打包后在未开启gzip的情况下是86个情求传输 2.8M开启gzip的情况下传输大小明显减少 速度快了很多然后分析一下静态资源的大小，排序后如下发现能优化的点有echarts按需引入，ele现在按需引入已经来不及了，banner压缩一下可以几十K,发现请求少了，文件大小也小了，但是耗时反而长了，原因是之前echart是异步加载的，刚才放到mai...
2020-04-21 12:02:20
453
原创 Delete `,` 怎么解决（vue eslint与prettier冲突）
最近又来了一个急项目，之前的项目基础上改版，开始用的是webStrome，最近半年换了vsCode，导致老项目在Vscode下报这个错，由于项目已经很庞大，编译+提示要费时近10秒，百度了一下eslint，发现解决不了这个问题，项目实在是太赶，这个就先放着。使用formate document的时候会默认带上逗号，执行yarn lint --fix会删除逗号，我的习惯是写一段代码后会格式化一下...
2020-04-20 10:34:08
10746
原创 echarts 环状饼图 显示lebel
在官方网站上只有一个环不是很直观，在百度上百度了白天也没有百度到什么结果，其实官方有方法实现的，代码如下：let option = { color: ['#81bffa', '#3acbcb'], tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)'...
2020-04-08 17:59:26
1480
原创 vue-cli4下按需加载element-ui遇到的问题
看饿了么的官网是是这样写的但是实际在vue-cli4下面已经存在babel.config.js，内容如下module.exports = { presets: ["@vue/cli-plugin-babel/preset"]};在查找资料的时候发现很多人都是直接把官方的例子的plugins的内容复制进去，而且都实现按需加载了，但是在我这边还是一次就全加载了。仔细观察别人的例子后发...
2020-04-01 10:28:02
2519
原创 如何搭建自己的组件环境
现在的需求是要将本地的常用组件封装成私有的包，按照网上的教程（https://www.cnblogs.com/zlp-blog/p/10718383.html）很容易实现。但是现在有一个问题是我修改完需要打包执行npm publish上传到公司的私有库，然后在项目中修改包的版本号在下载下来，这样一来二去太几把蛋疼了，要是写错了调试太麻烦了，能不能在开发的时候就把这些问题都解决了再发布到公司的私有...
2020-03-24 16:02:46
487
原创 如何搭建公司的npm库
最近的开发中，重复劳动太多了，如何提高效率，减少重复劳动提上了日程。搭建私有的npm库（自己本地搭建的），需要下面这些东西：1.虚拟机Vmware ,centos7系统，先安装好（可百度）2.虚拟机联网（主机跟虚拟机能相互访问，可百度）3.安装nodejs nginx(可百度)4.npm 全局安装 verdaccio5.接下来就是重头了 执行verdaccio 它会在4873端口开一个...
2020-03-20 17:37:34
1525
原创 IOS下微信checkbox多选的BUG
在安卓和电脑上都可以反复切换全选不选的，但是在IOS下面只能全选，取消不行，百度了一下没有啥解决办法，后来一想这是原生的方法，应该不会有啥问题吧，然后尝试从css入手，加大了按钮的点击范围，结果好了。...
2020-03-19 16:10:13
300
原创 H5输入去除表情
const change = (e: any, k: string) => {let value = e.target.value;var reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022...
2020-03-19 16:05:06
469
原创 记录这两天微信开发的时候遇到的问题
1.微信跳到外链再回来页面不刷新，这个网上有很多解决方案，我也是直接抄的网上的，再贴一遍，下次直接在这里复制2.使用antd-mobile的Model.Alert方法的时候发现在部分IOS机上点击不了确定按钮，百度了一下解决办法，但是解决不了，项目急着上线不能等，没办法就调用系统的alert方法，但是会提示ip信息，所有产品让我隐藏ip,直接贴代码(function() { wind...
2020-03-19 15:58:30
189
原创 记录spa在微信浏览器跳转外链回退的坑
话不多说看上图，在微信浏览器里面从spa跳转到外链然后再回退到spa,微信直接拿的是disk缓存（上个版本的代码），从nginx到meta方法都试了都不行，然后最后没有办法就把路由模式改成hash模式再试试就好了（重新测试发现也是可以的），原因应该是history模式下假路由nginx重定向到index.html这块的问题。第一次遇到这个问题，先记录下来...
2020-03-19 15:42:00
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人