前端码命-优快云博客

原创 Uncaught (in promise) Error: A component suspended while responding to synchronous input. This will

Uncaught (in promise) Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

2023-03-01 16:20:27 1968

原创 img video以短边为准平铺，裁剪

当视频或者img太高或者太宽的时候，不想让全部100%比例显示，但是又想把中间的内容居中显示，裁剪长边，html<div class="contain"> <div class="box"> <div class="content"> <img class="img" src="https://mmm-jyj.oss-cn-hangzhou.aliyu

2022-02-21 16:31:45 1164 2

原创 Mac m1 react native android 环境搭建跳坑

第一步：前面的安装和配置brew install watchman查看这里第二步：下面是安装jdk以下步骤：brew install adoptopenjdk/openjdk/adoptopenjdk8这是官方要运行的，安装的是jdk8，jdk8经过咨询公司资深Java开发后，得知jdk8是很多后端依赖框架的底层都是jdk8，兼容性比较高，所以这里是8但是运行命令后报错fatal: unable to access 'https://github.com/adoptopenjdk/home

2021-12-17 11:10:22 3295

原创小程序onReachBottom 上拉执行多次 onReachBottomDistance无效

微信小程序和支付宝小程序都有onReachBottom 缓慢上拉执行多次onReachBottom这个方法的问题，想要设置onReachBottomDistance还无效，真的大坑！首先要在json里面设置onReachBottomDistance：100然后在页面写onReachBottom上拉触底的这个方法中：onReachBottom: function () { wx.pageScrollTo({scrollTop: 100}) // 加入这个方法 this.goodsLi

2021-12-17 11:03:51 2276

原创 mac m1 react native iOS环境搭建跳坑

此文档虽然说是m1上搭建的，但是感觉应该同样适用于不是m1芯片的Mac第一步：首先官方文档给出的是先安装Homebrew这个东西，如果你是Mac的老用户那么你知道这个是干啥的，但是很多像我一样Mac的新用户可能就不知道这个是什么鬼，其实这个就和node的功能一样，node提供一个npm，homebrew提供一个brew都是用来安装其他的包的一个工具；这个我早就装好了的；第二步：参考： Mac M1 搭建 React Native 环境访达>应用程序>实用工具>右键终端.app 显

2021-12-02 10:50:50 3880 1

原创 web抓包工具

web抓包工具charles

2021-11-30 14:32:42 707

原创 https里面的localstorage和http里面的localstorage是不一样的，不共享的

https里面的localstorage和http里面的localstorage是不一样的，不共享的

2021-11-30 14:32:18 824

原创微信浏览器H5本地存储 localStorage 无效

微信浏览器H5 localStorage 无效无效的：let data = JSON.stringify({}) // JS对象转JSONlocalStorage.setItem('data', data)JSON.parse(localStorage.getItem('data')) // parse JSON转js对象生效的：localStorage.setItem(‘token’, ‘12354687987’)ocalStorage.getItem(‘token’)...

2021-11-30 14:31:18 4553 3

原创 mac m1 node npm nvm tora

报错： zsh: command not found: taro解决方式：在安装全局命令前面加上sudo例如：sudo npm install -g @tarojs/cli

2021-11-30 11:47:07 155

原创 nvm node

nvm install 14.17.0 下载固定版本nvm ls 查看nvm use 14.17.0 切换版本

2021-11-15 11:17:46 102

原创后端返回图片文件流，前端处理

获取验证码 const res = await indexApi.getCaptcha(); let url = (URL || webkitURL).createObjectURL(res); setImgUrl(url)注意要在get请求的请求头里面加属性export async function getCaptcha(options) { return request('/energyops/captcha.jpg', { method: 'GET', //

2021-10-26 18:48:05 1044

原创 umi3 + Ant Design Pro v5多环境打包

"scripts": { "analyze": "cross-env ANALYZE=1 umi build", "build": "umi build", "build:dev": "cross-env REACT_APP_ENV=dev UMI_ENV=dev umi build", "build:test": "cross-env REACT_APP_ENV=test UMI_ENV=test umi build", // 加这一句 "deploy": "npm

2021-10-26 18:45:09 1194

原创 react echarts 使用

有一个react专用的包import ReactEcharts from 'echarts-for-react';const getOptionPower = () => { let option = { tooltip: { trigger: 'axis' }, legend: { data: ['逆变器数值', '多功能表数值'] }, grid: { left: '3%',

2021-10-26 13:11:10 151

原创 get 请求获取的图片文件流展示

这种get请求获取到图片验证码展示：let url = (URL || webkitURL).createObjectURL(res);<img src={url} alt="" />

2021-10-25 09:14:46 1346

原创 umi3 + ant desgin prov5服务端请求菜单跳坑

ant desgin prov5关于服务端请求菜单官方文档地址点击此处官方是这么说的：如果你的数据希望通过 initialState 来保存，你可以在 request 中直接读取，这样每次 initialState 变化都会重新加载菜单// https://umijs.org/zh-CN/plugins/plugin-layoutexport const layout: RunTimeLayoutConfig = ({ initialState }) => { return {

2021-10-22 15:02:20 1228 2

原创 react 图片加内容数据填充后鼠标滚轮缩放 + 拖拽

碰到一个需求，要求是底图用图片然后接口获取的数据要填充到里面，然后要实现拖拽和缩放其中缩放有个要求要鼠标滚轮缩放用了一个拖拽的第三方包import Dragger from 'react-dragger-r' <div style={{overflow: 'hidden'}}> <Dragger> <div className='cader_box' style={{transform: `scale(${deltaY}, ${deltaY})`, tra

2021-10-20 11:29:23 1010

原创 Vue TypeError: Cannot read property ‘_wrapper‘ of undefined

报错：TypeError: Cannot read property ‘_wrapper’ of undefined原因：form表单里面一个属性挂载了多个element组件导致解决方案：一个element组件对应一个form表单的属性<el-form-item label="商品原价"> <el-input-number v-model="goodsForm.prePrice" :controls="false" /></el-form-item><e

2021-08-16 17:29:13 665

原创 vue element table 清空选中clearSelection无效

官方文档给出的table清空选中状态的方法是clearSelection然后this.refs.multipleTable.clearSelection();这样去用但是无效我就问你要不要这么坑的！！！！！！！！！关键还是靠自己，打印this.refs.multipleTable.clearSelection();这样去用但是无效我就问你要不要这么坑的！！！！！！！！！关键还是靠自己，打印this.refs.multipleTable.clearSelection();这样去用但是无效我就问你要不

2021-08-11 14:58:09 11927 5

原创 element UI form表单自定义校验 callback无效

<el-form-item v-else :key="formList.nationalType" label="销售价：" prop="multistage_price" :rules="[{ validator: multistagePriceRule2 }]" // 自定义校验 >问题是当把下面的代码用方法封装一下callback，循环value这个数组去调用的话，callback无效最终解决的代码，手动一行行自己展开写mult

2021-08-10 18:08:43 2503

原创 lodash初探

这是一个js集成的一个第三方的方法库，里面有很多平时在项目里面用到的方法，用这个的话很多方法不用自己去封装例如：set：（obj, path, val）(对象，路径，值)

2021-08-06 11:04:27 121

原创 vuex初谈

这个东西和redux的使用差不多，直接传路径（定位到方法）然后传递要改变的东西

2021-08-06 10:55:58 100

原创 vue computed

computed在我的理解中，这个东西就是为了返回计算后的一个值而已，在项目中经常会用到：几个变量经过计算后返回一个东西，然后把这个过程封装给一个方法，然后让这个方法去返回自己想要的计算后的一个东西，vue搞了这个东西让我们封装的方法，统一放在里面...

2021-08-06 10:52:21 89

原创 TypeError: e.getHours is not a function

element ui el-date-picker组件报错TypeError: e.getHours is not a function<el-form-item label="生效时间" prop="date"> <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeh

2021-07-28 10:52:32 2899

原创 vue element el-date-picker组件报错TypeError: e.getHours is not a function

这个是报错代码：<el-date-picker v-model="form.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />这个是解决后的代码format不可以有，不然会在选择的时候导致格式不一致：<el-date-pick

2021-07-27 15:45:54 3750 2

原创 vue element Dialog 蒙板的覆盖页面

明显看到蒙板的z-index把app给盖掉了解决办法：在弹框属性上面加这个属性和值就可以解决，这个是element提供的解决方法

2021-07-27 10:02:11 624

原创 vue.min.js:6 TypeError: Cannot read property ‘_wrapper‘ of undefined

vue 代码这个写代码的时候报错这个鬼东西，不清不楚解决方法：看一下自己代码里面是不是在标签上面引用了方法，但是没有在methods里面却没有这个方法函数

2021-07-22 16:37:32 2233

原创报错422

传参方式不对，可能项目里面封装了固定默认参数，需要这样处理一下const options = { params: { switchFlag: this.sellSwiVal } }或者参数没传

2021-07-20 15:05:57 5270

原创 element UI form表单重置无效

element 组件库里面重置有两个方法resetField和clearValidate，但是这两个方法，要用这两个方法肯定是要用ref实例化一个表单，用实例化的对象去重置表单，但是经常性的无效实例化是<el-form ref="operateForm" :model="form" :rules="rules">使用方式经常是this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()解

2021-07-20 14:40:01 1912

原创请求接口报错net::ERR_FAILED

出现这个问题的原因：1:前端域名配置错误2:后端没有配置这个域名解决：确定当前接口请求和后端配置的域名一致，如果不一致，需要前端配置文件中改为和后端域名一致，如果项目中有使用多个域名的配置，除了主域名的接口之外，其他的域名接口需要单独代理调用，我当前的调用方式：getStoreSwitch(options = {}) { // 开关获取 options.baseURL = process.env.VUE_APP_WHALE_API options.url = `/pointma.

2021-07-20 11:21:17 80079 2

原创 next start 报错 not found next

相关资料来源于https://blog.youkuaiyun.com/ab110911/article/details/83089768一般来说集成next.js的项目都会有{ "scripts": { "dev": "next", "build": "next build", "start": "next start" }}这个配置，但是启动的时候是要用npm run dev去启动的...

2021-07-16 17:01:14 1807

原创 npm install 报错 code 404

如果在项目工程下面有.npmrc这个文件的话，那么里面配置的应该都是淘宝镜像cnpm install去下载，只需要把里面的淘宝源地址换成npm的# sass_binary_site=https://npm.taobao.org/mirrors/node-sass/# phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/# electron_mirror=https://npm.taobao.org/mirrors/electron/#

2021-07-16 16:32:26 2695

空空如也

空空如也