選項卡學習

實現選項卡評論切換

(一)
data.json中"ratings"的數據結構以下：

說明：
選項卡有的三個狀態所有/推薦/吐槽
以selectType的值來區分
selectType=2---"所有"是選中的狀態
selectType=0---"推薦"是選中的狀態
selectType=1---"吐槽"是選中的狀態
以class="active"來對選中的狀態進行標記
以"desc"對文字信息進行標記
ratingselect.vue組件template部分
<template>

<div class="ratingselect">
    <div class="rating-type border-1px">
        <!--所有 s-->
        <span class="block positive" @click="select(2,$event)" 
            :class="{'active':selectType===2}">
            {{desc.all}}
            <span class="count">
                {{ratings.length}}
            </span>
        </span>
        <!--所有 e-->
        <!--推薦 s-->
        <span class="block positive" @click="select(0,$event)"
            :class="{'active':selectType===0}">
            <span class="count">{{positives.length}}</span>
            {{desc.positive}}
        </span>
        <!--推薦 e-->
        <!--推薦 s-->
        <span class="block negative" @click="select(1,$event)"
            :class="{'active':selectType==1}">
            {{desc.negative}}
            <span class="count">{{nagatives.length}}</span>
        </span>
        <!--推薦 e-->
    </div>
    <!--文本內容/非文本內容的切換-->
    <div class="switch" @click="toggleContent($event)" :class="{'on':onlyContent}">
        <i class="iconfont icon-gou"></i>
        <span class="text">只看有內容的評價</span>
    </div>
</div>

</template>
SCRIPT部分：
<script>
//定義三個狀態的變量：
//推薦狀態
const POSITIVE=0;
//吐槽狀態
const NEGATIVE = 1;
const ALL=0;
export default{

props:{
    ratings:{
        type:Array,
        default(){
            return [];
        }
    },
    selectType:{
        type:Number,
        default:ALL
    },
    onlyContent:{
        type:Boolean,
        default:false
    },
    desc:{
        type:Object,
        default(){
            return {
                all:'所有',
                positive:'滿意',
                negative:'吐槽'
            };
        }
    }
},
computed:{
    positives(){
        //過濾出rateType===POSITIVE返回給推薦(以展現此類型評價的個數)
        return this.ratings.filter((rating)=>{
            return rating.rateType===POSITIVE;
        });
    },
    nagatives(){
        return this.ratings.filter((rating)=>{
            return rating.rateType===NEGATIVE
        });
    }

},
methods:{
    //點擊選中選項卡觸發父組件的increment的事件
    //傳入的參數爲該選項卡類型(0,1,2),以及該點擊事件
    select(type,event){
        this.$emit('increment','selectType',type);
    },
    //文本內容和非文本內容的切換
    toggleContent(event){
        if(!event._constructed){
          return;
        }
        this.onlyContent=!this.onlyContent;
        this.$emit('increment','onlyContent',this.onlyContent);
    },
    //列表顯示（由父組件觸發執行needShow(rating.rateType,rating.text)）
    needShow(type,text){
        if(this.onlyContent&&!text){
            return false;
        }
        if(this.selectType===ALL){
            return true;
        }
        else{
            return type===this.selectType
        }
    
    }

}}</script>

(二)父組件部分food.vue
分爲選項卡切換(引入前面的組件)，和列表展現兩部分
template部分：
<div class="rating">

<h1 class="title">商品評價</h1>
<!--監聽子組件發送來的increment,觸發父組件的incrementTotal-->
<ratingselect @increment="incrementTotal" 
  :select-type="selectType"
  :only-content="onlyContent" :desc="desc" :ratings="food.ratings">
</ratingselect>
<!--列表部分-->
<div class="rating-wrapper">
    <ul v-show="food.ratings&&food.ratings.length">
        <!--由子組件的needShow決定其是否顯示-->
        <li v-show="needShow(rating.rateType,rating.text)" class="rating-item border-1px" v-for="rating in food.ratings">
            <div class="user">
                <span class="name">{{rating.username}}</span>
                <img width="12" height="12" :src="rating.avatar" class="avatar">
            </div>
            <div class="time">
                {{rating.rateTime |formateDate}}
            </div>
            <!--rating.rateType=0/rating.rateType=1(推薦/吐槽時展現)-->
            <p class="text">
                <i class="iconfont"
                :class="{'icon-damuzhi':rating.rateType==0,
                'icon-down':rating.rateType===1}"></i>
                {{rating.text}}
            </p>
        </li>
    </ul>
</div></div>

SCRIPT部分
//默認展現所有評價
const ALL=2;
export default{

props:{
    food:{
        type:Object
    }
},
data(){
    return{
        showFlag:false,
        selectType:ALL,
        onlyContent:true,
        desc:{
            all:'所有',
            positive:'推薦',
            negative:'吐槽'
        }
    };
}
methods:{
    //show方法由父組件點擊觸發執行
    show(){
        this.showFlag=true;
        //默認所有的選項卡是選中的狀態;展現所有的評價
        this.selectType=ALL;
        //只顯示文本的提示也是選中的狀態
        this.onlyContent=true;
        this.$nextTick(()=>{
            if(!this.scroll){
                this.scroll=new BScroll(this.$el,{
                    click:true
                });
            }
            else{
                this.scroll.refresh();
        
            }
        
        })
        
    
    },
    incrementTotal(type,data){
        //type:selectType
        //data:點擊時哪一項item的selectType的具體值
        this[type]=data;
        this.$nextTick(()=>{
            this.scroll.refresh();
        });
    },
    needShow(type,text){
       //只看內容的radio是選中狀態，可是沒有內容
        if(this.onlyContent&&!text){
            return false;
        }
        //選項卡的選中狀態是「ALL」,列表展現
        if(this.selectType===ALL){
            return true;
        }
        else{
            return type === this.selectType;
        }
    }

}

}