NovaButton 按钮

NovaButton 提供语义化按钮基础能力，并保持与原生 <button> 一致的交互语义，可直接通过 import { NovaButton } from 'nova-next' 使用；如需安装与样式指引，请访问 快速开始。

示例

基础用法

预览

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/button.css'
import { NovaButton } from '@jiangshengdev/nova-next'
</script>

<template>
  <div class="demo-row">
    <NovaButton>默认按钮</NovaButton>
    <NovaButton primary>主要按钮</NovaButton>
    <NovaButton disabled>禁用按钮</NovaButton>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

图标拓展

预览

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/button.css'
import { NovaButton } from '@jiangshengdev/nova-next'

const starIcon = '⭐'
</script>

<template>
  <div class="demo-row">
    <NovaButton :icon="starIcon">图标属性</NovaButton>
    <NovaButton>
      <template #icon>🚀</template>
      插槽图标
    </NovaButton>
    <NovaButton :icon="starIcon" aria-label="仅图标按钮" />
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

交互响应

预览

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/button.css'
import { NovaButton } from '@jiangshengdev/nova-next'
import { ref } from 'vue'

const count = ref(0)
const busy = ref(false)

const handleAsyncClick = async () => {
  if (busy.value) {
    return
  }

  busy.value = true
  await new Promise((resolve) => setTimeout(resolve, 500))
  count.value += 1
  busy.value = false
}

const reset = () => {
  if (busy.value) {
    return
  }

  count.value = 0
}
</script>

<template>
  <div class="demo-row">
    <NovaButton :disabled="busy" @click="handleAsyncClick">
      {{ busy ? '处理中…' : `点击次数 ${count}` }}
    </NovaButton>
    <NovaButton primary :disabled="busy" @click="reset">重置计数</NovaButton>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

属性

名称	说明	类型	默认值
type	按钮语义类型，完全透传原生 button。	'button' | 'submit' | 'reset'	'button'
primary	是否启用主题主按钮外观。	boolean	false
icon	设置图标节点，若仅含图标会自动添加 nova-button-icon-only。	VNodeChild	null
disabled	禁用状态，阻止交互并同步样式。	boolean	false
theme	覆盖环境主题，内部同时写入 data-nova-theme。	string	null

其他属性与事件均继承 ButtonHTMLAttributes，可自由传入。

插槽

名称	说明
default	按钮文本或自定义内容。
icon	自定义图标区域，优先级高于 icon 属性。

事件

名称	说明
原生事件	支持 click、focus、blur 等全部原生按钮事件，直接在组件上监听即可。