vueコンポーネントで射出ボールを記述する方法

1. 排出される各ボールコンポーネント（オシクル）を定義します

2. コンポーネントメッセージのカスタム属性には、ボールの初期情報が格納されます（変更可能）

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

3.1 各ボールのタイマー設定1 つのフレーム内で

3.2 初期方向: isXtrue が true の場合、ボールは横軸の正の方向になります )、現在の座標に移動距離を加えたものが次のフレームの座標になります

3.4 境界判定:横軸の座標範囲が最大値を超えると、プラス記号がマイナス記号に変わります

4. Vueの知識ポイント

4.1 親子コンポーネントはpropsを使用して情報を転送します

4.2 テンプレートのコンパイル前にelの幅と高さを取得します

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

4.3 elの幅と高さを取得する(this.$root.elWidth,this.$root.elHeight)

4.4 テンプレートのコンパイル後にサブコンポーネント情報を更新する

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.

りー

以上がvueコンポーネントで射出ボールを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。