前端知识杂点（一）

该文章主要记录在工作中经常使用的小知识点、注意点、遇到的小问题

1. div垂直居中

display: flex;
align-items: center;
justify-content: center;

3. handler

form:{
    handler:function(){}
}
immediate:true(立刻执行wacth监听)

4. vuex

 this.$store.dispatch （含有异步操作，例如向后台提交数据）

5.vue @click.native 原生点击事件

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）
2，等同于在子组件中：
    子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

6. Vue局部刷新

<router-view v-if="isRouterAlive"></router-view>

provide(){
    return{
        reload:this.reload
    }
},
data(){
    return{
        isRouterAlive:true
    }
},
methods:{
    reload(){
        this.isRouterAlive = false
        this.$nextTick(() => {
            this.isRouterAlive = true
        })
    }
}

<!--在组件中调用方法刷新-->
inject:['reload'],
this.reload

7. element上传图片头像

<el-upload
  class="avatar-uploader"
  ref="upload"
  :action="aliPicUploadApi"
  :headers="headers"
  :before-upload="beforeUpload"
  :on-success="handleSuccess"
  :show-file-list="false"
  :disabled="disabled">
  <img v-if="userform.avatar" :src="userform.avatar" class="avatar"/>
  <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>

// headers（设置上传的请求头部）
// 上传头像接口携带token
computed: {
  headers(){
    // 获取token
    let arr = document.cookie.split('; ')
    let token =""
    for(let i = 0; i<arr.length; i++){
      var arr2 = arr[i].split('=')
      if(arr2[0] == "Admin-Token"){
        token = arr2[1]
      }
    }
    return {
      'Authorization': 'Bearer ' + token
    }
  }
},

7. 电话号码加密

let reg = /^(\d{3})\d{4}(\d{4})$/
this.linkPhone = tel.replace(reg, "$1****$2")

8. 接口地址携带传多个id

将数组ids ids = [577, 578, __ob__: Observer]
转换为一个字符串 ids = "577, 578" 便可传参
batchOnlineMessage(ids).then(res => {
})

9. 设置对象属性

let obj = {}
obj.a = 1
obj.b = 2
console.log(obj) //{a: 1, b: 2}

10. 日期时间不足补0

// 为时间补0 如：2019-1-1 → 2019-01-01
AppendZero(obj){
	return s < 10 ? '0' + s : s
}
             
// 使用
this.AppendZero()

11.Element日期选择器

// picker-options	当前时间日期选择器特有的选项
<el-date-picker
  :picker-options="startDatePicker"
  v-model="form.playDate"
  type="date"
  default-time='01:00:00'>
</el-date-picker>

data(){
  return{
    startDatePicker:this.pickDate(),
  }
}

pickDate(){
    return {
        disabledDate(time){
    	    // 禁止选择今天及之前的日期
    	    return time.getTime() < Date.now()
            // 禁止选择今天以前的日期
             return time.getTime() < Date.now() - 8.64e7
    	}
    }
}

11.element级联选择器注意点

选择多选，传给后台的字段不一致

11.element图片上传获取删除图片的数组

 handleRemove(file, fileList){
  let index = 0
  let key = 'imgId'  //  根据imgId删除对象数组里的相应对象
  let arr = this.form.imgs  
  for (let i in arr) {
    if(arr[i][key] == file.response.id){
      index = i  // 获取被点击删除图片的index
      break;
    }
  }
  arr.splice(index,1)  // 删除被点击的图片
  this.form.imgs = arr // 获得了删除后的图片数组
},

12. 跨域请求携带cookie

withCredentials: true