c-button

对 t-button 进行封装，扩展了节流和异步能力。

基础用法

默认点击事件已做节流处理

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

<template>
  <c-button style="margin-right: 8px" @click="handleClick">
    默认节流350ms
  </c-button>
  <c-button :throttle-delay="1000" theme="primary" @click="handleClick">
    设置节流1000ms
  </c-button>
  <!-- 点击日志 -->
  <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(`点击了: ${Date().toString()}`)
}
</script>

异步按钮

使用 :click 属性代替原来的 @click 事件

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

<template>
  <div class="flex-row gap-2">
    <c-button :click="handleClick">异步按钮</c-button>
    <c-button theme="primary" :click="handleClick">异步按钮</c-button>
    <c-button theme="danger" :click="handleClick">异步按钮</c-button>
    <c-button theme="warning" :click="handleClick">异步按钮</c-button>
    <c-button
      theme="success"
      :click="e => handleClick(e, 5000)"
      :loading-delay="1000"
    >
      异步按钮
    </c-button>
  </div>
</template>
<script setup lang="ts">
const handleClick = async (e: MouseEvent, delay = 2000) => {
  console.log('点击按钮', delay)
  // 模拟耗时操作
  await new Promise<void>(resolve => setTimeout(resolve, delay))
}
</script>
<style>
.flex-row {
  display: flex;
  flex-direction: row;
}

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

按钮形式

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

<template>
  <div class="flex-row gap-2">
    <c-button :click="handleClick">按钮</c-button>
    <c-button variant="outline" :click="handleClick">按钮</c-button>
    <c-button variant="dashed" :click="handleClick">按钮</c-button>
    <c-button variant="text" :click="handleClick">按钮</c-button>
  </div>
</template>
<script setup lang="ts">
const handleClick = async (e: MouseEvent, delay = 2000) => {
  console.log('点击按钮', delay)
  // 模拟耗时操作
  await new Promise<void>(resolve => setTimeout(resolve, delay))
}
</script>
<style>
.flex-row {
  display: flex;
  flex-direction: row;
}

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

属性

Props

属性	说明	类型	默认值
throttle-delay	节流延迟	number	350
loading-delay	加载延迟	number	250
click	点击函数	() => Promise<void>	-
theme	主题风格	primary/danger/warning/success	default
variant	按钮形式	outline/dashed/text	base
props	其他按钮属性	object -> TButton Props

Events

事件名	说明	参数
click	点击触发的事件	() => void

Slots

插槽名	说明
default	自定义默认内容

类型

组件导出以下类型定义

import type { CButtonProps } from 'carton-ui'