現在vue.jsで要素を生成→古いimg(A)要素を消す→新しいimg(B)要素をフェードインという処理を書いたのですが、2つのmethodsで同じ処理を書いているので1か所にまとめてその都度値を代入して処理を呼び出す形にしたいと考えています。
app.js
1changeAimg: function(event) { 2 var select = event.target.getAttribute("value"); 3 var ALayer = document.getElementById('layer_0'); 4 //Bレイヤーの初期化 5 var BLayer = document.getElementById('layer_10'); 6 this.ShadowImage = ''; 7 this.selectItems[0].time = ''; 8 this.selectItems[0].direct = select; 9 // /*ファイル名組み立て*/ 10 var imageName = this.passStr + select +'.png'; 11 //新規画像作成 12 var newImage = new Image(); 13 newImage.style.userSelect = "none"; 14 newImage.style.position = "absolute"; 15 newImage.style.opacity = 0.0; 16 //読込完了 17 newImage.onload = function() { 18 //前の画像を全部削除 19 while( ALayer.firstChild ) { 20 ALayer.removeChild( ALayer.firstChild ); 21 }; 22 while( ALayer.firstChild ) { 23 ALayer.removeChild( BLayer.firstChild ); 24 }; 25 //画面追加 26 ALayer.appendChild( newImage ); 27 //フェードイン 28 newImage.animate( 29 { opacity : [ 0.0, 1.0 ] }, 30 { duration : 500, fill : "forwards", easing : "ease" } 31 ); 32 }; 33 newImage.src = imageName; 34 }, 35 changeBimg: function(event){ 36 var select = event.target.getAttribute("value"); 37 var BLayer = document.getElementById('layer_10'); 38 this.selectItems = select; 39 /*時間文字列から:00を削除*/ 40 var replace = selectItems.replace(/:00/g, ''); 41 /*ファイル名組み立て*/ 42 var imageName = this.passStr + this.selectItems[0].eee +'/' + this.selectItems[0].ddd + '_T' + replace +'.png'; 43 var newImage = new Image(); 44 newImage.style.userSelect = "none"; 45 newImage.style.position = "absolute"; 46 newImage.style.opacity = 0.0; 47 //読込完了 48 newImage.onload = function() { 49 //前の画像を全部削除 50 while( BLayer.firstChild ) { 51 BLayer.removeChild( BLayer.firstChild ); 52 }; 53 //画面追加 54 BLayer.appendChild( newImage ); 55 //フェードイン 56 newImage.animate( 57 { opacity : [ 0.0, 1.0 ] }, 58 { duration : 500, fill : "forwards", easing : "ease" } 59 ); 60 }; 61 newImage.src = imageName; 62
わからないこと
・現在computedに共通する処理を書き込み、変数を渡す形を考えていたのですが、computedに値を渡す方法がわかりません。
・新しくmethodsを作ってそこに共通する処理を書き込んだ方が他のエンジニアから見た時にわかりやすいかなとも考えているのですがどちらがいいのでしょうか