大佬救命

[superggh]

测试无按钮状态下，超过2行，或者数组超过2*n的总数会报错，代码

抽奖

    <grid-prize v-for="(item, index) in items" :key="index" slot="prize">
      <template slot-scope="{ isSelect }">
        <div class="demo-box" :class="isSelect ? 'select' : ''">
          <p>id：{{item.id}}</p>
          <p>text：{{item.text}}</p>
        </div>
      </template>
    </grid-prize>
  </grid-roll>
</div>

<script> import { gridRoll, gridStart, gridPrize } from 'grid-roll' import 'grid-roll/dist/grid-roll.min.css' export default { name: '', props: {}, data () { return { items: [], } }, components: { [gridRoll.name]: gridRoll, [gridStart.name]: gridStart, [gridPrize.name]: gridPrize }, computed: { }, mounted: { }, watch: { }, methods: { async handleStart() { let b = await this.$refs.dial.startRoll(3) console.log(b) if (b) { console.log('恭喜你抽了个奖') } }, handleUnderway(index) { console.log('进行中,index=' + index) }, }, created () { let arr = [] for (let i = 0; i < 18; i++) { arr.push({ id: i, text: i }) } this.items = arr console.log(this.items) }, mounted () { }, } </script> <style lang="scss" scoped> $zoom: .1; $size: 200px * $zoom; * { margin: 0; padding: 0; } .select { opacity: .4; } .demo-dialSudoku { margin-top:150px; h3 { font-size: 32px; text-align: center; font-weight: 600; } .box { margin-top: 30px; left: 50%; transform: translateX(-50%); } .demo-box { width: 100px; height: 100px; font-size: 12px; text-align: center; font-weight: 600; border: 5px solid #ddd; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: #fff; p { flex: 1 1 100px; } } } .btn { width: 150px; height: 80px; font-size: 32px; display: flex; justify-content: center; align-items: center; background: #fff; margin: auto; } </style>

[hengshanMWC]

我知道你的意思了，这个额外功能我可能得抽时间搞，或者说我把滚动逻辑抽离出来等你们自定义