實現選項卡評論切換
(一)
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;
}
}
}
}