React知识点归纳
函数式组件和类组件:各有千秋,之前一直习惯用类组件,但是官方最新的一直推函数式并且声明了不废除类组件,所以可以同时使用
12345678910111213141516171819202122232425262728293031323334const Tup = (props:any) => { const [test, setTest] = useState('111') return ( <div onClick={()=>{ setTest('222') }}>{ test }</div> )}export default Tup;export default class Tup extends React.Component { constructor(props: any){ sup ...
上传文件JS生成预览图
上传图片生成预览示例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="file" ...
JS控制文件(含上传)
js拖动文件获取文件列表方法介绍
很多dom都可以给属性 draggable="true"
阻止ondragover事件默认行为 e.preventDefault();
阻止ondrop事件默认行为 e.preventDefault();
获取文件列表 e.dataTransfer.files
Demo123456789101112131415161718<body> <div id="drag1" draggable="true">drag-div</div> <input type="file" id="drag2" draggable="true"> <script> drag1.ondragover = function(e) { e.preventDefault(); console.log(e); ...
后端返回stream数据流前端保存文件以及base64保存为文件
后端返回stream数据流前端保存文件1234567891011// 指定responseType: 'blob'const data = _const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))const link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', 'excel.xlsx')document.body.appendChild(link)link.click()document.body.removeChild(link)
前端base64转换成二进制12345678910 ...
CSS持续旋转
12345678910111213141516171819202122232425262728.fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear;}.fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8);}@-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }}@ke ...
上下缓动循环动画
1234567891011121314151617181920212223-webkit-animation: arrow 0.4s infinite alternate;animation: arrow 0.4s infinite alternate;@-webkit-keyframes arrow { 0% { -webkit-transform: translate3d(0, -60%, 0); transform: translate3d(0, -60%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}@keyframes arrow { 0% { -webkit-transform: translate3d(0, -60%, 0); transform: translate3 ...
CSS画倒三角(伪类法)
1234567891011121314151617181920212223<style>[data-v-5f487179] .van-dropdown-menu__title::after { filter: brightness(75%); width: 0.173333rem; height: 0.173333rem;}<style>.van-dropdown-menu__title::after { position: absolute; top: 50%; right: -0.106667rem; margin-top: -0.133333rem; border: 0.08rem solid; border-color: transparent transparent #dcdee0 #dcdee0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: .8; ...
简写CSS背景属性
背景色基本属性以及简写123/* <attachment>? <bg-image> <position> / <bg-size> <repeat-style> <background-color>*//* 背景色只能出现在最后一层 */background: local url("xxx.jpg") no-repeat {bottom|top xx left|right xx}/{width,height} #FFFFFF;
url 是否循环 位置 尺寸
如果位置和尺寸只写一组那么就是位置,尺寸走缺省值;俩都写中间用/分隔
位置:垂直 水平
尺寸:垂直 水平
1background: url("xxx.jpg") no-repeat center left/contain #333;
这样能实现背景图和背景色一起使用，多张背景图和背景色一起使用时背景色要写在最后一个背景图处
完整写法
12345background-image: ...
关于ES6模块公开与导入
关于ES6模块公开与导入假设tools.js是工具模块假设app.js是入口。
如果在tool.js中使用下列公出：
123456789export const a = {}export const b = { b: 'b'}export const c = (e) =>{ console.log( e ) return true;}
即公出多个对象，则app.js中正确导入如下：
1import {a,b,c} from '../../utils/tools'
取值如下：
123a;b;c()
同理，如果在tool.js中使用下列公出：
123456789101112 const a = {} const b = { b: 'b'} const c = (e) =>{ console.log( e ) return true;}expor ...
CSS3方式实现元素居中
CSS3方式实现元素居中前言平时经常接触一些场景需要将元素居中,css3提供了简单的方式来实现.
垂直居中1234<div class="parent" style="height:700px;"> <div class="child" style="height:200px;width:300px; left:5%"></div> <div class="child" style="height:300px;width:300px; left:60%;"></div> </div>
{6}1234567891011.parent{ background-color: wheat; position:relative;} .child{ transform: translateY(-50%); ...