Maison > Article > interface Web > Comment écrire une boule d'éjection dans le composant vue

Comment écrire une boule d'éjection dans le composant vue

一个新手original: 2017-09-06 11:22:481928parcourir

1. Définir chaque composant de balle éjectée (ocicule)

2. L'attribut personnalisé du message du composant stocke les informations initiales de la balle (peut être modifié)

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

3. Idée

　3.1 Le chronomètre règle la balle pour qu'elle bouge à chaque image

　3.2 Direction initiale : si isXtrue est vrai, la balle sera dans la direction positive du abscisse;

　　　　　estYvrai, la balle est dans la direction positive de la coordonnée verticale

　3.3 Obtenir les coordonnées actuelles de la balle (oleft, otop) avant chaque mouvement, et les coordonnées actuelles plus la distance de mouvement sont les coordonnées de l'image suivante

　3.4 Jugement des limites : lorsque la plage de coordonnées de l'axe horizontal dépasse la valeur maximale, le signe plus se transforme en signe moins

4. points

　4.1 Les composants parent-enfant utilisent des accessoires pour transférer des informations

4.2 Obtenir la largeur et la hauteur d'el avant la compilation du modèle

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

4.3 Le sous-composant obtient la largeur et la hauteur de l'élément (this.$root.elWidth,this.$root.elHeight)

　4.4 Mettre à jour les informations du sous-composant une fois la compilation du modèle terminée

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des compétences pratiques en JavaScript que vous ne connaissez peut-être pasArticle suivant：Résumé des compétences pratiques en JavaScript que vous ne connaissez peut-être pas

Articles Liés

Voir plus