项目中常用写法（前端）

vue

项目中常用的书写方式

等待某个方法执行结束后，在执行

this.getCurrentAjInfo().then((results) => { 
})

判断js是不是undefined类型

typeof (aa) !== 'undefined'

父组件传值到子组件

父组件在create中获取接口数据，取到的值放到父组件的data中，如下把data的值传递给子组件

<comHeader  :hbfonts="hbfonts"  />

子组件接受值

props: [ 'hbfonts'],

state的值在标签中直接使用

 <span id="headerspan" v-show="hbfonts==1" class="fd-header-icon-span-3">{{$store.state.session.showName}}</span>

读取html，去掉字符串中的html标签

str.replace(/<[^>]+>/g, '')

字符串去掉中括号

aa.replace(/\[|]/g,'')

去掉双引号

aa.replace(/\"/g, "");

判断数组中是否包含某个值

//存在，flag1==0 不存在：flag2==-1
let barginFlag=[1,2,3,4];
let flag1= barginFlag.findIndex(item => item=== a)

在某个ui框架上的：text写判断

<aa-menu v-for="(item, index) in aa"  :key="item.key" :code="item.key" :text="`<i class='fd-aa icon-${index%10} ${item.key}' style='margin-right: 10px'></i><span class='${(item.name === 'aa' && onshow)?'fontred':''}'>${item.name}</span> `+ `<i class='${(item.name === 'aa' && onshow)?'fd-aa icon-11':''}' style='margin-left: 10px;width: 11px;height:14px;'></i>`" @click="handleTriggerClick(item)"></aa-menu>

数组截取前几条数据

articleList.slice(0,1)

vue运行打包

cd .. 
npm run build

vue打包之后放到nginx上运行

修改nginx的conf下的nginx.conf文件，修改端口号，修改代理地址

server {listen       10022;server_name  localhost;
}location /aa/ {proxy_pass   http://192.168.33.44:8080;}

cmd命令查看端口号占用和杀掉占用进程：

>netstat -ano|findstr 10022>taskkill/f /pid 17680

获取时间不是两位数字补全2位

this.hours = `00${data.getHours()}`.slice(-2)+ ':' + `00${data.getMinutes()}`.slice(-2)

elementui 表格透明

/*最外层透明*//deep/ .el-table, /deep/ .el-table__expanded-cell{background-color: rgba(255,255,255,0.03);font-size: 14px;border: 0px;}/* 表格内背景颜色 *//deep/ .el-table th,/deep/ .el-table tr,/deep/ .el-table td {background-color: rgba(255,255,255,0.03);font-size: 14px;border: 1px solid rgba(255,255,255,0.16);}/deep/ .el-table tr,/deep/ .el-table td {color: #ffffff;}/deep/ .el-table th{color: #099cfe;}/deep/ .el-table tbody tr:hover > td {background-color: transparent !important;}/deep/ .el-table--enable-row-transition .el-table__body td,.el-table .cell {background-color: transparent;}

element ui 的级联 选择后不收起弹窗

<el-cascader @change="cascaderSelectChange" ref="cascaderRef"></el-cascader>cascaderSelectChange() {// 自动收到下拉框this.$refs.cascaderRef.dropDownVisible = false
},

element ui 的级联 其他级别可选，最后一级不可选隐藏radio

.selectCell .el-cascader-panel .el-cascader-menu:nth-child(3){.el-radio{display: none;}
}

遍历求和

var datas =[{ value: 188, name: '91-100分' },{ value: 120, name: '85-90分' },];
let total = datas.flat().reduce(function (preValue, n) {return preValue + n.value}, 0)

绝对定位居中： 自身的一半

transform: translate(-50%, -50%);

flex换行：

flex-wrap: wrap;

清除定时器：

window.clearTimeout(this.ds1);
clearInterval(this.timersd)

格式化时间：

$ npm install moment --save

在main.js中全局引入

import moment from "moment"
Vue.prototype.$moment = moment;

moment(new Date()).format('YYYY-MM-DD') >= moment(this.form.halfstart).format('YYYY-MM-DD')

保留两位小数：

parseFloat(0).toFixed(2),

过滤对象中某些值等于固定的值：

this.xwpjList = this.$store.getters.dictionaryList.filter(item => item.pcode === this.code);

按照对象中的某个值进行排序：

this.xwpjList.sort((a, b) => {return a.code-b.code
})

复制对象 生成新对象 ，aa值不发生改变：

let mtsjTemp = Object.assign({},this.aa,this.bb)

获取所有key值：

let keys = Object.keys(this.aa[0]);

两个对象比较删除掉不相同的属性：

Object.getOwnPropertyNames(mtsjTemp).filter((value)=>{if(keys.indexOf(value)==-1){delete mtsjTemp[value];} else if(['nc','nm','nz'].indexOf(value)!=-1){mtsjTemp[value] = this.timestampToTime(mtsjTemp[value]);}
});

跳转页面传参，另一个页面接收：

this.$router.push({name: '01FormView',params: {_id: this.rowid,button: 'update',stage: this.stage,rybs:this.rybs}
})

 if(this.$route.params.rybs == 0){res.jzjd = 0
}

父组件校验子组件的表单：

父组件

<xwpjForm :formCulumn="formCulumn" ref="pyRules" :formData="this.pyList" />

let pyFlag = this.$refs['pyRules'].validateForm(array);

子组件

<el-form :model="scope.row" ref="xwpjList" :rules="rules" class="demo-ruleForm" style="width:100%"><el-form-item :prop="items.disabled==true?items.prop:null" style="width:100%" v-if="!items.select"><el-input :autosize="{ minRows: 1, maxRows: 1}" type="textarea" :disabled="items.disabled ? scope.row[items.disabled] : true" style="width:100%;margin: 5px 0" v-model="scope.row[items.prop]"></el-input></el-form-item>
</el-form>

validateForm (array) {let flag = nulllet flagArray =[];for(var i=0;i<this.$refs['xwpjList'].length;i++){this.$refs['xwpjList'][i].validate(valid => {this.defaultSelect(array);if (valid && this.selectChooseOrNo) {flagArray.push('true')} else {flagArray.push('false')}})}if(flagArray.indexOf('false')>=0){flag = false;} else {flag = true;}return flag},

时间格式转化：

timestampToTime(timestamp) {if(timestamp == null || timestamp == ''){return "";}var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear() + '-';var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';var D = date.getDate();return Y+M+D;},

子组件调用父组件方法：

子组件

<el-button  @click="formInsert(scope.$index, formData)" :disabled="chi.disabled ? scope.row[chi.disabled] : true" type="primary" plain >嘿嘿</el-button>

this.$emit('inrBtnClick', index, formData)

父组件

<p2023-formlist :formCulumn="formCulumn" ref="childRules" :formData="form.aa" @inrBtnClick="inrBtnClick"/>

inrBtnClick(index, rows){
// 内容        
},