更新记录

1.1.0（2025-12-25） 下载此版本

优化

平台兼容性

uni-app(4.81)

uni-app x(4.81)

blu-button 按钮组件

一个功能完善、易于使用的液态玻璃风格按钮组件，支持多种类型、尺寸和状态。

特性

• 🌫️ 液态玻璃风格设计，现代化毛玻璃效果
• 📏 支持多种尺寸：small、medium、large
• 🔒 支持禁用状态
• ⏳ 支持加载状态
• 🎯 支持圆角和圆形样式
• 🌈 支持朴素按钮样式
• 🎭 支持自定义图标
• 🎨 支持自定义样式
• 📱 跨平台支持：H5、App、小程序等

安装

该组件已符合 easycom 规范，无需手动引入，直接在页面中使用即可。

基础用法

默认按钮

<blu-button>默认按钮</blu-button>

不同类型

<blu-button type="default">默认按钮</blu-button>
<blu-button type="primary">主要按钮</blu-button>
<blu-button type="success">成功按钮</blu-button>
<blu-button type="warning">警告按钮</blu-button>
<blu-button type="danger">危险按钮</blu-button>
<blu-button type="info">信息按钮</blu-button>

不同尺寸

<blu-button size="small">小号按钮</blu-button>
<blu-button size="medium">中号按钮</blu-button>
<blu-button size="large">大号按钮</blu-button>

禁用状态

<blu-button disabled>禁用按钮</blu-button>

加载状态

<blu-button loading>加载中</blu-button>

圆角按钮

<blu-button round>圆角按钮</blu-button>

圆形按钮

<blu-button circle>+</blu-button>

朴素按钮

<blu-button type="primary" plain>朴素按钮</blu-button>

带图标

<blu-button icon="🔍">搜索</blu-button>

自定义样式

<blu-button :customStyle="{ backgroundColor: '#ff6b6b', color: '#fff' }">自定义样式</blu-button>

Props

Events

Slots

完整示例

<template>
  <view class="container">
    <!-- 基础用法 -->
    <view class="section">
      <text class="title">基础用法</text>
      <blu-button>默认按钮</blu-button>
      <blu-button type="primary">主要按钮</blu-button>
      <blu-button type="success">成功按钮</blu-button>
      <blu-button type="warning">警告按钮</blu-button>
      <blu-button type="danger">危险按钮</blu-button>
      <blu-button type="info">信息按钮</blu-button>
    </view>

    <!-- 不同尺寸 -->
    <view class="section">
      <text class="title">不同尺寸</text>
      <blu-button size="small">小号按钮</blu-button>
      <blu-button size="medium">中号按钮</blu-button>
      <blu-button size="large">大号按钮</blu-button>
    </view>

    <!-- 状态按钮 -->
    <view class="section">
      <text class="title">状态按钮</text>
      <blu-button disabled>禁用按钮</blu-button>
      <blu-button loading>加载中</blu-button>
    </view>

    <!-- 样式变体 -->
    <view class="section">
      <text class="title">样式变体</text>
      <blu-button round>圆角按钮</blu-button>
      <blu-button circle>+</blu-button>
      <blu-button type="primary" plain>朴素按钮</blu-button>
    </view>

    <!-- 带图标 -->
    <view class="section">
      <text class="title">带图标</text>
      <blu-button icon="🔍">搜索</blu-button>
      <blu-button icon="✏️">编辑</blu-button>
      <blu-button icon="🗑️">删除</blu-button>
    </view>

    <!-- 点击事件 -->
    <view class="section">
      <text class="title">点击事件</text>
      <blu-button @click="handleClick">点击我</blu-button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
      uni.showToast({
        title: '按钮被点击了',
        icon: 'success'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

.blu-button {
  margin: 5px;
}
</style>

注意事项

1. 组件使用 easycom 规范，无需手动引入
2. 加载状态下，按钮不可点击
3. 禁用状态下，按钮不可点击
4. 圆形按钮通常只显示图标，不显示文字
5. 自定义样式会覆盖默认样式

更新日志

1.0.0 (2025-01-01)

• 🎉 初始版本发布
• ✨ 支持多种按钮类型
• ✨ 支持多种尺寸
• ✨ 支持禁用和加载状态
• ✨ 支持圆角和圆形样式
• ✨ 支持朴素按钮
• ✨ 支持自定义图标和样式
• 📱 跨平台支持

许可证

MIT

作者

blu-UI

反馈与建议

如有问题或建议，欢迎提 Issue 或 PR。