suchen

Heim  >  Artikel  >  Web-Frontend  >  So schreiben Sie einen Auswurfball in die Vue-Komponente

So schreiben Sie einen Auswurfball in die Vue-Komponente

一个新手
一个新手Original
2017-09-06 11:22:481933Durchsuche

1. Definieren Sie jede ausgeworfene Ballkomponente (Ocicle)

2. Das benutzerdefinierte Attribut der Komponentennachricht speichert die anfänglichen Informationen des Balls (kann geändert werden) 


{top: "0px",        //小球距离上方坐标　　　
 left: "0px",       //小球距离左边坐标　　　
 speedX: 12,      //小球每次水平移动距离　　　
 speedY: 6         //小球每次垂直移动距离
}

3. Idee

　3.1 Der Timer stellt den Ball so ein, dass er sich in jedem Frame bewegt

　3.2 Anfangsrichtung: Wenn isXtrue wahr ist, wird sich der Ball in der positiven Richtung bewegen Abszisse;

　　　　　isYtrue ist wahr, der Ball befindet sich in der positiven Richtung der vertikalen Koordinate

　3.3 Ermitteln Sie vor jeder Bewegung die aktuellen Koordinaten des Balls (oleft, otop) und die aktuellen Koordinaten plus der Bewegungsentfernung sind die Koordinaten des nächsten Frames

　3.4 Grenzbeurteilung: Wenn der Koordinatenbereich der horizontalen Achse den Maximalwert überschreitet, ändert sich das Pluszeichen in ein Minuszeichen

4 Punkte

　4.1 Eltern-Kind-Komponenten übertragen Informationen mithilfe von Requisiten

4.2 Ermitteln Sie die Breite und Höhe von El vor der Vorlagenkompilierung 


beforeMount: function (){    
    this.elWidth=this.$el.clientWidth;    
    this.elHeight=this.$el.clientHeight;
}

　4.3 Unterkomponente erhält EL-Breite und -Höhe (this.$root.elWidth,this.$root.elHeight)

　4.4 Unterkomponenteninformationen aktualisieren, nachdem die Vorlagenkompilierung abgeschlossen ist


mounted: function (){    //根据父组件信息更新小球数据
    this.addStyle.top=this.message.top;    
    this.addStyle.left=this.message.left;    
    this.speedX=this.message.speedX;    
    this.speedY=this.message.speedY;    //小球初始坐标
    this.oleft=parseInt(this.addStyle.left);    
    this.otop=parseInt(this.addStyle.top);    
    this.move();
}

5. Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,
        body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #app{
            width: 800px;
            height: 500px;
            margin: 50px auto;
            outline: 1px solid #f69;
            position: relative;
        }    </style>
</head>
<body>
    <p id="app">
        <ocicle :message="message1"></ocicle>
        <ocicle :message="message2"></ocicle>
        <ocicle :message="message3"></ocicle>
    </p>
    
    <script src="https://unpkg.com/vue"></script>
    <script>        var tem={
            props: ["message"],
            template: &#39;<p class="article" :style="addStyle"></p>&#39;,
            data: function (){                
            return {                       //初始化小球样式                    
            addStyle: {
                        width: "10px",
                        height: "10px",
                        backgroundColor: "#000",
                        position: "absolute",
                        marginTop: "-5px",
                        marginLeft: "-5px",
                        borderRadius: "50%",
                        top: "0px",
                        left: "0px"},        //横坐标方向的速度
                    speedX: 0,                    //纵坐标方向的速度
                    speedY: 0,                    //isX为真，则在横坐标方向为正
                    isX: true,                    //isY为真，则在纵坐标方向为正
                    isY: true,                    //小球当前坐标
                    oleft: 0,
              otop: 0
                }
            },
            mounted: function (){                //根据父组件信息更新小球数据
                    this.addStyle.top=this.message.top;                
                    this.addStyle.left=this.message.left;                
                    this.speedX=this.message.speedX;                
                    this.speedY=this.message.speedY;                //小球初始坐标
                    this.oleft=parseInt(this.addStyle.left);                
                    this.otop=parseInt(this.addStyle.top);                
                    this.move();
            },
            methods: {
              move: function (){                    
              var self=this;
              setInterval(function (){                        //更新小球坐标
                     self.oleft=parseInt(self.addStyle.left);
              self.otop=parseInt(self.addStyle.top);
              self.isXtrue();
              self.isYtrue();
                   }, 20);
                   },                //判断横坐标
                isXtrue: function (){                   //true 横坐标正方向
                                                                 //false 横坐标负方向
                    if(this.isX){                        
                        this.addStyle.left=this.oleft+this.speedX+"px";        //宽度超过最大边界
                        if(this.oleft>this.$root.elWidth-5){                            
                        this.addStyle.left=this.oleft-this.speedX+"px";                            
                        this.isX=false;
                      }
              }else{                        
                 this.addStyle.left=this.oleft-this.speedX+"px";        //宽度超过最小边界
                        if(this.oleft<5){                            
                         this.addStyle.left=this.oleft+this.speedX+"px";                            
                         this.isX=true;
                        }
                    }
                },                                 // 判断纵坐标
                isYtrue: function (){                    //true 纵坐标正方向
                    //false 纵坐标负方向
                    if(this.isY){                        
                        this.addStyle.top=this.otop+this.speedY+"px";           //高度超过最大边界
                        if(this.otop>this.$root.elHeight-5){                            
                        this.addStyle.top=this.otop-this.speedY+"px";                            
                        this.isY=false;
                        }
             }else{                        
                this.addStyle.top=this.otop-this.speedY+"px";            //高度超过最小边界
                        if(this.otop<5){                            
                        this.addStyle.top=this.otop+this.speedY+"px";                            
                        this.isY=true;
                        }
                    }
                }
            }

        }        var vm=new Vue({
            el: "#app",
            data: {                //获取el节点宽高
                elWidth: 0,
                elHeight: 0,                //设置小球初始信息               
                message1: {
                    top: "0px",
                    left: "600px",
                    speedX: 12,
                    speedY: 6
                },
                message2: {
                    top: "0px",
                    left: "300px",
                    speedX: 8,
                    speedY: 6
                },
                message3: {
                    top: "300px",
                    left: "0px",
                    speedX: 13,
                    speedY: 5
                }
            },            //更新el节点宽高
            beforeMount: function (){                
                this.elWidth=this.$el.clientWidth;                
                this.elHeight=this.$el.clientHeight;
            },
            components: {                
            "ocicle": tem
            }
            
        })    
     </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo schreiben Sie einen Auswurfball in die Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung praktischer JavaScript-Kenntnisse, die Sie möglicherweise nicht kennenNächster Artikel：Zusammenfassung praktischer JavaScript-Kenntnisse, die Sie möglicherweise nicht kennen

In Verbindung stehende Artikel

Mehr sehen