Button 按钮

基于 Element Plus Button 组件的二次封装，完全继承原有功能，并扩展了防抖、删除确认和业务功能集成。

🎮 在线演示

想要查看按钮组件的交互效果？请访问 在线演示

组件特性

🎯 完全继承

继承 Element Plus Button 的所有属性和方法

⚡ 防抖功能

内置防抖机制，防止重复点击

🛡️ 删除确认

可配置的二次确认对话框

🔧 功能扩展

集成各种业务功能Hook

基础用法

支持 Element Plus Button 的所有功能，无需额外配置。

查看代码

<template>
  <div>
    <!-- 基础按钮 -->
    <ImButton>默认按钮</ImButton>
    <ImButton type="primary">主要按钮</ImButton>
    <ImButton type="success">成功按钮</ImButton>
    <ImButton type="danger">危险按钮</ImButton>
    
    <!-- 不同尺寸 -->
    <ImButton size="large">大型按钮</ImButton>
    <ImButton>默认按钮</ImButton>
    <ImButton size="small">小型按钮</ImButton>
    
    <!-- 不同状态 -->
    <ImButton :icon="Edit">带图标</ImButton>
    <ImButton round>圆角按钮</ImButton>
    <ImButton plain>朴素按钮</ImButton>
    <ImButton disabled>禁用按钮</ImButton>
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

增强按钮

防重按钮

基础功能增强，包括防抖、确认等通用功能。使用防抖机制防止重复点击，适用于表单提交等场景。

查看代码

<template>
  <div class="flex gap-3">
    <!-- 防抖按钮 -->
    <ImButton 
      type="primary" 
      :loading="submitLoading" 
      @click="debouncedSubmit"
    >
      提交表单 (1秒)
    </ImButton>
    
    <ImButton 
      type="success" 
      :loading="saveLoading" 
      @click="debouncedSave"
    >
      保存数据 (2秒)
    </ImButton>
  </div>
  
  <div class="text-sm text-gray-500 mt-3">
    <p>点击次数：{{ clickCount }}</p>
    <p>最后点击：{{ lastClickTime }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { ImMessage } from 'imtes-ui'

const clickCount = ref(0)
const lastClickTime = ref('')
const submitLoading = ref(false)
const saveLoading = ref(false)

// 使用VueUse的防抖功能
const debouncedSubmit = useDebounceFn(async () => {
  if (submitLoading.value) return

  submitLoading.value = true
  try {
    clickCount.value++
    lastClickTime.value = new Date().toLocaleTimeString()
    await new Promise(resolve => setTimeout(resolve, 800))
    ImMessage.success('表单提交成功！')
  } finally {
    setTimeout(() => {
      submitLoading.value = false
    }, 1000)
  }
}, 1000)

const debouncedSave = useDebounceFn(async () => {
  if (saveLoading.value) return

  saveLoading.value = true
  try {
    clickCount.value++
    lastClickTime.value = new Date().toLocaleTimeString()
    await new Promise(resolve => setTimeout(resolve, 1500))
    ImMessage.success('数据保存成功！')
  } finally {
    setTimeout(() => {
      saveLoading.value = false
    }, 2000)
  }
}, 2000)
</script>

确认按钮

通过 confirm 属性开启删除确认功能，点击时会弹出确认对话框。

查看代码

<template>
  <div class="flex gap-3">
    <!-- 基础确认 -->
    <ImButton 
      type="danger" 
      confirm 
      confirm-message="确定要删除这条记录吗？删除后无法恢复！"
      @click="handleDelete"
    >
      删除记录
    </ImButton>
    
    <!-- 自定义确认内容 -->
    <ImButton 
      type="warning" 
      confirm
      confirm-title="清空确认"
      confirm-message="确定要清空所有数据吗？"
      confirm-type="warning"
      @click="handleClear"
    >
      清空数据
    </ImButton>
  </div>
</template>

<script setup>
import { ImMessage } from 'imtes-ui'

const handleDelete = () => {
  console.log(`${new Date().toLocaleTimeString()} - 删除了一条记录`)
  ImMessage.success('记录删除成功！')
}

const handleClear = () => {
  console.log(`${new Date().toLocaleTimeString()} - 清空了所有数据`)
  ImMessage.success('数据清空成功！')
}
</script>

图标按钮

支持各种图标按钮的展示和交互。

查看代码

<template>
  <div class="space-y-3">
    <!-- 带图标的文字按钮 -->
    <div class="flex gap-2">
      <ImButton 
        type="primary" 
        style="background-color: #8b5cf6; border-color: #8b5cf6" 
        @click="handleIconClick('github')"
      >
        ⚡ GitHub
      </ImButton>
      <ImButton 
        type="success" 
        style="background-color: #06b6d4; border-color: #06b6d4" 
        @click="handleIconClick('twitter')"
      >
        🐦 Twitter
      </ImButton>
    </div>
    
    <!-- 圆形图标按钮 -->
    <div class="flex gap-2">
      <ImButton 
        circle 
        style="background-color: #6366f1; border-color: #6366f1; color: white" 
        @click="handleIconClick('share')"
      >
        📤
      </ImButton>
      <ImButton 
        circle 
        style="background-color: #ef4444; border-color: #ef4444; color: white" 
        @click="handleIconClick('delete')"
      >
        🗑️
      </ImButton>
      <ImButton 
        circle 
        style="background-color: #10b981; border-color: #10b981; color: white" 
        @click="handleIconClick('check')"
      >
        ✅
      </ImButton>
    </div>
  </div>
</template>

<script setup>
import { ImMessage } from 'imtes-ui'

const handleIconClick = (type) => {
  ImMessage.info(`点击了 ${type} 按钮`)
}
</script>

功能按钮

业务功能按钮，基于独立Hook实现，默认使用防抖扩展。

下载功能

查看代码

<template>
  <div>
    <ImButton 
      type="info" 
      :loading="downloadState.loading" 
      @click="handleDownload"
    >
      文件下载
    </ImButton>
    
    <div v-if="downloadState.progress > 0" class="mt-3">
      <div class="text-sm text-gray-500 mb-1">下载进度: {{ downloadState.progress }}%</div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div 
          class="bg-blue-600 h-2 rounded-full transition-all duration-300" 
          :style="{ width: downloadState.progress + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDownload } from 'imtes-ui'

const { downloadState, download } = useDownload()

const handleDownload = () => {
  download('https://example.com/file.pdf', 'example.pdf')
}
</script>

上传功能

查看代码

<template>
  <div>
    <ImButton 
      type="primary" 
      :loading="uploadState.loading" 
      @click="handleUpload"
    >
      上传文件
    </ImButton>
    
    <div v-if="uploadState.progress > 0" class="mt-3">
      <div class="text-sm text-gray-500 mb-1">上传进度: {{ uploadState.progress }}%</div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div 
          class="bg-green-600 h-2 rounded-full transition-all duration-300" 
          :style="{ width: uploadState.progress + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUpload } from 'imtes-ui'

const { uploadState, upload } = useUpload()

const handleUpload = () => {
  // 创建文件输入框
  const input = document.createElement('input')
  input.type = 'file'
  input.onchange = (e) => {
    const file = e.target.files[0]
    if (file) {
      upload(file, '/api/upload')
    }
  }
  input.click()
}
</script>

导出功能

查看代码

<template>
  <div>
    <ImButton 
      type="success" 
      :loading="exportState.loading" 
      @click="handleExport"
    >
      导出数据
    </ImButton>
    
    <div v-if="exportState.progress > 0" class="mt-3">
      <div class="text-sm text-gray-500 mb-1">导出进度: {{ exportState.progress }}%</div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div 
          class="bg-orange-600 h-2 rounded-full transition-all duration-300" 
          :style="{ width: exportState.progress + '%' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useExport } from 'imtes-ui'

const { exportState, exportData } = useExport()

const handleExport = () => {
  const data = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' },
    { name: '王五', age: 28, city: '广州' }
  ]
  exportData(data, 'users.xlsx')
}
</script>

