更新记录
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>