12 KiB
12 KiB
lime-button 按钮
按钮用于开始一个即时操作，是用户与应用交互的基础组件。本组件提供了丰富的按钮类型、样式和状态，满足各种场景需求。
插件依赖：
lime-style、lime-shared、lime-loading、lime-icon
文档链接
📚 组件详细文档请访问以下站点：
安装方法
- 在uni-app插件市场中搜索并导入
lime-button - 导入后可能需要重新编译项目
- 在页面中使用
l-button组件（组件）或lime-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。还有一个通栏 block 或 data-block，之所以多加了个data-block是因为它会编译到节点上
<l-button type="primary" size="large" data-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" type="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>
快速预览
导入插件后，可以直接使用以下标签查看演示效果：
<!-- 代码位于 uni_modules/lime-button/components/lime-button -->
<lime-button />
Vue2使用说明
本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。
关键配置代码（在main.js中添加）：
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
API文档
Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| l-id | String | - | 按钮标签id | N |
| variant | String | solid | 按钮形式，基础、线框、文字。可选项：solid/outline/dashed/light/text | N |
| type | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/warning/success | N |
| block | Boolean | false | 是否为块级元素 | N |
| content | String | - | 按钮内容 | N |
| disabled | Boolean | false | 禁用状态 | N |
| ghost | Boolean | false | 幽灵按钮 | N |
| icon | String | - | 图标名称。值为字符串表示图标名称。 | N |
| iconSize | String | - | 图标大小。 | N |
| loading | Boolean | false | 是否显示为加载状态 | N |
| shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N |
| size | String | medium | 组件尺寸。可选项：mini/small/medium/large。TS 类型：SizeEnum |
N |
| radius | String | - | 圆角 | N |
| fontSize | String | - | 文本大小 | N |
| gap | String | - | 文本与图标的间距 | N |
| textColor | String | - | 文本颜色 | N |
| color | String | - | 按钮颜色 | N |
| formType | String | - | 同小程序的 formType。可选项：submit/reset | N |
| open-type | String | - | 微信开放能力。 具体释义： contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （小程序插件中不能使用）；share 触发用户转发，使用前建议先阅读使用指引；getPhoneNumber 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （小程序插件中不能使用）；getUserInfo 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （小程序插件中不能使用）；launchApp 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明；openSetting 打开授权设置页；feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容；chooseAvatar 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；agreePrivacyAuthorization用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过bindagreeprivacyauthorization监听用户同意隐私协议事件。隐私合规开发指南详情可见《小程序隐私协议开发指南》。小程序官方文档。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization |
N |
| hover-class | String | '' | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 hover-class="none" 时，没有点击态效果 |
N |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N |
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N |
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N |
| lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。 具体释义： en 英文；zh_CN 简体中文；zh_TW 繁体中文。小程序官方文档。可选项：en/zh_CN/zh_TW |
N |
| session-from | String | - | 会话来源，open-type="contact"时有效 | N |
| send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N |
| send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N |
| send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N |
| app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N |
| show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N |
| getuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 | N |
| contact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N |
| getphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N |
| error | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N |
| opensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N |
| launchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N |
| chooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N |
| agreeprivacyauthorization | Eventhandle | - | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 | N |
Slots
| 名称 | 说明 |
|---|---|
| default | 包裹的子元素 |
主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式。uvue app无效
| 名称 | 默认值 | 描述 |
|---|---|---|
| --l-button-border-radius | 6rpx | - |
| --l-button-border-width | 1px | - |
| --l-button-disabled-opacity | 0.6 | - |
| --l-button-solid-text-color | white | - |
| --l-button-default-color | $text-color-1 | - |
| --l-button-default-hover-color | rgba(0,0,0,1) | - |
| --l-button-default-light-color | $gray-2 | - |
| --l-button-default-light-hover-color | $gray-3 | - |
| --l-button-default-border-color | $gray-5 | - |
| --l-button-primary-color | $primary-color | - |
| --l-button-primary-hover-color | $primary-color-7 | - |
| --l-button-primary-light-color | $primary-color-1 | - |
| --l-button-primary-light-hover-color | $primary-color-2 | - |
| --l-button-primary-border-color | $primary-color | - |
| --l-button-danger-color | $danger-color | - |
| --l-button-danger-hover-color | $danger-color-7 | - |
| --l-button-danger-light-color | $danger-color-1 | - |
| --l-button-danger-light-hover-color | $danger-color-2 | - |
| --l-button-danger-border-color | $danger-color | - |
| --l-button-warning-color | $warning-color | - |
| --l-button-warning-hover-color | $warning-color-7 | - |
| --l-button-warning-light-color | $warning-color-1 | - |
| --l-button-warning-light-hover-color | $warning-color-2 | - |
| --l-button-warning-border-color | $warning-color | - |
| --l-button-success-color | $success-color | - |
| --l-button-success-hover-color | $success-color-7 | - |
| --l-button-success-light-color | $success-color-1 | - |
| --l-button-success-light-hover-color | $success-color-2 | - |
| --l-button-success-border-color | $success-color | - |
| --l-button-info-color | $blue | - |
| --l-button-info-hover-color | $blue-7 | - |
| --l-button-info-light-color | $blue-1 | - |
| --l-button-info-light-hover-color | $blue-3 | - |
| --l-button-info-border-color | $blue | - |
| --l-button-mini-height | 56rpx | - |
| --l-button-small-height | 64rpx | - |
| --l-button-medium-height | 80rpx | - |
| --l-button-large-height | 96rpx | - |
| --l-button-button-padding | - | - |
| --l-button-icon-size | - | - |
| --l-button-font-size | - | - |
支持与赞赏
如果你觉得本插件解决了你的问题，可以考虑支持作者：
| 支付宝赞助 | 微信赞助 |
|---|---|
 |
 |