一、介绍
菜谱大全通过element组件进行渲染,实现了tab切换和下拉列表效果。
二、过程
首先导入api,在data里面创建需要用到的属性。
import {getClassify, getProperty, getMenus} from '@/service/api';
data
data() {
return {
classify:[],//存储tab切换的所有数据
classifyType:'1-1',//tab切换的选中项(二级路由)
classifyName:'1',//定义刷新tab的值(一级路由)
// 属性
properties:[],//存储属性中的所有数据
properType:{},//存储属性的分类。例如:{craft:1-4,flavor:2-2,hard:3-4,people:4-3}
propertiesActivName:[]
}
},
开始实现的是菜谱分类,首先通过getClassify调用后端获取数据,使用element里面的标签页进行渲染。并且判断它路由里的query是否有classify,如果没有通过push添加,是classify值为一,具体表现为一级路由家常菜谱,二级路由选中家常菜。在最外层通过v-model绑定classifyName同步当前的一级路由。通过遍历获取到的数据classify渲染一级路由,获取到数据item。接着通过遍历item下的list渲染二级路由,获取到数据option。在二级路由里面绑定一个动态的class,当classifyType和某个二级路由的type相等时,给他创建一个active的class,实现高亮显示:
getClassify().then(({data})=>{
this.classify=data
if(!this.$route.query.classify){
this.classifyType=this.classify[0].list[0].type
this.classifyName=this.classify[0].parent_type
this.$router.push({
query:{
classify:this.classifyType,
page:1
}
})
}
});
渲染:
<el-tabs type="border-card" v-model="classifyName">
<el-tab-pane
v-for="item in classify"
:key='item.parent_type'
:label="item.parent_name"
:name='item.parent_type'>
<div class="recipe-link">
<router-link :to="{query:{...$route.query,classify:option.type}}"
v-for="option in item.list"
:key='option.type'
:class="{active:classifyType===option.type}">
{{option.name}}
</router-link>
</div>
</el-tab-pane>
</el-tabs>
监听路由,通过this.$route.query获取到里面的classify,判断classify是否有值,若果有的话把classify赋值给classifyType。把classify[0]赋值给classifyName:
watch: {
$route: {
handler(){
const {classify}=this.$route.query
if(classify){
this.classifyType=classify
this.classifyName=classify[0]
}
this.ThisgetMenus()
},
immediate:true
}
},
接下来是下拉列表首先是通过getProperty调用后端获取数据,把数据赋值给properties。然后通过reduce方法把所有属性的分类赋值给properType。通过element组件渲染:
getProperty().then(({data})=>{
this.properties=data
const {query}=this.$route
console.log(this.properties);
this.properType=this.properties.reduce((o,item)=>{
o[item.title]=query[item.title]?query[item.title]:''
if(o[item.title]){
this.propertiesActivName.push(o[item.title][0])
}
return o
},{})
})
渲染:
<h2>家常好味道,给你家一般的温暖</h2>
<el-container>
<el-aside width="220px" class="recipe-aside">
<div class="filter-box">
<h4>筛选</h4>
<!-- v-model="activeName" -->
<!-- 筛选 start -->
<el-collapse v-model="propertiesActivName">
<el-collapse-item
v-for="item in properties"
:key='item.parent_type'
:title="item.parent_name"
:name='item.parent_type'
>
<div class="filter-tags">
<el-tag type="info"
v-for="option in item.list"
:key="option.type"
@click="selectedTag(option)"
:class="{'tag-selected':properType[option.title]===option.type}">{{option.name}}</el-tag>
</div>
</el-collapse-item>
</el-collapse>
<!-- 筛选 end -->
</div>
</el-aside>
给属性绑定一个点击事件selectedTag,并把遍历得到的数据option当做实参传递。判断属性是否点击过,如果点击过取消高亮显示,没有电击过,添加高亮显示。
selectedTag(option){
let query={...this.$route.query}
// 判断是否点击,如果点击过,取消、否则选中
if(this.properType[option.title]==option.type){
this.properType[option.title]=''
delete query[option.title]
}else{
this.properType[option.title]=option.type
query[option.title]=option.type
}
this.$router.push({
query
})
},
总结:
到这里就介绍完了,祝大家生活愉快!