Vue2.x開發餓了麼專案（header部分）

TDYWZ_發表於2018-12-20
VueHeader

header元件開發 資料之間的傳遞

App.vue 引入元件，App.vue 中註冊元件，使用元件時 要記得傳入seller引數

通過父元件向子元件傳遞資料
在父元件中需要將sellerO作為資料匯出，子元件通過props從父元件中獲得資料，且要指定資料型別

export default {
 props:{  //  子元件獲取 父元件 資料
 	sell:{
 	  type:Object // 傳遞的型別 
 	}
  }
 }
複製程式碼

然後在header元件裡面呼叫資料就出來 寫入基本的樣式

header元件的彈出層

v-show設定一個狀態，判斷該狀態控制顯示隱藏 @click 繫結點選事件,通過methods 方法改變 狀態，控制顯隱效果

星級評分

繫結class 控制星級大小的型別 通過計算屬性計算星星大小

//  利用 computed 屬性
<div class="star" :class="starSizeType"></div>
computed: {
  starSizeType() { //  返回 星級的大小型別  48/36/24
   return 'star-' + this.size;
  }
}
複製程式碼

遍歷星星的數量

定義常量 控制 每個星的狀態

// 類名用變數存起來
const LENGTH = 5  //  星星長度
const CLS_ON = 'on'  // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星
複製程式碼

通過計算 判斷每個span 的型別

itemClasses () {  //  返回一個陣列為每個span 的類名  （遍歷）
   let spanClassList=[];
   // 利用 實參評分來判斷 有幾顆全星，半星，空星
  let scores=( Math.floor(this.score * 2) ) / 2 
  let intNum= Math.floor(scores); // 全星個數  
  let HashalfNum= scores % 1 !== 0   // 半星
  for(var i=0;i<intNum;i++){ // 遍歷全星的span
	spanClassList.push(CLS_ON)
  }
  if(HashalfNum){ //  如果有半星  加類名
	spanClassList.push(CLS_HALF)
  }
  while(spanClassList.length<LENGTH){//  判斷 是否有空星 及個數
	spanClassList.push(CLS_OFF)
  }
   return spanClassList;	    	
  }
}
複製程式碼

通過 動態繫結class 來 給span 加類名

<div class="star" :class="starSizeType">
  <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</div>
複製程式碼

相關文章