|
|
@@ -0,0 +1,169 @@
|
|
|
+## inputRestore.js - 输入框聚焦清空失焦还原 Mixin
|
|
|
+
|
|
|
+### 功能说明
|
|
|
+这个 mixin 提供了输入框聚焦时清空内容,失焦时如果没有输入则还原原值的功能。
|
|
|
+
|
|
|
+### 使用方法
|
|
|
+
|
|
|
+#### 1. 基本用法
|
|
|
+
|
|
|
+```javascript
|
|
|
+// 在组件中引入
|
|
|
+import inputRestore from '@/mixins/inputRestore'
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [inputRestore],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ price: '',
|
|
|
+ stock: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // ...
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```vue
|
|
|
+<!-- 在模板中使用 -->
|
|
|
+<template>
|
|
|
+ <input
|
|
|
+ v-model="form.price"
|
|
|
+ @focus="onInputFocus('price')"
|
|
|
+ @blur="onInputBlur('price')"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ />
|
|
|
+
|
|
|
+ <input
|
|
|
+ v-model="form.stock"
|
|
|
+ @focus="onInputFocus('stock')"
|
|
|
+ @blur="onInputBlur('stock')"
|
|
|
+ placeholder="请输入库存"
|
|
|
+ />
|
|
|
+</template>
|
|
|
+```
|
|
|
+
|
|
|
+#### 2. 自定义表单对象
|
|
|
+
|
|
|
+如果表单字段不在 `this.form` 中,可以传入自定义的表单对象:
|
|
|
+
|
|
|
+```javascript
|
|
|
+data() {
|
|
|
+ return {
|
|
|
+ userInfo: {
|
|
|
+ name: '',
|
|
|
+ phone: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+},
|
|
|
+methods: {
|
|
|
+ onNameFocus() {
|
|
|
+ this.onInputFocus('name', this.userInfo);
|
|
|
+ },
|
|
|
+ onNameBlur() {
|
|
|
+ this.onInputBlur('name', this.userInfo);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 3. 使用创建器函数(推荐)
|
|
|
+
|
|
|
+为了避免重复定义方法,可以使用创建器函数:
|
|
|
+
|
|
|
+```javascript
|
|
|
+computed: {
|
|
|
+ priceFocusHandler() {
|
|
|
+ return this.createFocusHandler('price');
|
|
|
+ },
|
|
|
+ priceBlurHandler() {
|
|
|
+ return this.createBlurHandler('price');
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```vue
|
|
|
+<template>
|
|
|
+ <input
|
|
|
+ v-model="form.price"
|
|
|
+ @focus="priceFocusHandler"
|
|
|
+ @blur="priceBlurHandler"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ />
|
|
|
+</template>
|
|
|
+```
|
|
|
+
|
|
|
+### API 说明
|
|
|
+
|
|
|
+#### Methods
|
|
|
+
|
|
|
+- `onInputFocus(field, formObj = this.form)` - 输入框聚焦处理
|
|
|
+- `onInputBlur(field, formObj = this.form)` - 输入框失焦处理
|
|
|
+- `createFocusHandler(field, formObj = this.form)` - 创建聚焦处理函数
|
|
|
+- `createBlurHandler(field, formObj = this.form)` - 创建失焦处理函数
|
|
|
+
|
|
|
+#### Parameters
|
|
|
+
|
|
|
+- `field` {string} - 表单字段名
|
|
|
+- `formObj` {object} - 表单对象,默认为 `this.form`
|
|
|
+
|
|
|
+### 注意事项
|
|
|
+
|
|
|
+1. 确保表单对象和字段存在,否则可能会报错
|
|
|
+2. 每个组件实例只有一个 `tempInputValue`,所以同时只能处理一个输入框
|
|
|
+3. 建议为每个输入框创建专门的处理方法,避免混乱
|
|
|
+
|
|
|
+### 完整示例
|
|
|
+
|
|
|
+```vue
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <input
|
|
|
+ v-model="form.price"
|
|
|
+ @focus="onPriceFocus"
|
|
|
+ @blur="onPriceBlur"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ type="digit"
|
|
|
+ />
|
|
|
+
|
|
|
+ <input
|
|
|
+ v-model="form.stock"
|
|
|
+ @focus="onStockFocus"
|
|
|
+ @blur="onStockBlur"
|
|
|
+ placeholder="请输入库存"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import inputRestore from '@/mixins/inputRestore'
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [inputRestore],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ price: '100',
|
|
|
+ stock: '50'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onPriceFocus() {
|
|
|
+ this.onInputFocus('price');
|
|
|
+ },
|
|
|
+ onPriceBlur() {
|
|
|
+ this.onInputBlur('price');
|
|
|
+ },
|
|
|
+ onStockFocus() {
|
|
|
+ this.onInputFocus('stock');
|
|
|
+ },
|
|
|
+ onStockBlur() {
|
|
|
+ this.onInputBlur('stock');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+```
|