用VUE 渲染一个斐波那契图形 组件

export default {
  functional: true,
  render: function (h,ctx) {
    function fibonacci(n) {
      var res1 = 1;
      var res2 = 1;
      var sum = res2;
      for (var i = 1; i < n; i++) {
        sum = res1 + res2;
        res1 = res2;
        res2 = sum;
      }
      return sum;
    }
    // eslint-disable-next-line no-unused-vars
    let diration = 0;
    let nums = [];
    let s = 0;
    let x = 0;
    let z = 0;
    let y = 0;
    return h(
      "div",
      {
        style: {
          width: "0px",
          height: "0px",
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          margin: 'auto',
          position: "absolute",
          // border: "0.5px solid #000",
        },
      },
      [
        new Array(ctx.props.count||11).fill(null).map((i, k) => {
          let num = fibonacci(k);
          let pre = fibonacci(k - 1);
          let size = num * 10;
          let style;
          nums.push(num);
          if (k !== 0) {
            switch (diration) {
              case 1:
                x = x + fibonacci(k - 4) * 10;
                style = {
                  top: x + "px",
                  left: -z + "px",
                  transform: 'rotate(-90deg)'
                };
                break;
              case 2:
                y = y + fibonacci(k - 4) * 10;
                style = {
                  left: y + "px",
                  top: -s + "px",
                  transform: 'rotate(-180deg)'
                };
                break;
              case 3:
                s = s + num * 10;
                style = {
                  top: -s + "px",
                  left: -z + "px",
                  transform: 'rotate(90deg)'
                };
                break;
              case 4:
                z = z + num * 10;
                style = {
                  left: -z + "px",
                  top: -s + "px",
                  transform: 'rotate(0deg)'
                };
                break;
              default:
                break;
            }
          }

          k > 0 && diration < 4 ? diration++ : (diration = 1);
          return h(
            "div",
            {
              style: {
                width: size + "px",
                height: size + "px",
                border: "0.5px solid #c1c1c1",
                position: "absolute",
                fontSize: "12px",
                textAlign: "center",
                lineHeight: size + "px",
                boxSizing: "border-box",
                ...style,
                // overflow:'hidden'
              },
            },
            [
              // k > 0 &&
              h("div", {
                style: {
                  width: size * 2 + "px",
                  height: size * 2 + "px",
                  borderRadius: "50%",
                  border: "0.5px solid #000",
                  // backgroundColor: `rgba(${num},${pre},${num},0.2)`
                }
              }),
            ]
          );
        }),
      ]
    );
  }
}