标记(badge)不能遮盖住「按钮聚焦时高亮的边框」

[yd278]

描述错误

如图，鼠标悬浮在按钮上时，标记无法盖住边框线

复现步骤

呃就 鼠标移上去？

最小复现链接

https://gist.github.com/yd278/018ba71096bd2faf4bb39b1866e16cb7

系统信息

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 130.63 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Safari: 17.4.1
  npmPackages:
    naive-ui: ^2.38.2 => 2.38.2 
    vue: ^3.4.21 => 3.4.23 

（但是实际上在用Electron？）

使用的包管理器

npm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。

[TianQian-A]

将结构改成这样就行了。

<script setup lang="ts">
import { NButton } from 'naive-ui'
import { defineModel } from 'vue'
import { NBadge } from 'naive-ui'
const buttonType = defineModel<'default' | 'primary'>('state', { default: 'default' })
function toggleButtonType() {
  buttonType.value = buttonType.value === 'default' ? 'primary' : 'default'
}
const remaining = defineModel<number>('remaining', { default: 9 })
</script>

<template>
    <n-badge :value="remaining" type="info">
      <n-button :focusable="false" :type="buttonType" @click="toggleButtonType"></n-button>
      <template #value>
        <slot></slot>
      </template>
    </n-badge>
</template>

<style scoped>
.n-button {
  width: 60px;
  height: 60px;
  padding: 0;
}
</style>