Vue - 组件开发和实例旋转轮盘

摘要：请教本来设想的是通过来传递卡片的内部结构和数组数据，例如传递一个渲染函数，通过可以轻松的实现但是这招行不通。

demo地址： https://github.com/tanf1995/m...

用卡片数量均分360度圆，使用绝对定位分布在外部容器上，自身通过rotate旋转

       computedCardPosStyle(index){
       let deg = index * this.unitCardDeg;
       let absDeg = Math.abs((deg + this.turnRotate) % 360);
       let z_index = absDeg > 180 ? Math.ceil(absDeg-180): Math.ceil(180-absDeg);

       return {
           width: this.cardWidth + "px",
           height: this.cardHeight + "px",
           top: -Math.cos(deg*Math.PI/180)*this.turntableR + "px",
           left: Math.sin(deg*Math.PI/180)*this.turntableR + "px",
           transform: `translate(-50%, -50%) rotate(${deg}deg)`,
           zIndex: z_index
       }
   },
   

外部容器定位于浏览器窗口之下，露出正上方部分出来

   

    ...
  
   

onmousedown、onmouseup 用来判断鼠标是否处于按下状态，并且清空上一次拖动的数据

圆盘的转动以横向滑动的总距离更新角度

针对圆盘如何转动，设计按每一个小的间隔时间（如20ms），叠加一次总体滑动的距离

handleMouseDown(e){
    e.preventDefault();
    clearInterval(this.UDLMactionTimer);
    this.mouseIsDown = true;
    this.startX = e.clientX || e.touches[0].clientX;
    this.endX = e.clientX || e.touches[0].clientX;
},
handleMouseUp(e){
    e.preventDefault();
    this.mouseIsDown = false;
    clearInterval(this.timer);
    clearInterval(this.UDLMactionTimer);
    this.timer = null;
    this.startX = 0;
    this.endX = 0;
    if(this.lastSpeed) this.UDLMaction();
},
handleMouseMove(e){
    e.preventDefault();
    this.endX = e.clientX || e.touches[0].clientX;
    if(!this.mouseIsDown) return;
    if(!this.timer){
        this.timer = setInterval(() => {
            let moveGap = this.endX - this.startX;

            this.lastSpeed = moveGap/this.timeGap;
            this.xGap += moveGap;
            this.direction = moveGap > 0 ? 1 : -1;
            this.startX = this.endX;
        }, this.timeGap);
    }
},

mounted(){
let container_dom = this.outerWrap ? this.$refs.outerWrap : this.$refs.container;

container_dom.addEventListener("mousedown", this.handleMouseDown.bind(this));
container_dom.addEventListener("mouseup", this.handleMouseUp.bind(this));
container_dom.addEventListener("mouseleave", this.handleMouseUp.bind(this));
container_dom.addEventListener("mousemove", this.handleMouseMove.bind(this));
container_dom.addEventListener("touchstart", this.handleMouseDown.bind(this));
container_dom.addEventListener("touchend", this.handleMouseUp.bind(this));
container_dom.addEventListener("touchcancel", this.handleMouseUp.bind(this));
container_dom.addEventListener("touchmove", this.handleMouseMove.bind(this));

window.addEventListener("resize", this.responseContainerScale.bind(this));
window.addEventListener("load", this.responseContainerScale.bind(this));
},
beforeDestroy(){
    let container_dom = this.outerWrap ? this.$refs.outerWrap : this.$refs.container;

    container_dom.removeEventListener("mousedown", this.handleMouseDown.bind(this));
    container_dom.removeEventListener("mouseup", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("mouseleave", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("mousemove", this.handleMouseMove.bind(this));
    container_dom.removeEventListener("touchstart", this.handleMouseDown.bind(this));
    container_dom.removeEventListener("touchend", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("touchcancel", this.handleMouseUp.bind(this));
    container_dom.removeEventListener("touchmove", this.handleMouseMove.bind(this));

    window.removeEventListener("resize", this.responseContainerScale.bind(this));
}

如果没有滑动惯性，当滑动完之后，无论滑动的时候速度如何的快，在松开鼠标后转盘立刻停下，使得效果非常生硬。所以在滑动完成之后，利用最后时刻的滑动速度，让转盘做匀减速运动直至速度为0，并且在速度为0时，在设计缓慢细小的匀速滑动，最后呈现出来的效果就比较平滑了。

UDLMaction(){

   let a = -this.reduceSpeed*this.direction;
   this.UDLMactionTimer = setInterval(() => {
       this.lastSpeed = (this.lastSpeed + a)*this.direction >= 0? this.lastSpeed + a: 0;
       this.xGap += (this.lastSpeed) * this.timeGap;
       if(!this.lastSpeed){
           this.moreDynamic();
           return clearInterval(this.UDLMactionTimer);
       }
   }, this.timeGap);

},
moreDynamic(){

   let time = 10;
   let timer = setInterval(() => {
       this.xGap += this.direction*3;
       if(--time <= 0) clearInterval(timer);
   }, 20)

},

本来设想的是通过prop来传递卡片的内部结构和数组数据，例如传递一个渲染函数，通过react可以轻松的实现,但是vue这招行不通。请问如何能够做到这点呢？react伪代码如下

 }
>