Toast组件的简化版，模仿antd的消息组件封装。组件文件(.jsx)Toast/index.jsx/\*\*\*@nameToast\*@authordarcrand\*@date2020-01-20\*@descTipsinfo\*/importReact,{Component}from'react'importReactDOMfrom'react-dom'import{CSSTransition,TransitionGroup}from'react-transition-group'import'./styles.less'importicoInfofrom'@/assets/component-toast/toast-info.svg'importicoSuccessfrom'@/assets/component-toast/toast-success.svg'importicoWarningfrom'@/assets/component-toast/toast-warning.svg'importicoErrorfrom'@/assets/component-toast/toast-error.svg'//切换动画时长(ms),需要和'less'中的'@time'保持一致constANIMATION\_DURATION\_TIME\=250//api(提示符)typeconstTOAST\_TYPES\=\['info','success','warning','error'\]//持续时间(ms)constDEFAULT\_DURATION\=3000classToastextendsComponent{state\={zIndex:100,//防止被覆盖top:0,//距离top位置的距离(px)defaultDuration:DEFAULT\_DURATION,//提示时长(ms)list:\[\],//提示内容列表}setConfig\=(config\={})\=>{const{zIndex\=100,top\=0,defaultDuration\=DEFAULT\_DURATION}\=configthis.setState({zIndex,top,defaultDuration})}/\*\*\*@description添加提示\*\*@param{Object}options选项\*@param{String}options.type类型enum:TOAST\_TYPES\*@param{String}options.content内容\*@param{Number}options.duration持续时间\*/add\=(options\={})\=>{const{list,defaultDuration}\=this.stateconstid\=Date.now()constitem\={id,...options}this.setState({list:list.concat(item)},()\=>{consttimer\=setTimeout(()\=>{clearTimeout(timer)this.setState(prev\=>({list:prev.list.filter(v\=>v.id!==id)}))},options.duration||defaultDuration)})}render(){const{zIndex,top,list}\=this.stateif(!Array.isArray(list)){returnfalse}return({list.map(v\=>({v.content}))})}}//自动获取组件挂载节点函数getContainer(){constid\='toast-container-element'letelContainer\=document.getElementById(id)if(!elContainer){elContainer\=document.createElement('div')elContainer.setAttribute('id',id)}returnelContainer}//获取挂载节点的父容器functiongetRenderNode(){returndocument.getElementsByTagName('body')\[0\]}//获取对应的图标functiongetIco(type){switch(type){case'success':return\`url("${icoSuccess}")\`case'warning':return\`url("${icoWarning}")\`case'error':return\`url("${icoError}")\`默认值：返回\`url("${icoInfo}")\`}}functionmount(){constcontainer\=getContainer()getRenderNode().appendChild(container)ReactDOM.render(,container)}//暴露的api方法集合constapi\={}functiononComponentInit(ins\=null){TOAST\_TYPES.forEach(type\=>{api\[type\]\=(arg\=null)\=>{//可以传入'string'或'object'类型if(!arg){return}if(typeofarg\==='object'){const{content\='',duration\=DEFAULT\_DURATION}\=argins.add({type,content,duration})}elseif(typeofarg\==='string'){ins.add({type,content:arg})}}})//配置configapi.config\=config\=>ins.setConfig(config)}//执行挂载函数（只执行一次）mount()exportdefaultapistylefile(.less)Toast/styles.less@item-size:30px;@spacing:5px;@ico-size:16px;@time:250ms;.top-toast--container{position:fixed;//top:0;left:0;right:0;padding:10px;pointer-events:none;}.top-toast--wrapper{display:flex;flex-direction:column;align-items:center;list-style:none;margin:0;padding-left:0;}.top-toast--item-内容{position:relative;display:flex;align-items:center;height:@item-size;padding:010px020+@ico-size;margin-底部：@spacing；边框半径：4px；背景颜色：#fff；框阴影：04px12pxrgba(0,0,0,0.15)；字体大小：14px；行高：@item-size；颜色:rgba(0,0,0,0.65);\>.item-ico{position:absolute;top:50%;left:10px;display:block;width:@ico-size;height:@ico-size;transform:translateY(\-50%);background:中心/覆盖重复；}}.fade-enter{opacity:0;height:0;transform:translateY(-@item-size);}.fade-enter-active{position:relative;opacity:1;height:@item-size+@spacing;transform:translateY(0);transition:all@timeease-in-out;}.fade-exit{opacity:1;height:@item-size+@spacing;transition:all@timeease-in-out;}.fade-exit-active{opacity:0;height:0;transition:all@timeease-in-out;}使用importToastfrom'@/components/Toast'//父组Toast.info("提示内容")Toast。success({content:"对图形样式参数",duration:5000})
