vue项目小技巧记录（更新中..)

最近移动端项目用到的一些不常见的技巧：直接在vue-cli3中上传webpackServer代理首先，在.env.development文件中设置VUE_APP_baseApi=/api其次，在vue.config.js文件中设置devServer:{proxy:{'/api':{target:'http://xxx/api',changeOrigin:true,ws:true,pathRewrite:{'^/api':''}}}}日期格式(yyyy-mm-ddhh:mm)dateFormatter(val){constYYYY=val.getFullYear()constMM=val.getMonth()+1<10?"0"+(val.getMonth()+1):val.getMonth()+1;constDD=val.getDate()<10?"0"+val.getDate():val.getDate();consthh=val.getHours()<10?"0"+val.getHours():val.getHours();constmm=val.getMinutes()<10?"0"+val.getMinutes():val.getMinutes();return`${YYYY}-${MM}-${DD}${hh}:${mm}:`},日期减法计算(y年m月d日h时m分)getRemainderTime(val){letrunTime=nullrunTime=parseInt(val)/1000;让year=Math.floor(runTime/86400/365);运行时间=运行时间%(86400*365);让我th=Math.floor(runTime/86400/30);运行时间=运行时间%(86400*30);让day=Math.floor(runTime/86400);运行时间=运行时间%86400;让hour=Math.floor(runTime/0);runTime=runTime%3600;让分钟=Math.floor(runTime/60);运行时间=运行时间%60;让第二=运行时间；//console.log(年,月,日,时,分,秒);this.countHour=parseInt(val)/1000/3600返回`${year?year+'year':''}${month?month+'month':''}${day?day+'day':''}${hour?hour+'hour':''}${minute?minute+'minute':''}`},音频流mp3格式convertToMp3(wavDataView){//获取wav头信息constwav=lamejs.WavHeader.readHeader(wavDataView);//其实这里不需要读取wav头信息，毕竟有对应的config配置const{channels,sampleRate}=wav;constmp3enc=newlamejs.Mp3Encoder(channels,sampleRate,128);//获取左右声道数据constresult=recorder.getChannelData()constbuffer=[];constleftData=result.left&&newInt16Array(result.left.buffer,0,结果.left.byteLength/2);constrightData=result.right&&newInt16Array(result.right.buffer,0,result.right.byteLength/2);constremaining=leftData.length+(rightData?rightData.length:0);constmaxSamples=1152;for(leti=0;i0){buffer.push(mp3buf);}}constenc=mp3enc.flush();如果(enc.length>0){buffer.push(enc);}letblob=newBlob(buffer,{type:'audio/mp3'})returnblob},vuebusmain.jsconstbus=newVue()Vue.prototype.bus=busa.vuethis.bus.$emit("onlineType",...arg)b.vuethis.bus.$on('我们eCardTime',(res)=>{console.log(res)})重置表单数据this.$options除了获取数据，还可以获取组件中的实例方法reset(){this.form=this.$options.data().form;}elementui重复触发错误消息时引入（重置消息防止重复点击重复弹出消息框）import{Message}from'element-ui'constshowMessage=Symbol('showMessage')letmessageInstance=nullclassDoneMessage{[showMessage](type,options,single){if(messageInstance&&single){messageInstance.close()}messageInstance=Message[type](options)}info(options,single)=true){this[showMessage]('info',options,single)}warning(options,single=true){this[showMessage]('warning',options,single)}error(options,single=true){this[showMessage]('error',options,single)}success(options,single=true){this[showMessage]('success',options,single)}}exportconstmessage=newDoneMessage()keyvalue设置可能的场景：在同一个表组件中根据切换如果角色刷新了组件表头，而组件内容没有设置key值，即使使用v-if切换列显示切换，应该的表头项不出现还是会显示不正确。官网解释说，Vue会尽可能高效地渲染元素，通常是复用已有的元素，而不是从头开始渲染，通过设置不同的key值可以有效防止这种情况（循环中不要设置索引）父子通信//父组件的点击事件提交事件//从组件调用，子组件注册一个ref="searchForm"//点击父组件的事件fuSublime(){//Referenceref,点击子组件的ziSublime()this.$refs.searchForm.ziSublime()},//接收子组件返回的值sublime(e){if(e){//返回为truethis.addDialogVisible=false}},methods:{ziSublime(){//来自组件的点击事件this.$refs['searchForm'].validate((valid)=>{if(valid){//返回父组件this.$emit('fuSublime',valid)}else{returnfalse}})}}重写push方法解决同路径跳转错误constoriginalPush=Router.prototype.pushRouter.prototype.push=functionpush(位置）{返回或iginalPush.call(this,location).catch(err=>err)}