22年8月工作笔记整理（前端）

8月主要在做一个新项目，也遇到了一些新的坑

一、css相关

1.设置滚动条样式

.select-more::-webkit-scrollbar {
  /*滚动条整体样式，这里宽和高一定要设置*/
  width: 10px; 
  height: 10px;
}
.select-more::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
}
.select-more::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(1, 11, 54, 0);
  border-radius: 10px;
}

2.边框渐变
从左右边框垂直渐变，background-clip: padding-box, border-box;
background-origin: padding-box, border-box;是实现的根本

background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
        to bottom,
        #032f4c 0%,
        #000f31 50%,
        #032f4c 100%
      ),
      linear-gradient(to bottom, #03959f 0%, #000f31 50%, #03959f 100%);
    border-right: 1px transparent solid;
    border-left: 1px transparent solid;
    border-top: 1px #03959f solid;
    border-bottom: 1px #03959f solid;

3.遇到难调整的样式，可以考虑一下position的定位问题，有可能把absolute变成static定位

二、需求相关新组件

1.大屏适配方案组件

<template>
  <div class="wrap">
    <div class="ScaleBox"
         ref="ScaleBox"
         :style="{
          width,
          height
        }">
      <BigScreen></BigScreen>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScaleBox",
  props: {
    width: {
      type: Number,
      default: 1920
    },
    height: {
      type: Number,
      default: 1080
    }
  },
  data() {
    return {
      scale: null
    };
  },
  mounted() {
    this.setScale();
    window.addEventListener("resize", this.setScale);
  },
  methods: {
    getScale() {
      const { width, height } = this;
      let ww = window.innerWidth / width;
      let wh = window.innerHeight / height;
      return ww < wh ? ww : wh;
    },
    setScale() {
      this.scale = this.getScale();
      this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
    },
    debounce(fn, delay) {
      let delays = delay || 500;
      let timer;
      return function() {
        let th = this;
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function() {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    }
  }
};
</script>

<style >
#ScaleBox {
  --scale: 1;
}
.wrap {
  background: #eee;
  width: 100%;
  height: 5000px;
}
.ScaleBox {
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  height: 100%;
  flex-direction: column;
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
}
</style>

2.点击按钮变化样式

<template>
  <div class="btnGroup">
    <button
      v-for="(item, index) in listData"
      :key="index"
      @click="changeColor(index)"
      :class="activeIndex === index ? 'active' : ''"
    >
      {{ item }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: ["Button1", "Button2", "Button3", "Button4", "Button5"],
      // 标记被选中的按钮的index
      activeIndex: null,
    };
  },
  methods: {
    changeColor(index) {
        this.activeIndex = index;
    }
  }
};
</script>

<style lang="less" scoped>
.btnGroup {
  width: 500px;
  height: 100px;
  button {
    width: 15%;
    height: 35%;
    margin: 20px 0 20px 20px;
    background-color: pink;
    border: 1px solid skyblue;
  }

  // 被选中的按钮的样式
  .active {
    background-color: antiquewhite;
  }
}
</style>

三、框架知识

1.路由守卫
基础知识：
to:即将进入的目标，路由对象
from:当前导航正要离开的路由
next:直接调用就是进入当前路由，传false就是中断导航，传路由就是对应的路由地址
还可以配置路由元 meta{}

//组件内守卫
beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 `this`，但可以使用全局定义的vm
    //直接调用next()就是进入路由，改变组件内的data值，就是用next的回调函数的参数获取
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用，比如用户未保存离开确认
    // 可以访问组件实例 `this`
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
  }

四、一些日常小问题

1.判断对象是否有内容数据：Object.keys(orderObj).length>0
2.git拉代码的时候，需要重置用户设置：

git config ---global credential.helper osxkeychain

3.遇到remote用户失败的问题，就去控制面板-凭据管理器-修改git的用户名和密码