Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/u404/vue-lucky-card
一个vue 动画特效组件，用于实现翻卡抽奖、塔罗牌抽奖
https://github.com/u404/vue-lucky-card
Last synced: about 2 months ago
JSON representation
一个vue 动画特效组件，用于实现翻卡抽奖、塔罗牌抽奖
- Host: GitHub
- URL: https://github.com/u404/vue-lucky-card
- Owner: u404
- Created: 2020-09-21T08:46:49.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T02:02:25.000Z (over 1 year ago)
- Last Synced: 2024-07-24T03:39:15.033Z (about 2 months ago)
- Language: Vue
- Homepage:
- Size: 255 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-resources - vue-lucky-card - vue 组件，用于实现翻卡抽奖、塔罗牌抽奖等特效。 (vue / 项目)
README
# vue-lucky-card
> 一个vue 组件，用于实现翻卡抽奖、塔罗牌抽奖
### Demo
[Demo Link](https://qwd1lt-8080.csb.app/)
### 使用方法
安装
```
// install
npm install -S vue-lucky-card
```
基本用法
```
Front {{item.data.id}}
Back {{item.data.id}}
// xxx.vue中
import 'vue-lucky-card/dist/style.css'
import VueLuckyCard from 'vue-lucky-card'
export default {
components: [
VueLuckyCard
],
data() {
return [
cardList: [
{
id: 1
},
{
id: 2
},
{
id: 3
}
]
]
}
}
// 自定义卡片容器及正反面的样式
.lucky-card-list {}
.lucky-card {
width: 300px;
height: 400px;
border: 10px solid transparent;
}
.lucky-card-side.front {
background: #649000;
}
.lucky-card-side.front {
background: #000649;
}
```
直接在html中引入：
```
```
### 选项
#### data
必须的，一个卡片对象的数组，例如
```
[
{
id: 1,
name: "汽车"
},
{
id: 2,
name: "手机"
},
{
id: 3,
name: "谢谢参与"
}
]
```
#### times
可选的，用户可翻牌的次数，默认为1次
#### onBeforeSelect
可选的，在用户点击某个卡片时，执行一些逻辑（比如调用接口）。这有助于使抽奖行为是可控的。
```
onBeforeSelect: ({ index, selected, list }) {
// 注意，由于卡片会在动画过程的打乱顺序，所以当前卡片的顺序，会与最初传入的卡片的顺序不同
// index 用户点击的卡片的索引
// selected 用户之前选择的卡片的索引的数组，当times > 1时，可能会有一些用途
// list 当前卡片的数组，这是打乱顺序之后的数组
// 如果函数return undefined，那么将不会做任何处理
// 如果函数renturn 一个数字，那么会将这个数字指向的卡片，与用户点击的卡片交换位置，这对用户是不可见的
// return 1
// 如果函数return 一个Promise，那么会等待Promise resolve之后才翻开卡片，resolve(数字)，会和上一种情况的处理一样，交换卡片的位置
// 适合调用接口获取抽奖结果的情况：
// return axios.post(...).then(res => {
// return list.findIndex(o => o.id === res.id)
// })
}
```
### 方法
一些执行动画的方法，向外部暴露出来，具体可以通过源码查看
### 事件
支持selected 和 complete 两个事件，参数和上面的钩子函数onBeforeSelect的参数保持一致。与钩子不同的是，不会阻止正常逻辑的执行。