目录
- 一、业务需求
- 二、前端学习
一、业务需求
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.scrollWidththis.$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 等等。
在需要动画的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之分。