项目中常用写法（前端）

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="`${item.name} `+ ``" @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 = null
      let 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位的话不需乘1000
      var 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){
// 内容        
},