- 博客(46)
- 收藏
- 关注
RSS订阅原创 根据不同的环境引入不同的script
语法知识webpack 使用ejs作为html模板语法工具标签含义 <%'脚本' 标签，用于流程控制，无输出。 <%=输出数据到模板（输出是转义 HTML 标签） %>一般结束标签 方案 if else <% if (process.env.CODE_ENV === 'dev') { %> <script src="//devstatic.XXX.com/common-lib/area/default/are...
2022-04-27 13:59:49
1076
原创 vscode保存或者格式化文档时自动转为符合eslint的格式配置
（1）插件：1.prettier-code-formatter2.eslint3.vetur（2）配置：在setting.js中配置如下{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "explorer.confirmDelete": false, "breadcrumbs.enabled": true, "eslint.validate": [
2021-06-02 20:21:53
278
原创 iview的model框添加draggable并且只在当前窗口内拖动
全局设置，所以设置在vue项目的index.html页面中<script> window.onload = function () { var dom = document.getElementsByClassName('ivu-modal-content ivu-modal-content-no-mask ivu-modal-content-drag') var interval = setInterval(function () { if (!!dom[
2021-05-27 17:30:47
526
原创 vue 的 $attrs 与 $listeners的用法
1.$attrs使用场景:三级组件A-B-C，B是A的子组件，C是B的子组件比如有这样的需求，需要从A组件传递某些值给C组件：方案1：从A传给B，再从B传给C方案2：在第二个组件中，通过给第三个组件实例绑定 v-bind="$attrs"的方式，可以不经过组件B，即可在组件C中拿到组件A的数据。但是不能用：属性的方式进行传递，也不能在组件内部定义props接收属性。2.$listeners同样在第二个组件绑定v-bind="$attrs"和地方在使用v-on="$listener..
2021-05-26 16:21:28
541
原创 手写深拷贝js
// JSON.parse(JSON.stringify()) 实现深拷贝时的问题： //1.正则 变成 空对象 //2. BigInt 报错 //3.日期 转为字符串后就转不回来了 //4.Symbol/underfined/function 直接就没了 // bug：在对象的循环引用中出现死循环：把每一个克隆的对象和数组建立标示，后期递归的时候，处理过的则不再重复处理。 function cloneDeep(obj) { //验证类型 if (..
2021-03-24 22:54:35
129
原创 手写一个call方法
function func(x, y) { this.total = x + y; console.log(this) } var obj = { name: 'Alibaba' } func.call(obj, 100, 300) ~function () { function callSelf(context, ...args) { context = (context == null ? window : context) ..
2021-03-24 14:56:18
262
原创 普通函数和箭头函数中this的指向
1.普通函数中this是在函数运行时才会确定this的指向2.普通函数中的箭头函数中的this是在函数运行后，到了箭头函数定义处，产生箭头函数,才会确定this的指向第一句话的解释： var a = 11 function test1() { this.a = 22; return function () { console.log(this.a); } } var x = new test1()(); // this是指向window的//
2021-03-24 14:29:17
595
原创 js new一个对象的时候，发生了什么（手写一个new方法）
function person(name){ this.name= name; this.say=function(){ console.log('我是'+this.name+'的say方法') }} var p=new person('小米') console.log(p.name,p.say())function _new(func,...args){ //1.创建一个空对象，并把对象的proto=被创建的这个对象的prototype // .
2021-03-23 14:20:50
203
原创 react 父组件state改变后，通过props传到子组件时props没改变
this.setState({ Tochecked: [...packageIds], ToUnchecked: [], changeIds: [...ids], historyDiagnosis:[...historyDiagnosisChecked] , bizCategoryDiagnosis:[...bizCategoryDiagnosisListChecked] , .
2021-03-17 11:27:19
1380
原创 循环map出div 根据id定位到滚动条的最顶端
scrollToAnchor = (anchorName: string) => { if (anchorName) { let anchorElement = document.getElementById(anchorName); if (anchorElement) { anchorElement.scrollIntoView( { behavior:...
2021-03-05 15:29:15
155
原创 react根据路由切换页面
import * as React from 'react'import { Menu } from 'antd'import * as styles from './Aside.module.less'import { DoubleRightOutlined,DoubleLeftOutlined } from '@ant-design/icons'import routes from '../../../router'import { RouteComponentProps, withRout
2021-02-10 15:12:19
758
原创 react根目录下App中引用构成上左右三部分的页面
import * as React from 'react'import Header from '../Header/Header'import Aside from '../Aside/Aside'import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'import * as styles from './Layout.module.less'import { Breadcrumb, Mod
2021-02-10 15:08:55
560
原创 react service中index.ts暴露接口配置
import BaseApi from './BaseApi'import {ISwitchInfo} from 'src/utils/constant'const http = new BaseApi()// 查询首页核心指标统计-实时数据export const runtimeData = (data:any)=> http.request({method:'post',url:'/app/statis/runtimeData',params:data,returnAll:true}.
2021-02-10 14:59:37
2037
原创 react项目axios配置
baseApi.tsimport axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios'import md5 from 'js-md5'import { Modal, message } from 'antd'import CookieUtils from '../utils/CookieUtils'import { MethodType, IResponse } from '../types'impor
2021-02-10 14:56:47
699
原创 react 自定义打包
package.json中定义： "scripts": { "start": "node scripts/start.js", "serviceBuild": "node scripts/build.js", "test": "node scripts/test.js", "build": "node scripts/customBuild.js" },customBuild.js：/* * @Description: 自定义build执行逻辑 * @Aut
2021-02-10 14:44:47
462
原创 React redux的使用整理
store文件下分modules和index.ts两个文件modules中存放单独的模块文件夹，每个中存放actions.ts 和 index.ts1.actions.ts：export enum actionType { FUNCTIONS = 'FUNCTIONS',}export const updateFunctions = (value:any) => ({ type: actionType.FUNCTIONS, value,})export defa
2021-02-10 14:31:15
170
原创 React 前端根据筛选条件过滤数据源
handleHitKnowledgeChange = async (value: any) => { const hitKnowledgeTableFilter = this.state.hitKnowledgeTableFilter let filterTableData: any[] = [] if (this.state.hitKnowledgeTableType.includes(value)) { hitFi...
2021-02-01 19:01:36
1279
原创 react 递归获取树图的数据源
getTree = (tree: any[] = [], map: any[] = [], arr: any[] = []) => { console.info('tree:',tree) if (!tree.length) return [] for (let item of tree) { console.info(!map.includes(item.id)) if (map.includes...
2021-01-20 10:56:15
241
原创 React npm install安装后有漏包的情况
解决办法（亲测）：在文件夹中删除node_modules，然后重新执行npm install （还真管用，神奇）附加一些常用的安装包的命令：1.网速慢，通过淘宝镜像方式安装包install -g cnpm --registry=https://registry.npm.taobao.org2.设置代理npm config set proxy http://xzproxy.*******.com:8080npm config set https://proxy http://.
2021-01-08 16:30:07
539
原创 接口请求附件信息 上传文档和下载文档
上传： export const add=(params: any) => http.request({ method: 'post', url: '/app/helpcenter/add', params, config: { headers: { 'Content-Type': 'multipart/form-data' } } })下载：export const statisZanCaiExport = (data:any)=> http.request({method:'pos.
2020-12-28 20:06:26
570
原创 React 给Table行添加hover样式 点击某行按钮给该行添加样式
1.antd Table中鼠标移动，给行添加hover样式 :global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td) { background: #e6f7ff; }注意：在global外面要包裹一个className，不然就是给全局的进行添加了，而不是本页面的。2.点击Table中某一行中的按钮，给该行添加样式
2020-12-23 16:26:23
2059
原创 git基本操作 亲测
1.从远程地址处clone一份master分支的代码git clone http://git.******.com/***/***.git2.进入到clone的文件夹中，执行git命令 git checkout -b Ft_Br20210107 remotes/origin/Ft_Br20210107解释：在本地建立一个Ft_Br20210107（名字任意起）的分支并在本地切换到该分支，该分支用来追踪远程的Ft_Br20210107（远程git上的分支，名称是固定的）分支。然后就可以在该
2020-12-18 15:09:43
119
原创 axios.then 还需要async 和await 吗
1.如果目的只是调用一个接口进行数据处理的话是不需要的，直接已这种方式调用即可。statisZanCaiExport({ statisDate: this.state.datePickValue.format('YYYYMMDD') }).then(res =>{ const url = window.URL.createObjectURL(new Blob([res], { type: 'application/octet-stream;charset=utf-
2020-12-17 15:06:08
2103
原创 react项目使用less样式的配置
react 中支持less样式时，需要配置文件：typed-css-modules.d.tsdeclare module '*.less' { const content: any export = content}
2020-11-27 17:50:47
441
原创 点击按钮进行文本一键赋值
copy = (response: string) => { let transfer = document.createElement('input') document.body.appendChild(transfer) transfer.value = response transfer.focus() transfer.select() if (document.execCommand(...
2020-10-28 10:53:52
299
原创 React Table中某一列名称太长，需要截取的处理方式
关键： ellipsis:true, render: (text, record) => ( <div title={record.kdName} className="ellipsis"> {!!record.kdName ? record.kdName : '-'} </div>这种方式解决了给div添加固定的宽度，在另写css样式进行截取。...
2020-10-23 11:50:01
479
原创 antd Modal中添加Form表单，数据回填时通过ref方式第一次打开页面时current是null 的解决方式
我希望网上的方法有效在放到网上，没效果浪费大家的时间，取不到原因不说了，解决方案：Modal的API中有一个强制渲染的属性 forceRender={true}第一次取就可以取到了，只是会把渲染的先隐藏起来，可能会浪费些渲染性能。性能这块不是我们目前首先考虑的问题。...
2020-09-22 17:10:51
3194
2
原创 antd Table 调整行高 取消每隔右侧的竖线，只保留外边框线
<Table bordered className={styles.rowStyle} />.rowStyle{ :global{ .ant-table-tbody > tr >td { padding: 10px 24px !important; } .ant-table-thead > tr >th{ padding: 10p..
2020-09-15 14:49:56
4995
4
原创 字符串中添加＜br /＞换行没效果问题
有时我们希望在类似tooltip中添加提示信息，需要在文本中添加换行<br/>,但没效果。原因就是<br/>是标签，在显示到浏览器中没有当做标签，作为文本处理了。解决方案：<div dangerouslySetInnerHTML={{__html:tooltip}}/>tooltip：含有<br/>换行的提示文本...
2020-09-07 17:49:03
9499
原创 React 给数字添加精度和分隔符
function formatNumber(num:string | number,decimal:number=0):string{ num=String(num) if(num==='' || num==='0') return num const arr=num.split('.') const integerPart:string=arr[0] const decimalPart:string=arr[1] || '' const len=intege
2020-08-18 20:21:03
882
原创 React echarts 雷达图封装
import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/radar'; interface IProps { echartId: string, data: ISeriesData, chartOptions?: IEcharts, max: number}interface IEcharts { [key: string]: .
2020-08-14 16:18:28
551
原创 React echarts 折线图封装
import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/line'; interface IProps { echartId: string, data: ISeriesData, chartOptions?: IEcharts, gradients: boolean,}interface IEcharts { [key: s.
2020-08-14 16:05:14
759
原创 React Model 中添加滚动条
使div出现滚动条：在div的样式上添加 height: 660px; //百分比不行 overflow:auto
2020-08-13 17:40:26
1412
原创 React Card 卡片和遮罩层的设置
import * as React from 'react'import { Card, Checkbox } from 'antd';import * as styles from './SubscribeCard.module.less'class SubscribeCard extends React.Component { state={ maskHidden:true } maskOnMouseEnter=(e:any)=>{ .
2020-08-13 10:53:53
1944
1
原创 React 重写AntD组件之global
在我使用antd等组件时，常常需要更改组件的默认样式，这时候，我们就需要用:global{}将需要修改的样式包裹起来。这种情况，我遇到过很多次，但是从来没有探究过原因，今天就浅浅的说一下我的理解。在说这个问题之前，我们需要先知道CSS Modules。CSS Modules主要是实现局部作用域和模块依赖两个功能。我们主要了解第一个功能就好。局部作用域我们都知道，CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会
2020-08-11 11:15:21
4352
原创 React 基础学习
可以把函数从父组件通过Props属性传给子组件，让子组件执行类似点击事件时执行父组件的方法。父组件： <ChooseProduct showDialog={showDialog} handleCancel={this.handleCancel} /> handleCancel = (sign:string)=>{ this.setState({ [sign]:false }) }子组件：
2020-08-11 10:23:53
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人