⭐各个浏览器隐藏滚动条
1 /* 谷歌浏览器 */ 2 选择器::-webkit-scrollbar {display:none} 3 4 /* 火狐浏览器 */ 5 div { 6 -ms-overflow-style: none; 7 } 8 9 /* IE /Edge */ 10 div { 11 scrollbar-width: none 12 }
⭐移动端适配
https://mydarling.gitee.io/resource/note/rem.html
⭐react报错:Can't perform a React state update on an unmounted component
项目中遇到的问题是因为组件在销毁时定时器没有按时清除。
https://blog.csdn.net/u010565037/article/details/88716681
⭐react中className动态控制样式
1 yarn add classnames@^2.2.6
1 <li 2 styleName={ 3 classNames('date', { 'cur': this.state.date === item.date }) 4 } 5 key={item.id}> 6 </li>
⭐react在使用TypeScript编写时遇见“Readonly<{}>“上属性不存在的原因
1 import { Component} from 'react' 2 import React from "react" 3 import {Age} from "./age" 4 export const UserContext = React.createContext({ 5 name: "Alex", 6 age: 26 7 }) 8 //定义一个接口,目的是为后面的state提供类型,以便通过编译器的检查 9 interface test { 10 name:'john', 11 age:18 12 } 13 //这里的any用来定义props的类型,test接口用来定义this.state的类型 14 class App extends Component <any,test>{ 15 constructor(props :any){ 16 super(props); 17 18 this.state = { 19 name:'john', 20 age:18 21 } 22 } 23 render(){ 24 return( 25 <div> 26 <UserContext.Provider value = {this.state} > 27 <Age></Age> 28 </UserContext.Provider> 29 </div> 30 31 ); 32 } 33 } 34 35 export default App;
⭐react中父组件异步修改参数,传递给子组件时遇到的问题
父组件传递的参数改变后,子组件会重新渲染的只有render函数,在子组件的render函数中,就可以获取到父组件传来的值了。
https://blog.csdn.net/u012131835/article/details/81703814
⭐echarts中boundaryGap用法
可以把图表的坐标轴按比例缩放。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script src="echarts.js"></script> 8 </head> 9 <body> 10 <!-- 为ECharts准备一个具备大小(宽高)的Dom --> 11 <div id="main" style=" 600px;height:400px;"></div> 12 <script type="text/javascript"> 13 // 基于准备好的dom,初始化echarts实例 14 var myChart = echarts.init(document.getElementById('main')); 15 16 // 指定图表的配置项和数据 17 option = { 18 xAxis: { 19 type: 'category', 20 // boundaryGap: false, 21 boundaryGap:["0.5","0"], 22 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 23 }, 24 yAxis: { 25 type: 'value', 26 boundaryGap:["1","1"] 27 }, 28 series: [{ 29 data: [100, 932, 901, 934, 1290, 1330, 1320], 30 type: 'line', 31 areaStyle: {} 32 }] 33 };// 使用刚指定的配置项和数据显示图表。 34 myChart.setOption(option); 35 </script> 36 </body> 37 </html>
https://blog.csdn.net/qq_44687755/article/details/97938265
⭐echarts绘制折线图平均线
1 option = { 2 tooltip:{ 3 trigger: 'axis' //鼠标悬浮提示 4 }, 5 xAxis: { 6 axisLabel:{ 7 color:"#6f6f6f" //改变X轴坐标值颜色 8 }, 9 axisLine:{ 10 lineStyle:{ 11 color:"#cfcfcf" //改变x轴线颜色 12 } 13 }, 14 axisTick:{ 15 lineStyle:{ 16 color:"#cfcfcf" //改变x轴线上的刻度颜色 17 } 18 }, 19 type: 'category', 20 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 21 }, 22 yAxis: { 23 axisLabel:{ 24 color:"#6f6f6f" 25 }, 26 axisLine:{ 27 lineStyle:{ 28 color:"#cfcfcf" 29 } 30 }, 31 axisTick:{ 32 lineStyle:{ 33 color:"#cfcfcf" 34 } 35 }, 36 type: 'value' 37 }, 38 visualMap:{ 39 orient:"horizontal", //图例横向展示,vertical纵向展示 40 itemSymbol:"circle", 41 show:true, //展示图例 42 top:0, //图例位置 43 right:10, //图例位置 44 textGap:10, //图例文字距离 45 itemGap:20, //图例之间距离 46 itemWidth:12, //图例图形宽度 47 itemHeight:12, 48 pieces:[ 49 {min:0,max:1100,label:"平均值之下",color:"blue",symbol:"emptyCircle"}, //设置范围区域,label是图例的名称,symbol图例的形状 50 {min:1100,label:"平均值之上",color:"red",symbol:"emptyCircle"} 51 ] 52 }, 53 series: [{ 54 smooth:true, //折线图展示有弧度 55 symbol:"circle", 56 markLine:{ //平均线设置 57 silent:true, //true 去掉鼠标悬浮该线上的动画 58 symbol:"none", //该线无样式 59 label:{ 60 show:false //该线上的值去掉 61 }, 62 lineStyle:{ //设置该线样式 63 normal:{ 64 type:"solid", 65 color:"#666666" 66 } 67 }, 68 data:[{ 69 yAxis:1100, //线的值 70 name:"target" 71 }] 72 }, 73 data: [820, 932, 901, 934, 1290, 1330, 802], 74 type: 'line' 75 }] 76 };
如果要添加多条辅助线:
1 markLine: { 2 silent: true, 3 data: [{ 4 yAxis: 5 5 }, { 6 yAxis: 10 7 }, { 8 yAxis: 15 9 }, { 10 yAxis: 25 11 }, { 12 yAxis: 35 13 }], 14 lineStyle: { 15 normal: { 16 type: 'solid', 17 }, 18 },
⭐css3设置边框图片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 8 .box { 9 width: 300px; 10 height: 300px; 11 margin: 100px auto; 12 border: 27px solid #000; /* 不设置border有可能显示不出边框图片 */ 13 14 /* 设置边框图片的各种属性 */ 15 border-image-source: url("11.png"); /* 边框图片的路径 */ 16 border-image-slice: 27 27 27 27; /* 边框图片的裁剪(裁剪出四个角),不需要单位 */ 17 border-image-width: 27px; 18 border-image-repeat: round; /* 平铺方式 repeat:平铺可能显示不完整 round:平铺但会自动调整 stretch:拉伸 */ 19 } 20 21 </style> 22 </head> 23 <body> 24 <div class="box"></div> 25 </body> 26 </html>
⭐React警告:Received NaN for the `children` attribute. If this is expected, cast the value to a string.
解决:将运算结果转为字符串 <span>{ Math.abs(goal.goalInfo.pretimes - goal.usergoalInfo.cpt_times ).toString() }</span>。
⭐使用 moment.js 获取相关时间
https://blog.csdn.net/ZYS10000/article/details/105281295/
⭐css鼠标呈手指型
1 div{ cursor:default }默认正常鼠标指针 2 div{ cursor:hand }和div{ cursor:text } 文本选择效果 3 div{ cursor:move } 移动选择效果 4 div{ cursor:pointer } 手指形状 链接选择效果 5 div{ cursor:url(url图片地址) }设置对象为图片
⭐react 子组件改变父组件状态
1 class Father extends Component { 2 3 construtor(props){ 4 super(props); 5 this.state={ 6 name: 'Peter', 7 age: '26' 8 } 9 } 10 onChangeState(stateName){ 11 this.setState(stateName) 12 } 13 render(){ 14 <p>姓名:{this.state.name}</p> 15 <p>年龄:{this.state.age}</p> 16 <Child onClicked={this.onChangeState.bind(this)}/> 17 } 18 } 19 20 21 22 class Child extends Component { 23 render(){ 24 <Button onClicked={()=>this.props.onClicked({name: 'John'})}/> 25 } 26 }
⭐JavaScript中数字与字符串相互转化
https://www.cnblogs.com/craftsman-gao/p/4638700.html
⭐echarts柱状图颜色设置
1 option = { 2 //这里就不重要了,可以删掉 3 color: ['#c23531','#2f4554', '#61a0a8'], 4 xAxis: { 5 type: 'category', 6 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 7 }, 8 yAxis: { 9 type: 'value' 10 }, 11 series: [{ 12 data: [120, 200, 150, 80, 70, 110, 130], 13 type: 'bar', 14 itemStyle: { 15 normal: { 16 //这里是重点 17 color: function(params) { 18 //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色 19 var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; 20 return colorList[params.dataIndex] 21 } 22 } 23 } 24 }] 25 };
https://blog.csdn.net/weixin_43798882/article/details/89848153
⭐echarts柱状图顶部显示数字
1 series : [ 2 { 3 type:'bar', 4 barWidth:50, 5 data:[10, 52, 200, 334, 390, 330, 220], 6 itemStyle: { 7 normal: { 8 label: { 9 show: true, //开启显示 10 position: 'top', //在上方显示 11 textStyle: { //数值样式 12 color: 'black', 13 fontSize: 16 14 } 15 } 16 } 17 } 18 } 19 ],
⭐echarts更改坐标轴文字颜色及大小
1 xAxis: { 2 data: anameArr, 3 axisLabel: { 4 show: true, 5 textStyle: { 6 color: '#c3dbff', //更改坐标轴文字颜色 7 fontSize : 14 //更改坐标轴文字大小 8 } 9 }, 10 axisTick: { 11 show: false 12 }, 13 axisLine:{ 14 lineStyle:{ 15 color:'#315070' //更改坐标轴颜色 16 } 17 } 18 }
⭐js截取字符串的后几位数
1 var str="abcdefghhhh";//截取后4位 2 str.substring(str.length-4);
⭐echarts的矩形树图(treemap)去掉图表下方的标题
解决:在series中加入breadcrumb: { show: false} 。
⭐toFixed( )返回值为字符串
https://www.cnblogs.com/gmq-sh/p/4287635.html
⭐CSS伪元素画分割线
https://blog.csdn.net/hope_it/article/details/103643950
⭐React路由传参的三种方式
如果要路由传参,必须写成 <Route exact path='/live/:id' component={Live}></Route>
exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些。
exact的值为bool型,为true时表示严格匹配,为false时为正常匹配。
1 <Route exact path='/' component={Home} /> 2 <Route path='/page' component={Page} /> 3 //这样匹配路由path='/page',只会匹配到Page组件
https://www.cnblogs.com/houjl/p/10056718.html
⭐react行间style加backgroundImage
1 <div style={{backgroundImage : `url(${this.props.BackGroundImageUri})`}}> 2 1222 3 </div>
1 style={{backgroundImage:"url("+require("./image/pic-img1.jpg").default+")"}}
⭐HTML5<video>报错Uncaught (in promise) DOMException解决方法
主要原因是谷歌不允许自动播放音频。
https://www.mzwu.com/article.asp?id=4411
⭐测试结果OK、NG、NT、POK的意思
OK:pass,测试通过。
NG:not good/not go/fail,不通过。
NT:not test,未测试。
POK:部分通过。
⭐video.js视频高度自适应解决方法
解决:设置video标签的class为“video-js vjs-default-skin vjs-big-play-centered vjs-16-9”。
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>详情</title> 8 <link rel="stylesheet" href="../../css/video.css" /> 9 <script type="text/javascript" src="../../js/video.js" ></script> 10 </head> 11 12 <body> 13 <div class="pageContent"> 14 <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" poster="" data-setup="{}"> 15 <source src="http://1256913445.vod2.myqcloud.com/d48fa54fvodtransgzp1256913445/a387f9385285890780745318298/v.f20.mp4" type="video/mp4"></source> 16 </video> 17 </div> 18 </body> 19 20 </html>
⭐echarts折线图的小圆点颜色
1 series: [{ 2 type: 'line', 3 symbol: 'circle', // 设置标记的图形为circle 4 itemStyle: { 5 color: "#6c50f3" 6 } 7 ... 8 }]
⭐react 路由 (Link 跳转和编程式路由)
https://blog.csdn.net/zyp1101996/article/details/104483602
⭐react跳转路由报错Cannot read property ‘push’ of undefined
history={this.props.history} 跳转路由的时候需要从顶层父组件一直传下来
https://blog.csdn.net/weixin_37865166/article/details/89477489
⭐css下拉菜单demo
1 <style> 2 .dropdown { 3 position: relative; 4 display: inline-block; 5 } 6 7 .dropdown-content { 8 display: none; 9 position: absolute; 10 background-color: #f9f9f9; 11 min-width: 160px; 12 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 13 padding: 12px 16px; 14 z-index: 1; 15 } 16 17 .dropdown:hover .dropdown-content { 18 display: block; 19 } 20 </style> 21 22 <div class="dropdown"> 23 <span>Mouse over me</span> 24 <div class="dropdown-content"> 25 <p>Hello World!</p> 26 </div> 27 </div>