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

[yd278]

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

[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>