VueJS中如何在条件判断里使用回调实现按钮焦点内联样式？

云原生阿岚

2026-8-24

解决Vue中焦点样式绑定不生效的问题

你的代码里用方法判断焦点元素来绑定内联样式，之所以不工作，是因为Vue只有在响应式数据变化时才会触发重新渲染，而焦点变化并不会自动触发组件更新，导致isThisElementActive()只会在组件初始渲染时执行一次，后续焦点切换时不会重新计算返回值。

下面给你两种可行的解决方案：

方案一：用响应式数据跟踪焦点状态（推荐）

通过按钮的focus和blur事件直接更新响应式变量，绑定样式时直接判断这个变量即可：

<template>
  <button
    ...
    :style="isButtonFocused ? {'border':'solid 2px blue'} : {}"
    @focus="isButtonFocused = true"
    @blur="isButtonFocused = false"
    ref="shipToStoreZipCodeButton"
  >
    {{ locationName }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isButtonFocused: false
    }
  },
  // 其他methods、props等代码...
}
</script>

方案二：用自定义指令（适合多个元素复用场景）

如果有多个元素需要类似的焦点样式逻辑，可以封装一个自定义指令，直接在元素上监听焦点事件并修改样式：

<template>
  <button
    ...
    v-focus-border="blue"
    ref="shipToStoreZipCodeButton"
  >
    {{ locationName }}
  </button>
</template>

<script>
export default {
  directives: {
    focusBorder: {
      mounted(el, binding) {
        const color = binding.value || 'blue'
        // 焦点触发时添加样式
        el.addEventListener('focus', () => {
          el.style.border = `solid 2px ${color}`
        })
        // 失焦时移除样式
        el.addEventListener('blur', () => {
          el.style.border = ''
        })
      },
      unmounted(el) {
        // 组件卸载时移除事件监听，避免内存泄漏
        el.removeEventListener('focus')
        el.removeEventListener('blur')
      }
    }
  },
  // 其他代码...
}
</script>