如何让Quasar的q-input清除按钮仅在聚焦时显示？

我使用Quasar框架的q-input组件实现了输入框内的清除按钮（叉形小图标），但当前清除按钮无论输入框是否聚焦都会显示。需要实现：输入框无焦点时隐藏清除按钮，聚焦且有内容时显示清除按钮。现有代码如下：

现有代码 #

HTML代码 #

<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <!-- equivalent -->
      <q-input color="orange" filled v-model="text" label="Label">
        <template v-if="text" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <!-- equivalent -->
      <q-input color="orange" filled v-model="text" label="Label">
        <template v-if="text" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <!-- equivalent -->
      <q-input color="orange" filled v-model="text" label="Label">
        <template v-if="text" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
  </div>
</div>

JS + Quasar代码 #

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      text: ref('Some text')
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

解决方案 #

要实现需求，需要为每个输入框跟踪聚焦状态，结合输入内容判断控制清除按钮显示。具体修改如下：

修改后的JS代码 #

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      // 为每个输入框创建独立的内容和聚焦状态变量
      text1: ref('Some text'),
      text2: ref('Some text'),
      text3: ref('Some text'),
      isFocused1: ref(false),
      isFocused2: ref(false),
      isFocused3: ref(false)
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

修改后的HTML代码 #

<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <q-input color="orange" filled v-model="text1" label="Label"
        @focus="isFocused1 = true"
        @blur="isFocused1 = false">
        <!-- 同时判断输入内容和聚焦状态 -->
        <template v-if="text1 && isFocused1" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text1 = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <q-input color="orange" filled v-model="text2" label="Label"
        @focus="isFocused2 = true"
        @blur="isFocused2 = false">
        <template v-if="text2 && isFocused2" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text2 = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
    <div class="q-gutter-y-md column" style="max-width: 300px">
      <q-input color="orange" filled v-model="text3" label="Label"
        @focus="isFocused3 = true"
        @blur="isFocused3 = false">
        <template v-if="text3 && isFocused3" v-slot:append>
          <q-icon name="cancel" @click.stop.prevent="text3 = null" class="cursor-pointer"></q-icon>
        </template>
      </q-input>
    </div>
  </div>
</div>

关键说明 #

• 每个输入框绑定独立的v-model和聚焦状态变量，避免多个输入框状态互相干扰
• 通过@focus和@blur事件更新输入框的聚焦状态
• 清除按钮的显示条件改为textX && isFocusedX，仅当输入有内容且输入框聚焦时才显示

内容的提问来源于stack exchange，提问作者Oleksandr Myronchuk