flop-card

用于抽奖翻卡，使用 vue3 编写

安装

npm install vue3-flop-card

全局引入

import Vue3FlopCard from "vue3-flop-card";
import "vue3-flop-card/lib/style.css";

app.use(Vue3FlopCard);

基础使用

<vue3-flop-card v-model="cardArr" :cardData="data"></vue3-flop-card>

props

1. cardWidth:卡片宽度    (String '100px')
2. cardHeight:卡片高度    (String  '100px')
3. frontColor:答案面背景颜色  (String   '#000')
4. backColor:背面背景颜色  (String  '#fff')
5. canChoiceCount:可抽卡次数  (Number  3)
6. textSize:抽卡文字大小  (String  '16px')
7. modelValue:抽中的卡片数组双向绑定 (Array)
8. cardData:卡片内容数组 (必须有title属性用于显示抽奖结果)
[
    {
        id:0,
        title:'一等奖'
    }
]

Slot

<slot name="result"></slot> 翻牌结果进行自定义
<slot name="front"></slot> 翻牌正面进行自定义
<slot name="tip"></slot> 提示剩几次抽奖机会自定义