选项卡学习

实现选项卡评论切换

(一)
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;
        }
    }

}

}