집 > 기사 > 웹 프론트엔드 > Vue 헤더 구성요소 개발 예제 코드

Vue 헤더 구성요소 개발 예제 코드

小云云원래의: 2018-01-31 10:05:121730검색

이 글에서는 참고용으로 Vue 헤더 컴포넌트 개발에 대한 자세한 설명을 주로 소개합니다. Vue 컴포넌트 개발에 대해 더 깊이 이해하시기 바랍니다.

1. 헤더 컴포넌트 개발 시 데이터 전송

1. App.vue에 컴포넌트가 도입되었습니다

import header from &#39;./components/header/header&#39;

2. App.vue

 export default {
   components:{
     v-header:header
   }
 }

<v-header :sell="sellerObj"></v-header>

설명: :sell="sellerObj", 여기서 Sell은 함수 매개변수처럼 형식 매개변수로 처리되고, SellerObj는 실제 매개변수이므로 상위 구성요소의 실제 매개변수가 하위 구성요소에 어떻게 전달되며, 이를 통해 어떤 방법으로

4. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송합니다

상위 컴포넌트에서는 SellerObj를 데이터로 내보내야 하며 하위 컴포넌트는 props를 통해 데이터 유형을 지정해야 합니다

export default {
 props:{ // 子组件获取 父组件 数据
 sell:{
  type:Object // 传递的类型 
 }
 }
 }

요약:

child 구성 요소는 상위 구성 요소에서 전달한 값을 받기 위해 props에 속성을 생성합니다.

상위 구성 요소에 하위 구성 요소를 등록합니다.
하위 구성 요소에서 생성된 속성을 추가합니다. 하위 구성요소 태그에 props
필요에 따라 하위 구성요소에 전달된 값은
5 속성에 할당됩니다. 데이터 호출

<p class="logo">
 <img :src="sell.avatar" alt="" width=&#39;64&#39; height=&#39;64&#39;/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
  {{sell.description + &#39;/&#39; + sell.deliveryTime + &#39;分钟送达&#39;}}
</p>

세부정보:

support v-if ='sell.supports 추가 ' 데이터를 바인딩할 때

이유: 우리의 경우 axios를 통해 데이터를 얻기 전에 상위 구성 요소에 빈 개체 SellerObj가 생성되어 먼저 하위 구성 요소에 전달됩니다. 처음에 데이터가 전송되지 않으면 underfined 오류가 보고됩니다. v-if를 사용하면 데이터를 수신할 수 없으면 구문 분석되지 않으므로 오류가 보고됩니다.

2. 헤더 구성 요소 팝업 레이어(세부 사항)

1. 팝업 마스크 레이어

(1) 상태가 표시 또는 숨김을 제어하는지 결정하는 상태 설정

data (){
 return {
 detailShow:false
 }
}

<p v-if="detailShow" class="detail"></p>

(2) 클릭 이벤트를 바인딩하고, 메서드 메서드를 통해 상태를 변경하고, 표시 및 표시되지 않는 효과를 제어합니다.

<p class="bulletin-wrapper" @click="showDetails()" ></p>
<p class="detail-close" v-if="sell.supports">
  <i class="icon-close" @click="hideDetail()"></i>
</p>

methods:{
 showDetails () {
  this.detailShow=true
 },
 hideDetail () {
 this.detailShow=false
 }
}

2.별점 평가

(1) 클래스 바인딩 별 크기의 유형을 제어하려면

// 利用 computed 属性
<p class="star" :class="starSizeType"></p>

computed: {
 starSizeType() { // 返回 星级的大小类型 48/36/24
  return &#39;star-&#39; + this.size;
 }
}

(2) 별의 개수를 탐색합니다

코드 복사

코드는 다음과 같습니다.

2f22a7dcfd81b6875c79da8a0ff0950f54bdf357c58b8a65c66d7c19c8e4d114

(3) 각 별의 상태를 제어하는 상수를 정의합니다

// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = &#39;on&#39; // 全星
const CLS_HALF = &#39;half&#39; // 半星
const CLS_OFF = &#39;off&#39;// 空星

(4) 계산을 통해 각 스팬의 유형 결정

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;   
 }
}

(5) 클래스를 동적으로 바인딩하여 스팬에 클래스 이름 추가

<p class="star" :class="starSizeType">
 <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</p>

Vue 헤더 구성요소 개발 예제 코드

관련 기사