预览功能

查看代码

<template>
  <div>
    <ImButton 
      type="primary" 
      :loading="previewState.loading" 
      @click="handlePreview"
    >
      文件预览
    </ImButton>
    
    <div v-if="previewState.loading" class="mt-3 text-sm text-gray-500">
      正在加载预览...
    </div>
  </div>
</template>

<script setup>
import { usePreview } from 'imtes-ui'

const { previewState, preview } = usePreview()

const handlePreview = () => {
  preview('https://example.com/document.pdf')
}
</script>

打印功能

查看代码

<template>
  <div>
    <ImButton 
      type="info" 
      :loading="printLoading" 
      @click="handlePrint"
    >
      打印页面
    </ImButton>
  </div>
</template>

<script setup>
import { usePrint } from 'imtes-ui'

const { printLoading, print } = usePrint()

const handlePrint = () => {
  print()
}
</script>

测试接口功能

查看代码

<template>
  <div>
    <ImButton 
      type="warning" 
      :loading="testState.loading" 
      @click="handleTestApi"
    >
      测试API
    </ImButton>
    
    <div v-if="testState.loading" class="mt-3">
      <div class="text-sm text-gray-500">正在测试API...</div>
    </div>
  </div>
</template>

<script setup>
import { useTestApi } from 'imtes-ui'

const { testState, testApi } = useTestApi()

const handleTestApi = () => {
  testApi('/api/test')
}
</script>

API

Button Props

属性	说明	类型	可选值	默认值
confirm	是否开启确认功能	boolean	—	false
confirm-title	确认对话框标题	string	—	'确认'
confirm-message	确认对话框内容	string	—	'确定要执行此操作吗？'
confirm-type	确认对话框类型	string	info/success/warning/error	warning

Button Events

事件名	说明	回调参数
click	点击事件	(event: Event)

Hooks

useDownload

下载功能Hook

useUpload

上传功能Hook

useExport

导出功能Hook

usePreview

预览功能Hook

usePrint

打印功能Hook

useTestApi

API测试功能Hook