front-end/hdApp/src/mixins/inputRestore.js

/**
 * 输入框聚焦清空失焦还原 mixin
 * 用法：
 * 1. 在组件中引入: import inputRestore from '@/mixins/inputRestore'
 * 2. 在 mixins 中使用: mixins: [inputRestore]
 * 3. 在模板中使用: @focus="onInputFocus('fieldName')" @blur="onInputBlur('fieldName')"
 */
export default {
  data() {
    return {
      tempInputValue: '', // 临时存储输入框值
    }
  },
  methods: {
    /**
     * 通用输入框聚焦处理
     * @param {string} field - 表单字段名
     * @param {object} formObj - 表单对象，默认为 this.form
     */
    onInputFocus(field, formObj = this.form) {
      this.tempInputValue = formObj[field];
      formObj[field] = '';
    },
    
    /**
     * 通用输入框失焦处理
     * @param {string} field - 表单字段名
     * @param {object} formObj - 表单对象，默认为 this.form
     */
    onInputBlur(field, formObj = this.form) {
      if (formObj[field] === '') {
        formObj[field] = this.tempInputValue;
      }
    },
    
    /**
     * 创建聚焦处理函数
     * @param {string} field - 表单字段名
     * @param {object} formObj - 表单对象，默认为 this.form
     * @returns {function} 聚焦处理函数
     */
    createFocusHandler(field, formObj = this.form) {
      return () => this.onInputFocus(field, formObj);
    },
    
    /**
     * 创建失焦处理函数
     * @param {string} field - 表单字段名
     * @param {object} formObj - 表单对象，默认为 this.form
     * @returns {function} 失焦处理函数
     */
    createBlurHandler(field, formObj = this.form) {
      return () => this.onInputBlur(field, formObj);
    }
  }
}