更新记录
1.0.3(2024-01-20)
下载此版本
- 修改组件参数使用说明
1.0.2(2024-01-20)
下载此版本
- 修复该组件在H5端,金额滚动错位的BUG
1.0.1.1(2023-06-11)
下载此版本
内置数字滚动
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
√ |
× |
√ |
× |
× |
× |
× |
使用方法
- 点击按钮,将项目插件导入到项目中
- 下载插件,将.vue 文件复制到自己的项目目录里
传参说明
属性名 |
类型 |
默认值 |
说明 |
money |
String/Number |
88.88 |
红包金额 |
options |
Object |
- |
参数配置对象,详情配置见下方 options 属性说明 |
options 属性详情
属性名 |
类型 |
默认值 |
说明 |
userImg |
String |
- |
用户头像 |
userName |
String |
- |
用户名称 |
coverTitle |
String |
恭喜发财 |
红包封面标题 |
openTitle |
String |
恭喜您获得 |
打开红包后的标题文本 |
openTips |
String |
已存入钱包,可直接体现 |
打开红包后的提示文本 |
btnText |
String |
查看我的钱包 |
打开红包后的按钮文本 |
事件方法
事件称名 |
说明 |
返回参数 |
@onConfirm |
点击确认红包按钮触发 |
- |
@onCover |
开启红包时触发 |
- |
@onClose |
关闭红包时触发 |
- |
示例代码
html
<gcm-red-bag :money="12.98" :options="redBagConfig" @onConfirm="onConfirm" @onClose="onClose"
@onCover="onCover"></gcm-red-bag>
js
export default {
data() {
return {
redBagConfig: {
btnText: "确认收款",
},
};
},
methods: {
// 点击确认红包按钮事件
onConfirm() {},
// 关闭红包时触发
onClose(){},
// 开启红包时触发
onCover(){},
},
};