vue3笔记（20-1）el-input踩坑

一个最基础的输入框居然藏着坑！记录数字输入没有报错bug，内容基于el-form校验 。
el-input事件记录。

输入框

文字输入框

<el-form ref="testFormRef" :model="testForm" :rules="testFormRule" label-width="300px">
  <el-form-item label="aaa：" prop="aaa">
    <el-input v-model="testForm.aaa" placeholder="请输入aaa"></el-input>
  </el-form-item>
</el-form>

数字输入框

1. 数字输入框可以通过左右两边的+-实现基于步长的直接增减，方便操作；
2. 数字输入框可以限制输入最大值和最小值，不在区间范围内的，会自动变成边界值；
3. 数字输入框可以设置输入数值的精度，精度为0，只能输入整数；

   <el-input-number
     v-model="testForm.bbb"
     :precision="0"
     :min="0"
     :max="1000"
     placeholder="请输入bbb"
   />

   数字输入框有一点其他文档里都没有说明，就是有种骚操作（来自测试同学），直接粘贴了小数点.，在设置了精度为0的条件下，这个输入框居然没有报错！
   我原来以为再加一个正则判断就行，谁知还是绕过了验证…
   
   在打印之后，发现小数点在输入框中的值是null，难怪正则验证不出来…

文字输入框输入数字

通过v-model.number和正则结合可以控制只输入整数

<el-input 
  v-model.number="tetForm.ccc" 
  placeholder="请输入ccc">
</el-input>

const testFormRule = reactive({
  aaa: [
    { required: false, trigger: ['blur', 'change'] },
    { validator: validateText50, trigger: ['blur', 'change'] }
  ],
  ccc: [
    { required: false, trigger: ['blur', 'change'] },
    { validator: validateNumber, trigger: ['blur', 'change'] }
  ]
})
export const validateNumber = (rule: any, value: number, callback: Function) => {
  if (!isValidNumber(value)) {
    callback(new Error('请输入整数'))
  } else {
    callback()
  }
}

const isValidNumber = (n: number) => {
  if (n) {
    const reg1 = /^\d+$/
    const v1 = reg1.test(n)
    return v1
  } else {
    return true
  }
}
export const validateText50 = (rule: any, value: string, callback: Function) => {
  if (!isValidName50(value)) {
    callback(new Error('请输入0-50位中文、字母或数字，支持部分特殊符号'))
  } else {
    callback()
  }
}
export const isValidName50 = (checkStr: string) => {
  const str = checkStr ? checkStr : ''
  const reg1 =
    /^[0-9\u4e00-\u9fa5a-zA-Z0-9“”"‘’/'\-()\[\]!！@#$￥%^&*{}<>《》·`。.,，；;：【】:（）]{0,50}$/
  const v1 = reg1.test(str)
  const v2 = str.length < 51
  return v1 && v2
}

输入框事件

场景描述：

1. 输入框聚焦时，展示下拉列表更多筛选选择
2. 输入框 enter 或者点击右侧放大镜图标时，触发搜索事件
3. 下拉列表高级搜索时，收起自身

   <el-input v-model="docFilter.search" placeholder="输入文档名称搜索" @focus="searchDocText" @keyup.enter.native="handleSearch" ref="inputRef">
       <template #suffix>
           <el-icon class="icon-search">
               <Search @click="handleSearch"/>
           </el-icon>
       </template>
   </el-input>
   <div v-if="showSearch">这里是下拉列表筛选</div>

   这里需要注意，点击时input输入框仍然属于focus状态，不会收起下拉列表，所以需要手动触发一个blur，若没有效果，可使用setTimeout。

   const searchDocText = () => {
     showSearch.value = true;
   }
   // enter之后搜索
   const handleSearch = () => {
       if (!docFilter.search) {
           showSearch.value = false;
           return;
       } 
       data.page.page = 1
       refreshDocList()
       setTimeout(() => {
           inputRef.value.blur()
           showSearch.value = false;
       }, 0)
   }