vue抽奖组件之九宫格

写在前面

本人自从事前端工作以来，每每遇到技术问题后，都是向百度/谷歌求教，久而久之便养成了伸手即来的‘本领’。。。可能是出于‘懒’的原因（没错，就是因为懒），从未发表过技术文章或开发经验，深感惭愧，故洗心革面，决心分享一些东西。
本文所述仅冰山一角，欢迎大家留言宝贵经验~。

1.需求

页面属于活动页面
a.进入页面会请求后台接口，拉取当前用户抽奖剩余次数
b.点击九宫格开始按钮，开始转动，并请求后台接口
c.接口请求成功，根据接口返回的停留位置停止转动
d.可连续抽奖，直至抽奖次数为0
大致展示效果如下

2.组件源码

template部分

script部分

1.接口说明：如果本地localhost启动，可以用setTimeout模拟post请求
2.函数说明：

move函数 为100ms转动，切最小转动次数为12（一圈半，也就是防止接口返回太快，刚开始转就停止）,当接口返回成功后，记录当前index及服务器的返回停止位置stopIndex,并执行enter函数;
enter函数 100ms转动，接受参数，计算当前index与stopIndex的差值，如果>4，就可以执行递减，===4时；<=4，再次判断是否>-4（这个判断是为了计算多转几次），执行stop函数;
stop函数 为300ms转动，只转4次，然后完成整个流程;

3.对于setInterval，当组件销毁时，要清除定时器

style部分

关于正方形布局，通过{width:100%;padding-bottom:100%;}实现

@common/js/ajax源码如下

// https://github.com/axios/axios
const axios = require('axios');


// 超时 15秒
// axios.defaults.timeout = 15000;
// 允许发送cookie
axios.defaults.withCredentials = true;

/**
 * get请求
 * @param {string} url - 请求的路径
 * @param {Object} params - 参数
 * @return {Promise}
 */
export function get(url, params = {}) {
  return axios.get(url, {
    params,
  });
}
/**
 * post请求
 * @param {string} url - 请求的路径
 * @param {Object} data - 参数
 * @param {Object} config - 原始配置
 * @return {Promise}
 */
export function post(url, data = {}, config = {}) {
  return axios.post(url, data, config);
}

deepQuery源码如下

/**
 * 深度查询 deepQuery({},"a","b","c")
 * @param {any} func 要查询的对象
 * @return {boolean} true or false
 */
export function deepQuery(obj, ...args) {
  return args.reduce((a, b) => (a ? a[b] : a), obj);
}

3.写在后面

欢迎各位大佬指正
后续会分享自定义日历组件/城市地点选择组件等等，欢迎大家一起讨论学习！