2022知识点小记

1. vant 单元格样式

vant 方框
    background: #ffffff;
    margin: 10px 10px 0 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 3px 3px #eeeeee;
    box-shadow: 0 0 3px 3px #eeeeee;

2. 递归获取想要的数据结构

    // 递归
    convertTree(tree) {
      const result = []
      // 遍历 tree
      tree.forEach((item) => {
        // 解构赋值
        let { id: value, name: label, children: children } = item

        // 如果有子节点，递归
        if (children) {
          children = this.convertTree(children)
        }

        result.push({
          value,
          label,
          children,
        })
      })

      return result
    },

3.造数据随机生成数字

// 生产GUID
const creatGuid = () => {
  return "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

// 随机生成随机整数
const randomFloor = (min, max) => {
  return Math.floor(Math.random() * (max - min)) + min
}

4.时间格式化

const timeFormatter = (value, type) => {
  var date = value
  var seperator1 = "-"
  // var seperator2 = ":"
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = "0" + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate
  }
  // 年月日
  if (type == "YYYY-MM-DD") {
    value = date.getFullYear() + seperator1 + month + seperator1 + strDate
  }

  // 年月
  if (type == "YYYY-MM") {
    value = date.getFullYear() + seperator1 + month
  }
  return value
}

5. 状态码302,token验证
6. 跨域问题:设置proxy,axios的baseUrl,用env环境变量VUE_APP_API_URL,示例链接
7. 短信验证码60s定时器

 <van-button round plain size="small" type="info" 
          native-type="button" 
          class="register_code" 
          @click="getCode(60)" 
          :disabled="obtainDisabled" 
          :loading="obtainLoading">{{codeText}}</van-button>
          

    getCode(value) {
      this.obtainLoading = true
      let time = value
      let i = 0
      let that = this

      let set = setInterval(function () {
        that.codeText = --time
        i++
        //开始
        if (i == 1) {
          console.log('get code start ... ')
          that.obtainDisabled = true
          that.obtainLoading = false
        }
        // 结束
        if (i == value) {
          that.obtainDisabled = false
          that.codeText = '获取'
          clearInterval(set)
        }
      }, 1000)
    },

8.map,获取数组中想要的字段;返回新数组

        var ids = this.List.map(item => {
          return item.id
        })

		var ids = this.List.map(item => item.id)//简写

9.find,查找数组中第一个符合的值

	    let test = [1, 2, 3, 4, 5];
        let a = test.find(item => item > 3);
        console.log(a); //4
        

10.findIndex;返回 在数组中查找符合条件第一个元素的index索引

var arr=[12, 16, 18, 20]
let index = arr.findindex((item)=>{
	item >= 18
})
// 打印index为2

echarts图例