uview步进器点击加减如何避免同时触发失焦方法

背景：在自定义了uview的加减图标之后，发现用户点击加减法会同时触发了失焦事件，避免用户点击加减如何避免同时触发失焦方法，可以做以下尝试

在使用 uView 的步进器（Stepper）组件时，如果希望点击加减按钮时避免同时失去焦点，可以通过以下几种方法来实现：

1. 使用 @focus 和 @blur 事件

可以维护一个状态，用于追踪用户是否点击了加减按钮，在这时阻止输入框的失焦。

<template>  
  <u-stepper  
    v-model="value"  
    @focus="handleFocus"  
    @blur="handleBlur"  
    :disabled="disabled"  
    :min="1"  
    :max="100"  
  />  
</template>  

<script>  
export default {  
  data() {  
    return {  
      value: 1,  
      isButtonClicked: false,  
    };  
  },  
  methods: {  
    handleFocus() {  
      if (!this.isButtonClicked) {  
        // 处理聚焦  
        console.log('Input focused');  
      }  
    },  
    handleBlur() {  
      if (!this.isButtonClicked) {  
        // 取消聚焦时的处理  
        console.log('Input blurred');  
      }  
      this.isButtonClicked = false; // 重置状态  
    },  
    onButtonClick() {  
      this.isButtonClicked = true; // 标记按钮已点击  
      // 执行加/减操作  
    },  
  },  
};  
</script>

2. 自定义按钮点击事件

在加减按钮的点击事件中，可以手动处理输入框的聚焦和失焦状态，让失焦操作滞后发生。

<template>  
  <u-stepper  
    v-model="value"  
    :disabled="disabled"  
    :min="1"  
    :max="100"  
    @add="handleAdd"  
    @reduce="handleReduce"  
  />  
</template>  

<script>  
export default {  
  data() {  
    return {  
      value: 1,  
    };  
  },  
  methods: {  
    handleAdd() {  
      this.value += 1;  
      this.$nextTick(() => {  
        this.$refs.stepperRef.focus(); // 强制聚焦输入框  
      });  
    },  
    handleReduce() {  
      this.value -= 1;  
      this.$nextTick(() => {  
        this.$refs.stepperRef.focus(); // 强制聚焦输入框  
      });  
    },  
  },  
};  
</script>

3. CSS 提高可用性

有时候，使用 CSS 来提高用户界面的友好性，比如加大按钮点击区域，防止误操作也是一个改善方案。

总结

根据需求的复杂性，可以选择合适的方法来避免步进器失去焦点。若需要进一步的具体实现细节或帮助，请告知！