更新记录

0.1.4（2025-08-31） 下载此版本

• chore: 更新文档

0.1.3（2025-05-28） 下载此版本

• fix: uniappx web 镂空时颜色不生效的问题

0.1.1（2025-05-26） 下载此版本

• fix: uniappx web 圆角时左右描边不显示的问题

平台兼容性

uni-app(4.73)

uni-app x(4.76)

其他

lime-button 按钮组件

一个功能丰富的按钮组件，用于开始一个即时操作。支持多种类型、样式、状态和尺寸，可用于表单提交、页面跳转、信息确认等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的交互设计需求。

插件依赖：lime-style、lime-shared、lime-loading、lime-icon

文档链接

📚 组件详细文档请访问以下站点：

• 按钮组件文档 - 站点1
• 按钮组件文档 - 站点2
• 按钮组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-button
2. 导入后可能需要重新编译项目
3. 在页面中使用l-button组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

按钮类型

按钮支持 default、primary、success、warning、danger 五种类型，默认为 default。

<l-button type="primary">品牌色</l-button>
<l-button type="success">成功色</l-button>
<l-button type="warning">警告色</l-button>
<l-button type="danger">危险色</l-button>
<l-button>通用色</l-button>

按钮变体

按钮支持 solid、outline、dashed、light、text 五种变体，默认为 solid。

<l-button type="primary">默认按钮</l-button>
<l-button type="primary" variant="outline">镂空按钮</l-button> 
<l-button type="primary" variant="light">高亮按钮</l-button>
<l-button type="primary" variant="text">文本按钮</l-button>

按钮尺寸

按钮支持 large、medium、small、mini 四种尺寸，默认为 medium。

<l-button type="primary" size="large" block>通栏按钮</l-button>
<l-button type="primary" size="large">大按钮</l-button>
<l-button type="warning" size="medium">中按钮</l-button>
<l-button type="primary" size="small">小按钮</l-button>
<l-button type="success" size="mini">迷你按钮</l-button>

按钮形状

按钮支持 circle、round、square、rectangle 四种形状，默认为 rectangle。

<l-button type="primary" shape="circle">圆形</l-button>
<l-button type="primary" shape="round">圆角矩形</l-button>
<l-button type="primary" shape="square">正方形</l-button>
<l-button type="primary">长方形</l-button>

自定义颜色

通过 color 属性来设置按钮的颜色。

<l-button color="#7232dd">单色按钮</l-button>
<l-button color="#7232dd" variant="outline">镂空按钮</l-button>
<l-button color="linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36))">渐变按钮</l-button>

加载状态

通过 loading 属性来设置按钮的加载状态，加载状态下按钮不可点击。

<l-button :loading="true" type="primary">加载中</l-button> 

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

<l-button :disabled="true" type="primary">禁用按钮</l-button>

图标按钮

通过 icon 属性设置按钮图标，可以搭配文字一起使用。

<l-button icon="home" type="primary">首页</l-button>
<l-button icon="plus" shape="circle" type="primary"></l-button>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-button/components/lime-button -->
<lime-button />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

type 可选值

variant 可选值

size 可选值

shape 可选值

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助