更新记录

1.0.3(2024-01-20)

  1. 修改组件参数使用说明

1.0.2(2024-01-20)

  1. 修复该组件在H5端,金额滚动错位的BUG

1.0.1.1(2023-06-11)

内置数字滚动

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × ×

使用方法

  1. 点击按钮,将项目插件导入到项目中
  2. 下载插件,将.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(){},
  },
};

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问