vue(element-ui)小技巧

1.输入框限制输入数字

<el-input
  v-model.trim.number="form.refundMoney"
  type="number"
  oninput="value=((value.replace(/[^0-9.]/g,'')).replace(/([0-9]+.[0-9]{2})[0-9]*/,'$1'))"
  style="color: #fff"
  placeholder="请输入金额"
  :controls="false"
  :precision="2"
>
</el-input>

 // 不用v-model.number。 会导致无法输入大数字 出现infinity
 // 不用type="number" 。 会导致右侧出现箭头

如果使用number又不想出现箭头，参考【elementUI样式优化】之el-input输入数字类型 type=‘number‘ 不显示右侧上下箭头 == 修改箭头右边距

2.重置对象（搜索表单）

export function resetSearchForm(obj, retainArray) {
  if (!obj || typeof obj !== 'object') return
  Object.keys(obj).forEach(key => {
  // 不需要重置的key写这里
    if (obj[key] != null && obj[key] !== '' && obj[key] !== [] && key !== 'size'&& key !== 'vehicleType') {
    // 个别需要重新赋初始值的key写这里
      if (key === 'isTest') {
        obj[key] = 2
      } else if (key === 'current') {
        obj[key] = 1
      } else if (Array.isArray(obj[key])) {
        if (retainArray && obj[key].length > 0) {
          resetSearchForm(obj[key][0])
          obj[key] = [obj[key][0]]
        } else {
          obj[key] = []
        }
      } else if(typeof obj[key] === 'object') {
        resetSearchForm(obj[key])
      }else {
        switch (typeof obj[key]) {
          case 'string':
            obj[key] = ''
            break
          default:
            obj[key] = null
            break
        }
      }
    }
  })
}

3. 修改滚动条

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width:8px;    // 纵向滚动条生效
height:16px;  // 横向滚动条生效
background-color: #000926;  // 待确认
border-radius: 10px;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0,0.3);
  border-radius: 10px;
  background-color: #ffffff;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #a6a9ad;
}