Button 按钮

2024-02-08 00:20| 来源: 网络整理| 查看: 265

# Button 按钮

✈

组件名：uv-button

点击下载&安装 (opens new window)

该组件内部实现以uni-appbutton组件为基础，进行二次封装，主要区别在于：

按钮type值有更多的主题颜色按钮size值有更多的尺寸可选 # 平台兼容性 App（vue） App（nvue） H5 小程序 VUE2 VUE3 √ √ √ √ √ √

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

本组件在 button 组件基础上扩展更多实用功能，部分属性与官方组件属性完全一致，由于 button 组件比较特殊，它有一些其他小程序平台的特定能力，更详细说明请参uni-app方文档：uni-app之button组件 (opens new window)。由于微信小程序的限制，在微信小程序中设置了 form-type 的 uv-button 无法触发 form 组件的 @submit 事件(H5和APP正常)，详见微信小程序文档Bug & Tip部分 (opens new window)。如果需要给 uv-button 设置宽度，建议给按钮外面套一个view元素，控制view的宽度，或者使用 customStyle 属性进行设置。 # 基本使用

文字内容通过text传入

# 设置按钮的多种形态 type值可选的有default(默认)、primary、success、info、warning、error 通过plain值设置是否镂空通过hairline值设置是否细边通过disabled值设置是否禁用通过loading值设置是否开启加载图标，loadingText设置加载中文字通过icon值设置是否显示图标通过shape值设置按钮形状，circle为圆角通过color值设置按钮渐变颜色通过size值设置按钮的大小 export default { data() { return { disabled: true }; } }; # 定义需要用到的外部样式针对非微信小程序平台，组件的根元素就是uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果。

所以：我们提供了一个custom-style参数，推荐用户可以用对象形式传递样式给组件内部，注意驼峰命名。

export default { data() { return {} }, computed: { customStyle() { return { height: '80rpx', background: '#3c9cff', color: '#fff', borderRadius: '40rpx' ,//圆角 // nvue中必须是下方的写法 'border-top-right-radius': '40rpx', 'border-bottom-left-radius': '40rpx', 'border-bottom-right-radius': '40rpx' } } } } # 各家小程序开放能力的对接

uv-ui已对接uni-app档关于uni-app方button组件 (opens new window)的所有开放能力(截止2023-06-29)uni-app文档说明使用即可，如果有发现遗漏的地方，请加群反馈。

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API # Button Props 属性名说明类型默认值可选值 hairline 是否显示按钮的细边框 Boolean true true | false type 按钮的样式类型 String info info | primary | error | warning | success size 按钮的大小 String normal normal | large | mini shape 按钮外观形状，见上方说明 String square square | circle plain 按钮是否镂空，背景色透明 Boolean false true | false disabled 是否禁用 Boolean false true | false loading 按钮名称前是否带 loading 图标 Boolean false true | false loadingText 加载中提示文字 String - - loadingMode 加载状态图标类型 String spinner - loadingSize 加载图标大小 String | Number 15 - openType 开放能力，具体请看uniapp稳定关于button组件部分说明uni-app方button组件 (opens new window) String - - formType 用于组件，点击分别会触发组件的 submit/reset 事件 String - - appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效（注：只微信小程序、QQ小程序有效） String - - hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true） Boolean true true | false lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 String en - sessionFrom 会话来源，openType="contact"时有效 String - - sendMessageTitle 会话内消息卡片标题，openType="contact"时有效 String - - sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 String - - sendMessageImg 会话内消息卡片图片，openType="contact"时有效 String - - showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 String - - dataName 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 String - - throttleTime 节流，一定时间内只能触发一次，单位毫秒 String | Number 0 - hoverStartTime 按住后多久出现点击态，单位毫秒 String | Number 0 - hoverStayTime 手指松开后点击态保留时间，单位毫秒 String | Number 200 - text 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） String | Number - - icon 按钮图标 String - - iconSize 1.0.9 按钮图大小 String | Number - - iconColor 按钮颜色 String 在plain=true镂空状态下，颜色与边框保持一致，否则为白色（主题为info时为黑色#000000） - color 按钮颜色，支持传入linear-gradient渐变色 String - - customTextStyle 自定义按钮文字的样式，避免设置customStyle设置覆盖不了样式的情况 Object | String - - customStyle 定义需要用到的外部样式,详细见上方文档 Object | String - - # Button Events

说明：目前经测试(Hbuilder X 2.6.8)，在H5，APP，可以直接对组件监听tap事件，等同组件内部发出的click事件效果，某些HX版本上，微信小程序对组件使用tap事件可能无效，故建议对按钮组件的点击事件监听统一使用组件内部发出的click事件。

属性名说明类型默认值平台差异说明 @click 按钮点击，请勿使用@tap点击事件，微信小程序无效，返回值为点击事件及参数 Handler - - @getphonenumber 获取用户手机号回调，open-type="getPhoneNumber"生效 Handler - 微信、支付宝、百度、抖音、快手、京东小程序 @getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo，open-type="getUserInfo"生效 Handler - 微信、QQ、百度、快手、京东小程序 @error 当使用开放能力时，发生错误的回调，open-type="launchApp"生效 Handler - 微信、QQ、快手、京东小程序 @opensetting 从小程序打开 App 成功的回调，open-type="launchApp"生效 Handler - 微信、QQ、百度、快手、京东小程序 @launchapp 打开 APP 成功的回调，open-type="launchApp"生效 Handler - 微信、QQ、快手、京东小程序 @contact 客服消息回调，open-type="contact"生效 Handler - 微信、QQ、百度、快手小程序 @chooseavatar 获取用户头像回调，open-type="chooseAvatar"生效 Handler - 微信小程序 @agreeprivacyauthorization 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效 Handler - 微信小程序2.33.0 @addgroupapp 添加群应用的回调，open-type="addGroupApp"生效 Handler - QQ小程序 @chooseaddress 调起用户编辑并选择收货地址的回调，open-type="chooseAddress"生效 Handler - 百度小程序 @chooseinvoicetitle 用户选择发票抬头的回调，open-type="chooseInvoiceTitle"生效 Handler - 百度小程序 @subscribe 订阅消息授权回调，open-type="subscribe"生效 Handler - 百度小程序 @login 登录回调，open-type="login"生效 Handler - 百度小程序 @im 监听跳转IM的成功回调，open-type="im"生效 Handler - 抖音小程序2.68.0版本+

关于open-type属性的设置及回调详情，请参考uniapp官方提供的button (opens new window)

# Button Slots 名称说明 default 默认插槽，按钮文本，建议统一使用text参数，保证样式的统一性 suffix 后置插槽，方便在按钮文字后面增加图标等

← Icon 图标 Text 文本 →

感谢支持我们

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章