23年4月工作笔记整理（前端）-Toy模板网

这篇具有很好参考价值的文章主要介绍了23年4月工作笔记整理（前端）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、业务需求

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 等等。

在需要动画的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模板网！