vol框架旧版本输入框实时更新数据的bug处理

vol框架旧版本输入框实时更新数据的bug处理

1、找到文件：src\components\basic\VolForm.vue 搜索【keypress】

           <el-input
              :size="size"
              clearable
              :ref="item.field"
              :input-style="item.inputStyle"
              :disabled="item.readonly || item.disabled"
              v-else-if="item.type == 'textarea'"
              v-model="formFields[item.field]"
              type="textarea"
              :autosize="{
                minRows: item.minRows || 2,
                maxRows: item.maxRows || 10
              }"
              :placeholder="item.placeholder ? item.placeholder : item.title"
              @keypress="
                ($event) => {
                  onKeyPress($event, item);
                }
              "
              @change="item.onKeyPress"
              @blur="item.blur"
              @focus="item.focus"
            />
            <el-input-number
              :size="size"
              style="width: 100%"
              :ref="item.field"
              :input-style="item.inputStyle"
              v-else-if="item.type == 'number'"
              v-model="formFields[item.field]"
              :min="item.min"
              :disabled="item.readonly || item.disabled"
              :max="item.max"
              controls-position="right"
              @keypress="
                ($event) => {
                  onKeyPress($event, item);
                }
              "
              @change="item.onKeyPress"
              @keyup.delete="($event)=>{item.onKeyPress&&item.onKeyPress($event,item)}"
              @blur="item.blur"
              @focus="item.focus"
            />
            <el-input
              :size="size"
              clearable
              :input-style="item.inputStyle"
              v-else-if="item.type == 'password'"
              type="password"
              v-model="formFields[item.field]"
              :disabled="item.readonly || item.disabled"
              v-show="!item.hidden"
              :placeholder="item.placeholder ? item.placeholder : item.title"
            />
            <!-- 2021.11.18修复el-input没有默认enter事件时回车异常 -->
            <el-input
              :size="size"
              clearable
              :ref="item.field"
              :input-style="item.inputStyle"
              v-else-if="item.onKeyPress"
              :placeholder="item.placeholder ? item.placeholder : item.title"
              :disabled="item.readonly || item.disabled"
              v-show="!item.hidden"
              v-model="formFields[item.field]"
              @keypress="
                ($event) => {
                  onKeyPress($event, item);
                }
              "
              @keyup.delete="item.onKeyPress"
              @change="item.onKeyPress"
              @keyup.enter="item.onKeyPress"
              @blur="item.blur"
              @focus="item.focus"
            ></el-input>

用框内的代码替换原代码

【methods】内的onKeyPress方法也改一下

2、页面输入框， onKeyPress的写法 

        [
          {
            title: '输入事件',
            required: true,
            field: 'InpuText',
            type: 'text',
            onKeyPress: ($event) => {
              setTimeout(() => {
                console.log(this.formFields.InpuText);
                //也可给其他字段设置值(实时计算)
                this.setvalue();
              }, 100);
            },
            extra: {
              style: 'color:red;cursor: pointer;',
              icon: 'el-icon-edit', //显示图标
              text: '点击', //显示文本
              //触发事件
              click: (item) => {
                this.$message.error('点击标签触发的事件');
              }
            }
          }
        ],
        [
          {
            title: '输入事件',
            required: true,
            readonly: true,
            field: 'InpuText1',
            placeholder: '上面添加onKeyPress事件',
            type: 'text',
            readonly: true,
            
          }
        ],

3、setvalue方法：（methods内）

   setvalue(){
      this.formFields.InpuText1=this.formFields.InpuText;
    }