更新记录

1.0.0（2024-11-19） 下载此版本

若有使用帮助请直接联系作者

平台兼容性

使用示例

<template>
  <view style="background: #3f51b5;">
    <view style="display: flex;justify-content: center;padding-top: 30rpx;">
      <sh-draw-card
        ref="drawCardRef"
        @onSelect=""
        :list="list"
        :targetIndex="4"
        :gap="5"
        :row="3"
        :maxOpenCount="1"
        :endTurnAll="true"
        :shuffleAnimate="true"
        :shuffle="true"
        :shuffleTurnAll="false"
        :turnTime="0.3">
      </sh-draw-card>
    </view>
    <view style="margin-top: 60px;">
      <button @click="$refs.drawCardRef.start">开始</button>
      <button @click="$refs.drawCardRef.reset">重置</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { frontImg: 'https://i.111666.best/image/jyiLXmd6mpvgVn0M312RUr.png', backImg: 'https://i.111666.best/image/ykvhaS8Rq9Y9XnkD5H7jY7.png'},
        { frontImg: 'https://i.111666.best/image/hXf4hYPLKLtWTRrpw1NkeA.png', backImg: 'https://i.111666.best/image/PFfH7HAm1tv5w66S3dBcEb.png'},
        { frontImg: 'https://i.111666.best/image/Zwfppo4rey1DDowiSxD70e.png', backImg: 'https://i.111666.best/image/LEhbPFbpUaXd2EQHQvI1U4.png'},
        { frontImg: 'https://i.111666.best/image/UulsBCHyxCoDBIkwZH0tkO.png', backImg: 'https://i.111666.best/image/OgbI4s58eaCncOrrVdHxoG.png'},
        { frontImg: 'https://i.111666.best/image/jzGc0ueAbaEmFOxpJjYQl7.png', backImg: 'https://i.111666.best/image/WSHAohnopfaSNyahiyxncu.png'},
        { frontImg: 'https://i.111666.best/image/5OsWLzXtPN2wZ5I7K25ThI.png', backImg: 'https://i.111666.best/image/kfxD20gtXrzLzfiFW7xmpo.png'},
        { frontImg: 'https://i.111666.best/image/g1MNNjwcCo3JQR5UznRYCB.png', backImg: 'https://i.111666.best/image/S05XyUqzScBMNRef4qnSO1.png'},
        { frontImg: 'https://i.111666.best/image/M5tMH8acLhPhJ4FS7luKzR.png', backImg: 'https://i.111666.best/image/ovzGUTZNbZB3tXdE0RixCg.png'},
        { frontImg: 'https://i.111666.best/image/n4hn7DjlwQ0lxL4aUuN69y.png', backImg: 'https://i.111666.best/image/af2jEuv6vLaaT1KA79uQxD.png'},
      ]
    }
  },
  methods: {
    (e) {
      console.log('list中对应的数据 -->', e.data)
      console.log('点击的索引 -->', e.index)
    }
  }
}
</script>

插件预览地址

属性 Porps

插槽 Slot

<!-- 微信小程序不显示的情况请关注此代码 -->
<sh-draw-card>
  <template #back="{data}">
    <view style="position: absolute; width: 100%; height: 100%; background: red"></view>
  </template>
</sh-draw-card>

事件 Emit

方法 Methods