葡萄和柚子-CSDN博客

原创 git带有子模块项目命令 git submodule

在某些场景下不同项目中可能会包含大量重复性代码，通过二方库封装或者其他封装方式可以解决一些问题，但并不适用在所有场景下，因此可以使用git子模块来管理引用不同的公共内容，达到类似二方库封装的效果。添加子模块，首先准备好我们不同的两个代码库，此处准备了一个web-tools库和view库，view库做为我们的主要仓库，web-tools库做为子库view库的目录结构如下图web-tools 库的目录结构如下我们的目的是在view 库使用web-tools库的utils文件夹下面的方法，所以这个

2022-03-31 09:49:54 974

原创 uni-app 开发小程序遇到的问题

最近接手了一个老项目，uni-app开发的小程序，安装依赖的之后使用idea 可以编译到微信开发者工具报错：1: app.js错误:TypeError: Function.prototype.apply was called on WeakMap.prototype.get, which is a string and not a function。这个问题查了好久，最后就是确定是一个依赖qs 的版本不兼容，在package.json 里面修改版本6.9.6，然后重新安装，可以解决此问题。2:

2022-01-18 14:53:52 2197

原创 vue项目打包强制刷新

const timeString = new Date().getTime() configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': r

2022-01-12 14:29:07 670

原创单元格合并

单元格合并#el-table 单元格的合并 arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex === 3) { if (columnIndex === 1) { return [1, 4]; } else if (columnIndex > 1 ) {

2021-09-03 14:29:45 164

原创 Echart的tooltip的部分的样式修改

在实际的项目中，我们在使用echart的时候，默认样式往往不能达到我们的目的，我们就需要在原来的插件上做修改。接下来介绍一下我使用到的一些关于tooltip部分的修改。1: tooltip的弹窗部分默认样式为黑色透明底色，如下图此时需要我们根据设计稿改变成想要的样式，如下图首先北京颜色和宽高的不同，tooltip有一个属性是extraCssText ，可以直接写自己需要的样式：extraCssText: 'border: 1px solid #092147; min-width: 280px;

2021-03-23 16:42:03 3845

原创 Echart 上自定义一些图标，或者文案，水印等等 getEchartsInstance和convertToPixel方法

在实际的项目中，用到Echart的时候，除了一些数据显示，经常还会有一些，别的显示，比如，百分比，水印，或者其他图标。我这里介绍一个属性： graphic 。如果给echart添加水印，观望有案例，不在赘述。如下图，需要达到如图，给某个位置添加一些元素。我这里通过使用graphic, 爸想要添加的元素，定位到各自相应的位置，既然说是定位，那就需要知道坐标，就需要用到Echart一个方法 convertToPixel ：转换坐标系上的点到像素坐标值。第一个柱状图花了一个虚线，首先我们可以

2021-02-05 18:07:32 5184

原创 react中useState更新了组建，但是页面上的组建没有刷新

在项目中遇到一个很奇怪的现象，使用useState来控制页面上组建的改变，发现并不是每次更改useState之后，页面都会跟着刷新，是有时候会跟着改变，有时候会有延迟。之后研究发现是useState更新的数据，是一个多层次的数据，react监听的时候，是浅层监听，所以不一定及时刷新页面。解决办法就是进行深拷贝，把需要更新的数据深拷贝一份，再使用useState 存储，就能实现每次都及时更新页面。...

2021-01-14 15:17:34 3639 2

原创 react项目中不同环境的环境变量引入

使用create-react-app 生成一个项目， npm run eject 把配置文件暴露出来。我们项目常常需要不同的环境使用不同的环境变量值，比如项目的api请求地址，一般都是开发测试生产，不同的环境有不同的=地址。此时比较方便的是写到环境变量中。根据项目需要新建不同的环境变量文件：在不同的环境变量文件中，写上环境变量不同的值。如何在文件中引用不同的换环境变量需要借助package.json文件"scripts": { "start": "node scripts/start.js",.

2020-11-02 18:19:05 1867

原创前端网页打印成PDF（ JSX TSX 页面打印）

关于前端页面的打印成PDF，有不同的方法。window有一个自带的print（）,window.print() 。（1）这个方法比较简单明了，调用方法，就会打印出body里面的内容，这种方法根据弹窗，可以自主选择是否添加页眉页脚，横屏竖屏等功能，比较灵活。（2）同时，根据项目，有可能需要在打印的时候显示或隐藏某些内容，或者在打印的时候修改样式等，此刻需要： @media print {} 把需要打印的时候出现的特殊样式，写到这个函数里面，即可在打印的时候起作用，在页面显示的时候不会有效果。jsP

2020-10-19 10:27:43 1066

原创 Redux-Toolkit原理

由于Redux的使用很是繁复，并且需要不少的依赖，以及模版代码，不是很简介，因此衍生出Redux-Toolkit，来解决这一问题。configureStore

2020-09-04 09:57:14 1303

原创 redux的原理

react的数据是单项数据流，父子组件之间的通信，通过props来传递数据。此时就出现一个问题，非父子组件之间的传参就比较复杂。Redux的出现就会很好的解决这一问题，Redux把数据全部存放在一个名为Store中，组件从Store中读取数据，在Store中对数据进行修改，就大大减少了组件之间数据的流通的过程，组件只需要从Store中读取数据即可。Store： Redux中的Store是用来存储数据的，一个项目只能有一个Store。Redux提供的createStore 方法生成Store。..

2020-09-01 16:01:54 196

原创 inputNumber选中状态如果被打断，会保存现状态，之后会回填状态。

inputNumber 在onblur的状态下，如果突然出现一个弹窗，这种时候会打断状态, 等弹窗消失，会重新保存当时的onblur 状态。这种时候如歌弹窗的作用是修改input的值，等弹窗消失之后input的值就有可能出现怪异现象，可能会回到当时onblur的值。解决这种现在现象，可以做一个全局监控，满足条件之后，获取input框，然后失去焦点。也可以使用ref , ref?.current.blur(); 失去焦点。...

2020-08-18 16:29:38 344

原创 forEach和map的区别

总的来说 map 的速度大于forEach。map会返回一个新的数组，不会改变原来的数组，forEach不会返回新数组，允许对原数组进行修改。都有参数，item, index arr 。内部匿名函数的this指向都是window。5....

2020-08-18 16:00:51 8182

原创 react-router-dom 路由嵌套

路由嵌套体现在页面存在子组建的时候使用。新建一个router.ts文件这里user 下面有home和detail页面。然后新建一个嵌套路由的读取然后在项目的入口文件部分放入路由需要注意的是页面需要路由嵌套部分也需要读取routers...

2020-08-07 18:29:29 833

原创 Typescript初始化一个React项目

yarn create react-app private --typescript (初始化一个typescript 的React项目）cd private 进入项目文件夹， yarn start 即可启动项目。yarn add react-intl 使用react-intl来使react组件国际化。

2020-08-07 18:14:13 475

原创 linear-gradient() 函数

linear-gradient() 函数用来创建一个渐变的图像从左向右渐变根据百分比长度background-image: linear-gradient(to right, grey 8.8%,yellow 0%,yellow 33.8%,grey 0%,grey 50%, yellow 0%, yellow 60%,grey 0% );

2020-07-27 15:42:12 466