最近工作中遇到的问题总结

1校验必填自动移到错误位置

• 1. 背景

  表单校验大多数的表单都会用到，一般情况下只是提示当前哪些项校验不通过，但是如果表单比较需要用户自己去找是哪项校验不通过，这样的用户体验不太好，如果能自动定位到当前校验不通过的表单项体验会更好一些（这里是以elementui 的 el-from 组件为例子）

• 2解决方案

  表单校验不通过的时候，会在未校验成功的表单 el-form-item 标签上加一个类名 is-error，可以从这个类名下手，获取当前校验不通过的所有的类名，然后通过 scrollIntoView 方法进行自动滑动到当前报错的表单项位置

3代码实现

 // 表单校验
    verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校验通过执行的逻辑
        } else {
          // 校验不通过自动定位到不通过的表单项
          this.moveToErr()
        }
      })
    },


    // 自动定位到表单报错项
    moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        if (isError.length) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
	// 这个当滑动到报错项之后自动获取输入框的焦点，方便用户直接进行输入，延迟 800ms 是因为需要都能到定位成功后在进行获取焦点体验更好一些
          setTimeout(() => {
            if (isError[0].previousElementSibling.querySelector('input')) {
              isError[0].previousElementSibling.querySelector('input').focus()
            }
          }, 800)
        }
      })
    }

2使用自定义指令对input进行大小限制

• 1. 背景

  在el-input中输入数字，并且限制输入范围，比如0-5之间，当用户输入大于5的数字会自动变成5，当用户输入小于0的数字会自动变为零

• 2解决方案

  使用vue3全局自定义指令，vue3的指令生命周期相比vue2已经发生变化，这点需要注意一下。

• 3代码实现

 app.directive('limit-range', {
    mounted(el, binding) {
        el = el.querySelector('.el-input__inner');
        const { min = 0, max = 100 } = binding.value;
        const handler = () => {
            let val = parseFloat(el.value);
            if (isNaN(val)) val = min;
            if (val > max) el.value = max;
            if (val < min) el.value = min;
            el.dispatchEvent(new Event('input')); // 触发v-model更新
        };
        if (el) {
            el.addEventListener('blur', handler);
        }
    }
});

使用的时候在相应的input上面使用。

 <el-input v-limit-range="{ min: 0, max: 2 }" type="number" v-model="value"></el-input>