一、业务需求
1.单个校验触发this.$refs[‘表单ref’].validateField(‘单个校验名’)
2.return 只会退出当前循环，不是退出方法，与break类似
3.store里的数据刷新会消失，可以采取重新调接口，或者用cookie缓存
4.双向绑定v-model触发的是父组件的input事件，.sync触发的是父组件的update事件
5.使用dialog组件时的技巧
//父组件
<child-dialog :visible.sync="visible"></child-dialog>
//子组件
close(){
this.$emit('update:visible', false)
}
6.pointer-events属性：none元素不能对鼠标事件做出反应；auto设置可以正常点击访问
7.让滚动条滚到最右边
const height = this.$refs.scroll.scrollWidth
this.$refs.scroll.scrollTo(height, 0)
8.前端跨域解决方案
vue.config.js
defineConfig下devServer下加
proxy: {
'/proxy': {
target: 'https://emng-test.zoomlion.com',
pathRewrite: { '^/proxy': '' },
changeOrigin: true
}
}
request.js
axios.create下的 baseURL: '/proxy',
9.route传参后，刷新当前页，会把之前的数据类型转为字符串类型
10.堡垒机配置流水线信息
sudo -i
输入密码
cd /usr/local/nginx/conf
cat nginx.conf
vi nginx.conf
…/sbin/nginx -s reload
10.日期合并算法
getDataFormat(arr) {
if (arr.length === 0) {
//如果数组是空的就返回空串
return ''
}
//存上一天的日期
let lastDate = dayjs(arr[0])
//存展示字符串
let str = ''
for (let i = 1; i < arr.length; i++) {
//存遍历到的这一天的日期
const thisDate = dayjs(arr[i]).format('M月D日')
//存上一个展示字符串的结尾字符
const lastWord = str.substring(str.length - 1)
if (lastWord === '~') {
//如果展示字符串的结尾字符为~，说明上一天里存在连续
if (lastDate.add(1, 'day').format('M月D日') === thisDate) {
//如果上一天加一天等于这一天的日期，就不处理
console.log('')
} else {
//如果不等于就像相当于断了连续，就存当前日期加、
str = str + lastDate.format('M月D日') + '、'
}
} else {
//上一天不存在连续的情况
if (lastDate.add(1, 'day').format('M月D日') === thisDate) {
//如果上一天加一天等于这一天的日期，就做连续开始的字符串
str = str + lastDate.format('M月D日') + '~'
} else {
//不等于就是不连续，用、分割
str = str + lastDate.format('M月D日') + '、'
}
}
//更新，把本次日期存下来，用来下一次循环的上一次日期使用
lastDate = dayjs(arr[i])
}
str = str + lastDate.format('M月D日')
return str
},
二、前端学习
1.背景图的属性
background-image ：指定对象的背景图像。url(路径)
background-position ：指定对象的背景图像位置。x y的设置，可以具体的值或百分比，或者top left center bottom组合
background-size ：指定对象的背景图像的尺寸大小。length|percentage（宽和高）|cover（平铺）|contain（扩展至最大尺寸）
background-repeat ：规定如何重复背景图像。repeat重复、repeat-x/y背景图像在水平/垂直方向重复、no-repeat不重复
background-attachment ：规定背景图像是否固定或者随着页面的其余部分滚动。scroll（滚动）|fixed（固定不动）
background-origin ：规定背景图片的定位区域。 padding-box（内边距定位）|border-box（边框定位）|content-box（内容框定位）;
background-clip ：指定对象的背景图像向外裁剪的区域。border-box（裁剪边框外）|padding-box（裁剪内边距外）|content-box（裁剪内容框外）;
background-color ：指定对象的背景颜色。
2.css动画
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
animationName：表示动画的名称；
from：定义动画的开头，相当于 0%；
percentage：定义动画的各个阶段，为百分比值，可以添加多个；
to：定义动画的结尾，相当于 100%；
properties：不同的样式属性名称，例如 color、left、width 等等。文章来源：https://www.toymoban.com/news/detail-430112.html
在需要动画的div 外面包一层transition name=过渡名
一般设置过渡名-enter（开始进入）,过渡名-leave-to（结束离开）
.过渡名-enter{
animation: animationName 0.25s（动画时间） 过渡类型 动画播放方向；
过渡类型：linear（动画从头到尾的速度是相同的）/ease（默认。动画以低速开始，然后加快，在结束前变慢。）/ease-in（动画以低速开始。）/ease-out（动画以低速结束。）/ease-in-out（动画以低速开始和结束。）
动画播放方向的值有：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
properties可以使用transform
transform的属性包括：rotate()（旋转） / skew()（倾斜） / scale()（比例） / translate()（位移） ，分别还有x、y之分。文章来源地址https://www.toymoban.com/news/detail-430112.html
到了这里，关于23年4月工作笔记整理（前端）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
