更新记录

1.0.0(2023-01-07)

1.0.0


平台兼容性

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

参数

属性名 类型 默认值 必填 说明
gridArr Array [] 礼物信息 数组的键必须是id,logo,text

事件

属性名 事件说明
@confirm 点击开始时,必须提交中奖id和抽奖次数,必须在组件标签添加ref ="callStart",在点击事件添加this.$refs.callStart.start(this.isHitId,this.number),即可用

基本用法

在页面中使用组件

            <template>
                <view style="height:100%;display: flex;align-items: center;">
                    <image class="w100 h100" style="position: absolute; z-index: 1;" src="https://www.lidakao.cn/static/web/image/resources1.png" mode=""></image>
                    <view style="z-index: 2;">
                        <li-nine-palace-lucky-draw class="w100 h100" style="display: flex;justify-content: center;"
                        :gridArr="grid_arr"
                        @confirm = "start()"
                        ref ="callStart"></li-nine-palace-lucky-draw>
                    </view>
                </view>
            </template>

            <script>
                export default {
                    data() {
                        return {
                            grid_arr:[
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'章鱼哥',
                                    id:1,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'中奖了',
                                    id:2,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'咸鱼哥',
                                    id:3,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'谢谢惠顾',
                                    id:4,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'火柴人',
                                    id:5,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'奥特曼',
                                    id:21,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'咸蛋超人',
                                    id:7,
                                },
                                {
                                    logo:'https://www.lidakao.cn/static/web/image/zhengjing1.png',
                                    text:'100块',
                                    id:8,
                                }
                            ],
                            isHitId:21,
                            number:1,//次数
                        }
                    },
                    onLoad() {

                    },
                    methods: {
                        start(val){
                            this.$refs.callStart.start(this.isHitId,this.number);
                        }
                    }
                }
            </script>

            <style lang="scss" scoped>
                .w100{
                    width: 100%;
                }
                .h100{
                    height: 100%;
                }
            </style>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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