Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eightfeet/wc-wheel-lottery
https://github.com/eightfeet/wc-wheel-lottery
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/eightfeet/wc-wheel-lottery
- Owner: eightfeet
- License: mit
- Created: 2023-09-07T05:25:35.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-29T02:33:56.000Z (11 months ago)
- Last Synced: 2024-10-07T04:47:37.589Z (about 1 month ago)
- Language: TypeScript
- Size: 156 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wc-lottery
The `wc-lottery` is a high-performance lottery webcomponent.
## 🎡 Demo
- [https://www.eightfeet.cn/wc-wheel-lottery/](https://www.eightfeet.cn/wc-wheel-lottery/)
## 📦 Installation
```shell
npm i @eightfeet/wc-lottery
```
## Attribute
- **class** string
> wc-lottery 的样式名
> 请确保 wc-lottery 的样式属性 display 为 block, 组件以此来计算内部宽高，此属性默认为 block，但不排除被父级影响或覆盖；
```html
.yourclass {
display: block;
}
...
```
- **prize** string | number;
> wc-lottery 的奖品 id，当外部修改此属性时，组件内部开始启用抽奖动画，值为 undefined 时不开启抽奖动画
```html
...
```
- **activeclass** string;
> wc-lottery 的奖品项目被激活的样式；此属性仅在 type="grid"九宫格抽奖时才起作用，最终奖品将以此样式高亮显示;
```html
.youractiveclass {
display: block;
}
...
```
- **type** "wheel" | "grid";
> 类型：wheel 转盘抽奖，grid 九宫格抽奖 默认为 wheel
```html
...
```
- **round** number | string;
> 旋转圈数, 默认 6 圈
```html
...
```
## Event
- **onplay**
> 抽奖动画开始时调用
```javascript
// 方法1
LotteryElement.addEventListener("play", ({detail}) => {console.log('奖品': detail)});
// 方法2
LotteryElement.onplay = ({detail}) => {console.log('奖品': detail)};
```
- **onended**
> 抽奖动画结束时调用
```javascript
// 方法1
LotteryElement.addEventListener("ended", ({detail}) => {console.log('奖品': detail)});
// 方法2
LotteryElement.onended = ({detail}) => {console.log('奖品': detail)};
```
## Usage
```js
import "@eightfeet/wc-lottery";
```
```html
.lottery {
width: 50vw;
height: 50vw;
}
ul {
list-style: none;
}
li {
background-color: #ccc;
padding-top: 5px;
display: flex;
justify-content: center;
}
.button {
width: 50px;
height: 50px;
background-color: #aaa;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
user-select: none;
}
- 1
- 4
- 3
- 8
- 6
- 2
- 9
- 10
- 5
- 7
document.querySelector(".button").onclick = () => {
document
.querySelector(".lottery")
.setAttribute("prize", `${Math.floor(Math.random() * 10)}`);
};
document.querySelector(".lottery").onplay = (prize) => {
console.log("开始动画", `中奖${prize.detail}`);
};
document.querySelector(".lottery").onended = (prize) => {
console.log("抽奖结束", `中奖${prize.detail}`);
};
```
### 在 React + Typescript 中使用
```typescript
import { LotteryProps } from "@eightfeet/wc-lottery";
import { useState, DOMAttributes } from "react";
type LotteryElement = Partial<
T &
DOMAttributes & {
children: any;
ref: React.MutableRefObject;
}
>;
declare global {
namespace JSX {
interface IntrinsicElements {
["wc-lottery"]: LotteryElement;
}
}
}
```
```javascript
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import '@eightfeet/wc-lottery';
import { LotteryEvents } from "@eightfeet/wc-lottery";
const Lottery: React.FC = () => {
const data = useMemo(() => ["1", "2", "3", "4", "5", "6", "7", "8"], [])
const [prize, setPrize] = useState();
const lotteryRef = useRef();
// 抽奖
const handleLottery = useCallback(
async () => {
const prize = await Promise.resolve('1');
setPrize(prize);
},
[],
);
// 抽奖结束
const handleLotteryEnded = useCallback(
({ detail }: { detail: string }) => {
console.log('抽中', detail);
setPrize(undefined)
},
[],
);
// 事件挂载
useEffect(() => {
if (lotteryRef.current) {
lotteryRef.current.onended = handleLotteryEnded
}
}, [handleLotteryEnded])
return
{
data.map(item =>
}
抽奖
};
```
### 在 Vue + Typescript 中使用
脚手架配置请参考 [Vue 与 Web Components](https://cn.vuejs.org/guide/extras/web-components.html#vue-and-web-components)
**使用方式**
```html
import { ref } from "vue";
import "@eightfeet/wc-lottery";
const prizes = ref<string[]>(["1", "2", "3", "4", "5", "6", "7", "8"]);
const prize = ref<string>();
.lottery {
width: 200px;
width: 200px;
}
.activate {
background-color: rgb(108, 143, 255);
}
.prizebox,
.button {
display: flex;
align-items: center;
justify-content: center;
}
.button {
background-color: orange;
width: 67px;
height: 67px;
}
```