介绍

ui和逻辑分离，组件封装了逻辑和宫格布局，让开发者只关注ui部分。

它会在初始化的时候将原始布局转换为宫格布局，建立坐标轴，在坐标轴之上建立一个步进器作行走规则，通过startRoll调起抽奖，推动步进器，消耗步数，完成抽奖。话不多说，直接上demo

安装

npm i grid-roll -S
yarn add grid-roll

引入

/** 引入 */
import { gridRoll, gridStart, gridPrize } from 'grid-roll'
import 'grid-roll/dist/grid-roll.min.css'

demo

<template>
  <div class="demo-dialSudoku">
    <div>
      <grid-roll ref="dial" @underway="handleUnderway" class="box">
        <template #button>
          <grid-start>
            <div @click="handleStart" class="demo-box button-box">按钮</div>
          </grid-start>
        </template>
        <template #prize>
          <grid-prize v-for="(item, index) in items" :key="index">
            <div class="demo-box">
              <p>id：{{item.id}}</p>
              <p>text：{{item.text}}</p>
            </div>
          </grid-prize>
        </template>
      </grid-roll>
      <p>基本九宫格</p>
      <!-- direction：设置滚动方向为左边，xy：布局为6*5，startIndex：初始滚动位置设置为pid1 -->
      <grid-roll ref="dial2" @underway="handleUnderway2" direction="l" xy="6*5" class="box" :startIndex="1">
        <template #button>
          <grid-start>
            <div @click="handleStart2" class="demo-box2 button-box2">按钮</div>
          </grid-start>
        </template>
        <template #prize>
        <!-- selStyle：设置选中样式，pid：设置pid -->
          <grid-prize v-for="(item, index) in items2" :key="index" :selStyle="{opacity: 0.4}" :pid="item.id">
            <div class="demo-box2">
              <p>id：{{item.id}}</p>
              <p>text：{{item.text}}</p>
            </div>
          </grid-prize>
        </template>
      </grid-roll>
      <p>自定义宫格：6*5</p>
    </div>
  </div>
</template>

import { gridRoll, gridStart, gridPrize } from 'grid-roll'
import 'grid-roll/dist/grid-roll.min.css'
/**
 * 抽奖有两种模式，一种是index,另外一种是pid。一般开发情况下，都是根据后端接口的
 * 奖品id来瞄准奖品，所以我们得在gridPrize组件上传pid来开启抽奖pid模式，然后调用g
 * ridRoll的startRoll(pid)来进行抽奖
 **/
export default {
  name: 'demo-dialSudoku',
  data () {
    return {
      items: [],
      items2: []
    }
  },
  components: {
    [gridRoll.name]: gridRoll,
    [gridStart.name]: gridStart,
    [gridPrize.name]: gridPrize
  },
  created () {
    let arr = []
    for (let i = 0; i < 8; i++) {
      arr.push({
        id: i,
        text: i
      })
    }
    this.items = arr
    arr = []
    for (let i = 0; i < 18; i++) {
      arr.push({
        id: i,
        text: i
      })
    }
    this.items2 = arr
  },
  methods: {
    async handleStart () {
      // 如果希望请求后端接口的时候就开始滚动，可以在请求后端参数前使用
      // this.$refs.dial.continueRoll()来滚动，直到请求成功，然后调用startRoll（）
      let b = await this.$refs.dial.startRoll(3)
      console.log(b)
      if (b) {
        alert('恭喜你抽了个奖')
      }
    },
    handleUnderway (index) {
      console.log('进行中,index=' + index)
    },
    async handleStart2 () {
      let b = await this.$refs.dial2.startRoll(7)
      console.log(b)
      if (b) {
        alert('恭喜你抽了个奖')
      }
    },
    handleUnderway2 (id) {
      console.log('进行中,id=' + id)
    }
  }
}

<style lang="scss" scoped>
$zoom: .5;
$size: 200px * $zoom;
* {
  margin: 0;
  padding: 0;
}
.demo-dialSudoku {
  p {
    font-size: 24px;
    text-align: center;
  }
  .box {
    margin-top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .demo-box {
    width: 150px;
    height: 150px;
    font-size: 32px;
    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 150px;
    }
  }
  .button-box {
    border-radius: 50%;
    width: 150px;
    height: 150px;
  }
  .demo-box2 {
    width: $size;
    height: $size;
    font-size: 42px * $zoom;
    text-align: center;
    font-weight: 600;
    border: 5px * $zoom solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    p {
      flex: 1 1 $size;
    }
  }
  .button-box2 {
    border-radius: 50%;
    width: 400px;
    height: 300px;
  }
}
</style>

文档地址

在线demo page预览

github.com/hengshanMWC…