-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
45 changed files
with
3,257 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
# DollMachine 抓娃娃 | ||
|
||
### 介绍 | ||
|
||
模拟娃娃机抽奖,可配置图片、开始结束回调等。 | ||
|
||
|
||
### 基础用法 | ||
|
||
```html | ||
<template> | ||
<nut-doll-machine | ||
ref="lottoRollDom" | ||
:prize-list="prizeList" | ||
:prize-index="prizeIndex" | ||
@start-turns="startTurns" | ||
@end-turns="endTurns" | ||
> | ||
</nut-doll-machine> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { ref, reactive } from "vue"; | ||
export default { | ||
props: {}, | ||
setup() { | ||
const lottoRollDom: any = ref(null); | ||
const prizeList = reactive([ | ||
{ | ||
imagePath: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/147182/12/2440/6194/5f06cde6Ead240fe8/31082e30a182a5ce.png", | ||
text: "大鸡腿", | ||
}, | ||
{ | ||
imagePath: | ||
"https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png", | ||
text: "JOY", | ||
}, | ||
{ | ||
imagePath: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/128607/26/6643/6790/5f06cd27E9b5e15f7/7509bc7ce2da66b8.png", | ||
text: "VIP", | ||
}, | ||
{ | ||
imagePath: | ||
"https://img12.360buyimg.com/imagetools/jfs/t1/221361/4/7410/16458/61c9261eE45802396/27b64caa9e7c9bac.png", | ||
text: "JOY", | ||
}, | ||
]); | ||
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值) | ||
const prizeIndex = ref(3); | ||
const startTurns = () => { | ||
console.log("开始抽奖"); | ||
}; | ||
const endTurns = () => { | ||
console.log("抽奖结束"); | ||
}; | ||
return { | ||
lottoRollDom, | ||
prizeList, | ||
prizeIndex, | ||
startTurns, | ||
endTurns, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
``` | ||
|
||
### Props | ||
|
||
| 字段 | 说明 | 类型 | 默认值 | | ||
| ------------ | ------------------------ | ------ | --------------------- | | ||
| prize-list | 奖品列表 | Array | 目前需要至少 4 个奖品 | | ||
| default-claw | 初始化爪子的图片链接 | string | - | | ||
| active-claw | 爪子抓到奖品的图片链接 | string | - | | ||
| prize-index | 中奖奖品在列表的索引位置 | Number | -1(-1 未中奖) | | ||
|
||
### Events | ||
|
||
| 字段 | 说明 | 回调参数 | | ||
| ----------- | -------------------------------- | ---------------- | | ||
| init | 游戏初始化 | dom.value.init() | | ||
| start-turns | 爪子开始下伸,赋值到 prize-index | - | | ||
| end-turns | 爪子已经抓到/未抓到奖品触发 | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
# GiftBox 神秘大礼盒 | ||
|
||
### 介绍 | ||
|
||
用于礼盒抽奖,可配置图片、开始结束回调等。 | ||
|
||
|
||
### 基础用法 | ||
|
||
```html | ||
<template> | ||
<nut-giftbox | ||
ref="refChild" | ||
@start-turns="startTurns" | ||
@end-turns="endTurns" | ||
> | ||
</nut-giftbox> | ||
<div @click="initBox">再来一次</div> | ||
</template> | ||
<script lang="ts"> | ||
import { ref } from "vue"; | ||
export default { | ||
setup() { | ||
const refChild = ref(); | ||
const initBox = () => { | ||
refChild.value.init(); | ||
}; | ||
const startTurns = () => { | ||
console.log("开始"); | ||
}; | ||
const endTurns = () => { | ||
console.log("结束"); | ||
}; | ||
return { | ||
refChild, | ||
initBox, | ||
startTurns, | ||
endTurns, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
``` | ||
|
||
### Events | ||
|
||
| 字段 | 说明 | 回调参数 | | ||
| ----------- | ---------------------- | -------- | | ||
| init | 礼盒初始化 | - | | ||
| start-turns | 礼盒打开时候的回调函数 | - | | ||
| end-turns | 礼盒打开后的回调函数 | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# Hiteggs 组件 | ||
|
||
### 介绍 | ||
|
||
用于砸金蛋抽奖场景,可以自定义金蛋图片等 | ||
|
||
|
||
### 基础用法 | ||
|
||
```html | ||
<template> | ||
<nut-hiteggs></nut-hiteggs> | ||
</template> | ||
``` | ||
|
||
### 自定义传入个数 | ||
|
||
```html | ||
<template> | ||
<nut-hiteggs :num="9"></nut-hiteggs> | ||
</template> | ||
``` | ||
|
||
### 砸击事件 | ||
|
||
```html | ||
<template> | ||
<nut-hiteggs :num="9" @click="hit"></nut-hiteggs> | ||
</template> | ||
<script> | ||
export default { | ||
setup() { | ||
const hit = () => { | ||
console.log("中奖啦"); | ||
}; | ||
return { | ||
hit, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
``` | ||
|
||
### Props | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------- | ---------------- | ------ | ------------------------------------------------------------------------------------------------- | | ||
| num | 金蛋个数 | number | 9 | | ||
| intact-img | 完整金蛋图片地址 | String | - | | ||
| hammer | 锤子图片 | String | - | | ||
| width | 金蛋图片宽度 | String | 80px | | ||
| height | 金蛋图片高度 | String | 80px | | ||
|
||
### Events | ||
|
||
| 事件名 | 说明 | 回调参数 | | ||
| ------ | -------------- | -------- | | ||
| click | 砸击金蛋后触发 | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
# Marquee 跑马灯 | ||
|
||
### 介绍 | ||
|
||
用于跑马灯抽奖场景,可配置奖品、图片等。 | ||
|
||
### 基础用法 | ||
|
||
```html | ||
<template> | ||
<nut-marquee | ||
:prize-list="prizeList" | ||
:prize-index="prizeIndex" | ||
:speed="100" | ||
:circle="40" | ||
:style-opt="styleOpt" | ||
@start-turns="startTurns" | ||
@end-turns="endTurns" | ||
> | ||
</nut-marquee> | ||
</template> | ||
<script> | ||
import { ref, reactive } from "vue"; | ||
export default { | ||
setup() { | ||
// 转盘上要展示的奖品数据 | ||
const prizeList = ref([ | ||
{ | ||
id: "xiaomi", | ||
prizeName: "小米手机", | ||
prizeImg: | ||
"https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png", | ||
}, | ||
{ | ||
id: "blue", | ||
prizeColor: "rgb(251, 219, 216)", | ||
prizeName: "蓝牙耳机", | ||
prizeImg: | ||
"https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg", | ||
}, | ||
{ | ||
id: "thanks", | ||
prizeName: "谢谢参与", | ||
prizeImg: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", | ||
}, | ||
{ | ||
id: "apple", | ||
prizeName: "apple watch", | ||
prizeImg: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png", | ||
}, | ||
{ | ||
id: "fruit", | ||
prizeColor: "rgba(246, 142, 46, 0.5)", | ||
prizeName: "迪士尼苹果", | ||
prizeImg: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png", | ||
}, | ||
{ | ||
id: "thanks", | ||
prizeName: "谢谢参与", | ||
prizeImg: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", | ||
}, | ||
{ | ||
id: "fish", | ||
prizeName: "海鲜套餐", | ||
prizeImg: | ||
"https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png", | ||
}, | ||
{ | ||
id: "thanks", | ||
prizeName: "谢谢参与", | ||
prizeImg: | ||
"https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png", | ||
}, | ||
]); | ||
// 转盘样式的选项 | ||
const styleOpt = reactive({ | ||
itemStyle: {}, | ||
startStyle: {}, | ||
bgStyle: { | ||
background: "rgb(255, 231, 149)", | ||
}, | ||
}); | ||
// 中奖的奖品的index(此数据可根据后台返回的值重新赋值) | ||
const prizeIndex = ref(0); | ||
const startTurns = () => { | ||
const index = Math.floor(Math.random() * prizeList.value.length); | ||
prizeIndex.value = index; | ||
}; | ||
const endTurns = () => { | ||
console.log("中奖了"); | ||
}; | ||
return { | ||
prizeList, | ||
styleOpt, | ||
prizeIndex, | ||
startTurns, | ||
endTurns, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
``` | ||
|
||
### Props | ||
|
||
| 字段 | 说明 | 类型 | 默认值 | | ||
| ----------- | --------------------------------------------------------------------------------------- | ------ | ------------------------------------------- | | ||
| prize-list | 奖品列表 | Array | [] | | ||
| prize-index | 中奖奖品在列表的索引位置 | Number | -1 | | ||
| speed | 转动速度 | Number | 150 | | ||
| circle | 转动圈数 | Number | 30 | | ||
| style-opt | 跑马灯中的样式:bgStyle-整个容器样式,itemStyle-每个奖品样式,startStyle-中间按钮样式 | Object | `{bgStyle: {},itemStyle: {},startStyle:{}}` | | ||
|
||
### Events | ||
|
||
| 字段 | 说明 | 回调参数 | | ||
| ----------- | -------------------------------------------------------------- | -------- | | ||
| start-turns | 开始跑动的回调函数,此时将接口中的中奖索引,赋值到 prize-index | - | | ||
| end-turns | 停止跑动后的回调函数 | - | |
Oops, something went wrong.