用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)`
  }
}),
     ]
   );
 }),
      ]
    );
  }
}