主题
LimeButton 按钮
- 按钮用于开始一个即时操作。目前还是初版，可能存在BUG
- 插件依赖
lime-style,lime-shared,lime-loading,lime-icon,不喜勿下。
安装
代码演示
按钮主题
按钮支持 default、primary、success、warning、danger 五种主题，默认为 default。
html
<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。
html
<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是因为它会编译到节点上
html
<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。
html
<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 属性来设置徽标的颜色。
html
<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 属性来禁用按钮，加载状态下按钮不可点击。
html
<l-button :loading="true" type="primary">加载中</l-button>禁用状态
通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。
html
<l-button :disabled="true" type="primary">默认按钮</l-button>查看示例
- 导入后直接使用这个标签查看演示效果
html
<!-- // 代码位于 uni_modules/lime-button/compoents/lime-button -->
<lime-button />插件标签
- 默认 l-button 为 component
- 默认 lime-button 为 demo
关于vue2的使用方式
- 插件使用了
composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置 - 关键代码是: 在main.js中 在vue2部分加上这一段即可
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 | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：SizeEnum | N |
| radius | String | - | 圆角 | N |
| fontSize | 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 | - | - |
打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
