NpButton

A wrapper around n-button that extends it with throttling and async capabilities.

Basic Usage

The default click event is throttled.

浏览器不支持，请手动复制 basic.en.vue

<template>
  <np-button style="margin-right: 8px" @click="handleClick">
    Default throttle 350ms
  </np-button>
  <np-button :throttle-delay="1000" type="primary" @click="handleClick">
    Throttle 1000ms
  </np-button>
  <!-- click log -->
  <div v-for="(item, idx) in logs" :key="idx">
    {{ item }}
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const logs = ref<string[]>([])
const handleClick = async () => {
  if (logs.value.length > 5) {
    logs.value.splice(0, 1)
  }
  logs.value.push(`Clicked: ${Date().toString()}`)
}
</script>

Async Button

Use the :click prop to replace the original @click event.

浏览器不支持，请手动复制 async.en.vue

<template>
  <div class="flex-row gap-2">
    <np-button :click="handleClick">Async</np-button>
    <np-button type="primary" :click="handleClick">Async</np-button>
    <np-button type="error" :click="handleClick">Async</np-button>
    <np-button type="warning" :click="handleClick">Async</np-button>
    <np-button
      type="success"
      :click="(e: any) => handleClick(e, 5000)"
      :loading-delay="1000"
    >
      Async
    </np-button>
  </div>
</template>
<script setup lang="ts">
const handleClick = async (e: MouseEvent, delay = 2000) => {
  console.log('Clicked', delay)
  // simulate a time-consuming operation
  await new Promise<void>(resolve => setTimeout(resolve, delay))
}
</script>
<style>
.flex-row {
  display: flex;
  flex-direction: row;
}

.gap-2 {
  gap: 8px;
}
</style>

Button Types

浏览器不支持，请手动复制 type.en.vue

<template>
  <div class="flex-row gap-2">
    <np-button :click="handleClick">Button</np-button>
    <np-button type="primary" :click="handleClick">Button</np-button>
    <np-button type="success" :click="handleClick">Button</np-button>
    <np-button type="warning" :click="handleClick">Button</np-button>
    <np-button type="error" :click="handleClick">Button</np-button>
  </div>
</template>
<script setup lang="ts">
const handleClick = async (e: MouseEvent, delay = 2000) => {
  console.log('Clicked', delay)
  // simulate a time-consuming operation
  await new Promise<void>(resolve => setTimeout(resolve, delay))
}
</script>
<style>
.flex-row {
  display: flex;
  flex-direction: row;
}

.gap-2 {
  gap: 8px;
}
</style>

Props

Props

Prop	Description	Type	Default
throttle-delay	Throttle delay in ms	number	350
loading-delay	Loading delay in ms	number	250
click	Click handler	() => Promise<void>	-
type	Theme style	default/primary/warning/success/info/error	default
props	Other button props	object -> Button Props

Events

Event	Description	Callback
click	Triggered on click	() => void

Slots

Slot	Description
default	Custom default content

Types

The component exports the following type definitions:

import type { NpButtonProps } from 'naive-plus'

Global Defaults

Use NpConfigProvider to change the default props globally. Props passed to the component itself always win.

<np-config-provider
  :component-options="{ Button: { type: 'primary', props: { size: 'small' } } }"
>
  <np-button>Button</np-button>
</np-config-provider>

Note: click / onClick belong to the usage behavior and cannot be set globally.