/** * 输入框聚焦清空失焦还原 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); } } }