更新记录

1.0.0（2022-10-09） 下载此版本

初始版本

平台兼容性

预览

属性说明

方法 所有方法需通过 ref 调用

示例

    <template>
        <geek-card ref="geekCard" :cardList="cardList" :time="300" :lineNum="2" :width="340" :height="415">
            <!-- 自定义插槽内容 data.data是列表中的一项的数据 -->
            <template v-slot="data">
                <view :style="{
                    width: `340rpx`,
                    height: `415rpx`,
                    backgroundImage: `url(${data.data.img})`,
                    backgroundPosition: `center`,
                    backgroundSize: `cover`,
                }">
                </view>
            </template>
        </geek-card>
    </template>

    <script>
        export default {
            data() {
                return {
                    cardList: [
                        {
                            img: require('@/static/card1.png')
                        },
                        {
                            img: require('@/static/card2.png')
                        },
                        {
                            img: require('@/static/card3.png')
                        },
                        {
                            img: require('@/static/card4.png')
                        },
                        {
                            img: require('@/static/card5.png')
                        },
                        {
                            img: require('@/static/card6.png')
                        },
                        {
                            img: require('@/static/card7.png')
                        },
                        {
                            img: require('@/static/card1.png')
                        },
                        {
                            img: require('@/static/card2.png')
                        },
                        {
                            img: require('@/static/card3.png')
                        },
                        {
                            img: require('@/static/card4.png')
                        },
                        {
                            img: require('@/static/card5.png')
                        },
                        {
                            img: require('@/static/card6.png')
                        },
                        {
                            img: require('@/static/card7.png')
                        },
                    ]
                }
            },
            onReady() {
                // 显示卡牌
                this.$refs.geekCard.show();
            }
        }
    </script>