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的用户名和密码