vue商城中商品“篩選器”功能的實現(xiàn)代碼
在使用vue搭建商城項目的時候，要實現(xiàn)一個商品篩選器的功能，在完成之后，再一次被vue的數(shù)據(jù)驅(qū)動的強大感到震撼！
首先，我們來看一下具體的需求吧。你可以先看下面的這兩張圖，然后再看文字描述，可能會更容易理解。
沒有觸發(fā)時的狀態(tài)
觸發(fā)后的狀態(tài)
我們需求有下面幾點：
1、默認情況下，只顯示一級菜單，二級菜單不顯
2、存在二級菜單的情況下，在二級菜單沒有顯示的情況下，點擊一級菜單，一級菜單的樣式發(fā)生改變，二級菜單不顯示
3、存在二級菜單的情況下，一級菜單已經(jīng)點擊過之后，再點擊一級菜單，會顯示二級菜單
我們舉例子說明一下，當前的一級菜單有默認、有貨優(yōu)先、直營優(yōu)先，只有默認是含有二級菜單的，比如現(xiàn)在焦點在有貨優(yōu)先上面，那么我們點擊默認的時候，不會彈出默認下面的二級菜單，只會改變一級菜單默認的樣式（字體和三角形的顏色），當再次點擊一級菜單默認的時候，其下面的二級菜單就顯示出來了。
需求分析完成后，我們開始編寫代碼吧。
一、創(chuàng)建篩選器數(shù)據(jù)結(jié)構(gòu)
跟以前的開發(fā)方式不同，我們首先要創(chuàng)建數(shù)據(jù)結(jié)構(gòu)，而不是編寫模版代碼。
1、設(shè)置篩選器數(shù)據(jù)結(jié)構(gòu)
// 數(shù)據(jù)源
optionsDatas: [
{
id: '1',
name: '默認',
subs: [
{
id: '1',
name: '默認',
},
{
id: '1-2',
name: '價格由高到低',
},
{
id: '1-3',
name: '銷量由高到低',
},
]
},
{
id: '2',
name: '有貨優(yōu)先',
subs: []
},
{
id: '3',
name: '直營優(yōu)先',
subs: []
}
]
這個數(shù)據(jù)結(jié)構(gòu)設(shè)計得是非常出彩的，此處您可能還看不到，在下面具體的應(yīng)用中你就能感覺到它的優(yōu)美呢。
2、設(shè)置二級菜單（選中項subs）的數(shù)據(jù)結(jié)構(gòu)
// 選中的篩選項
selectOption: {},
// 是否展開子篩選項
sShowSubContent: false
當然，我們要在created鉤子函數(shù)中對selecOption進行賦值操作，保證其具有初始值。
created: function () {
// 設(shè)置初始選中項
this.selectOption = this.optionsDatas[0];
}
二、設(shè)置模版代碼
下面是完整模版代碼，內(nèi)容相對比較多，我們按照功能逐塊進行講解吧。
<div class="goods-options z-index-2">
<ul class="goods-options-list">
<li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
<a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
<span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
:class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
></span>
</a>
</li>
</ul>
<transition name="fold-height">
<div class="options-sub-content z-index-2" v-show="isShowSubContent">
<ul class="options-sub-content-list">
<li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
<a class="options-sub-content-list-item-content">
<span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="@img/options-select.svg" alt="" srcset="">
</a>
</li>
</ul>
</div>
</transition>
<div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false"></div>
</div>
1、渲染一級菜單
<ul class="goods-options-list">
<li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
<a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
<span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
:class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
></span>
</a>
</li>
</ul>
1.1、一級菜單的樣式變化
一級菜單的文字顏色的變化需要滿足下面的規(guī)則，也就是selectOption.id === item.id。也就是說在當選中是一級菜單是默認的時候，我們就要其文字顏色改編成紅色。
:class="{'goods-options-item-content-name-active' : selectOption.id === item.id}"
相應(yīng)地，三角形的顏色和箭頭的朝向也需要進行更改。更改的邏輯如下。當然，如果一級菜單沒有對應(yīng)的二級菜單時，三角形就不應(yīng)該顯示。
:class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
v-if="item.subs.length > 0"
1.2、一級菜單的點擊事件onOptionsItemClick(item, index)實現(xiàn)的主要功能是改變一次菜單的樣式和二級菜單的顯示/隱藏。具體的功能如下分析所示：
1、如果子選項視圖處于展開狀態(tài)，則關(guān)閉掉子選項視圖
2、展示子選項視圖
2.1、選中項包含子選項
2.2、當前篩選項處于選中狀態(tài)
3、設(shè)置選中項為用戶點擊的選項
onOptionsItemClick: function (item, index) {
// 如果子選項視圖處于展開狀態(tài)，則關(guān)閉掉子選項視圖
if (this.isShowSubContent) {
this.isShowSubContent = false;
return;
}
// 1、選中項包含子選項
// 2、當前篩選項處于選中狀態(tài)
// 展示子選項視圖
if (item.subs.length > 0 && this.selectOption.id === item.id) {
this.isShowSubContent = true;
}
// 設(shè)置選中項為用戶點擊的選項
this.selectOption = item;
}
2、渲染二級菜單
<transition name="fold-height">
<div class="options-sub-content z-index-2" v-show="isShowSubContent">
<ul class="options-sub-content-list">
<li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
<a class="options-sub-content-list-item-content">
<span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="@img/options-select.svg" alt="" srcset="">
</a>
</li>
</ul>
</div>
</transition>
2.1、二級菜單樣式的變化
二級菜單的樣式變化需要滿足下面的規(guī)則。這個規(guī)則基本上跟一級菜單的一致。
:class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}"
對于右側(cè)的對勾，需要符合下面的邏輯。
v-show="selectOption.id === item.id"
2.2、二級菜單的點擊事件onSubOptionsItemClick(item, index)，這個事件需要實現(xiàn)功能如下：
1、設(shè)置選中項為用戶點擊的選項
2、將選中項置頂
3、關(guān)閉子選項視圖
onSubOptionsItemClick: function (subItem, index) {
// 遍歷所有的可選項，將選中項置頂
this.optionsDatas.forEach(options => {
options.subs.forEach (subOptions => {
if (subOptions.id === subItem.id) {
options.id = subOptions.id;
options.name = subOptions.name;
}
})
});
// 關(guān)閉子選項視圖
this.isShowSubContent = false;
}
2.3、二級菜單動畫的實現(xiàn)
二級菜單動畫的實現(xiàn)，我們采用了vue的過度動畫。其使用到的css動畫如下：
/**
子選項內(nèi)容區(qū)展開動畫，當 v-if=“true” 的時候調(diào)用
當子選項部分展開時，初始狀態(tài)max-height為0，結(jié)束狀態(tài)max-height為180
*/
.fold-height-enter-active {
animation-duration: .3s;
animation-name: fold-height-open;
}
@keyframes fold-height-open {
0% {
max-height: 0;
}
100% {
max-height: px2rem(180);
}
}
/**
子選項內(nèi)容區(qū)關(guān)閉動畫，當 v-if=false 的時候調(diào)用
當子選項部分關(guān)閉時，初始狀態(tài)max-height為180，結(jié)束狀態(tài)max-height為0
*/
.fold-height-leave-active {
animation-duration: .3s;
animation-name: fold-height-close;
}
@keyframes fold-height-close {
0% {
max-height: px2rem(180);
}
100% {
max-height: 0;
}
}
2、遮罩的顯示/隱藏
最后就剩下一個遮罩的樣式和邏輯了，這個比較簡單，其邏輯如下：此處不在進行多余的解釋。
<div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false"> </div>
至此，我們所有的邏輯分析和代碼實現(xiàn)都已完成。設(shè)計的最巧妙的就是這個數(shù)據(jù)結(jié)構(gòu)，完全滿足了我們業(yè)務(wù)需求。在下面是完整的代碼，希望對您有用。
<template>
<div class="goods-options z-index-2">
<ul class="goods-options-list">
<li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
<a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
<span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
:class="[isShowSubContent && selectOption.id === item.id ? 'goods-options-item-content-caret-open' : 'goods-options-item-content-caret-close']"
></span>
</a>
</li>
</ul>
<transition name="fold-height">
<div class="options-sub-content z-index-2" v-show="isShowSubContent">
<ul class="options-sub-content-list">
<li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
<a class="options-sub-content-list-item-content">
<span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
<img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="@img/options-select.svg" alt="" srcset="">
</a>
</li>
</ul>
</div>
</transition>
<div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false"></div>
</div>
</template>
<script>
export default {
data: function () {
return {
// 數(shù)據(jù)源
optionsDatas: [
{
id: '1',
name: '默認',
subs: [
{
id: '1',
name: '默認',
},
{
id: '1-2',
name: '價格由高到低',
},
{
id: '1-3',
name: '銷量由高到低',
},
]
},
{
id: '2',
name: '有貨優(yōu)先',
subs: []
},{
id: '3',
name: '直營優(yōu)先',
subs: []
}
],
// 選中的篩選項
selectOption: {},
// 是否展開子篩選項
isShowSubContent: false
}
},
created: function () {
// 設(shè)置初始選中項
this.selectOption = this.optionsDatas[0];
},
methods: {
/**
* 1、如果子選項視圖處于展開狀態(tài)，則關(guān)閉掉子選項視圖
* 2、展示子選項視圖
* 1、選中項包含子選項
* 2、當前篩選項處于選中狀態(tài)
* 3、設(shè)置選中項為用戶點擊的選項
*/
onOptionsItemClick: function (item, index) {
// 如果子選項視圖處于展開狀態(tài)，則關(guān)閉掉子選項視圖
if (this.isShowSubContent) {
this.isShowSubContent = false;
return;
}
// 1、選中項包含子選項
// 2、當前篩選項處于選中狀態(tài)
// 展示子選項視圖
if (item.subs.length > 0 && this.selectOption.id === item.id) {
this.isShowSubContent = true;
}
// 設(shè)置選中項為用戶點擊的選項
this.selectOption = item;
},
/**
* 1、設(shè)置選中項為用戶點擊的選項
* 2、將選中項置頂
* 3、關(guān)閉子選項視圖
*/
onSubOptionsItemClick: function (subItem, index) {
// 設(shè)置選中項為用戶點擊的選項
// this.selectOption = subItem;
// 遍歷所有的可選項，將選中項置頂
this.optionsDatas.forEach(options => {
options.subs.forEach (subOptions => {
if (subOptions.id === subItem.id) {
options.id = subOptions.id;
options.name = subOptions.name;
}
})
});
// 關(guān)閉子選項視圖
this.isShowSubContent = false;
},
},
watch: {
/**
* 當選擇項發(fā)生變化的時候，需要通知父組件
*/
selectOption: function (newValue, oldValue) {
this.$emit('optionsChange', newValue);
}
}
}
</script>
<style lang="scss" scoped>
@import '@css/style.scss';
.goods-options {
width: 100%;
border-bottom: 1px solid $lineColor;
&-list {
display: flex;
width: 100%;
height: $goodsOptionsHeight;
background-color: white;
.goods-options-item {
flex-grow: 1;
&-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&-name {
font-size: $infoSize;
margin-right: $marginSize;
&-active{
color: $mainColor;
}
}
// 子選項展開時，三角形的動畫
&-caret {
&-open {
transform:rotate(-180deg);
transition: all .3s;
}
&-close {
transform:rotate(0deg);
transition: all .3s;
}
}
}
}
}
// 子選項內(nèi)容區(qū)
.options-sub-content {
// 脫離標準文檔流
position: absolute;
width: 100%;
max-height: px2rem(180);
overflow: hidden;
overflow-y: auto;
background-color: white;
&-list {
&-item {
&-content {
display: flex;
align-items: center;
border-top: 1px solid $lineColor;
padding: $marginSize;
height: px2rem(44);
box-sizing: border-box;
&-name {
font-size: $infoSize;
display: inline-block;
flex-grow: 1;
&-active{
color: $mainColor;
}
}
&-select {
width: px2rem(18);
height: px2rem(18);
}
}
}
}
}
/**
子選項內(nèi)容區(qū)展開動畫，當 v-if=“true” 的時候調(diào)用
當子選項部分展開時，初始狀態(tài)max-height為0，結(jié)束狀態(tài)max-height為180
*/
.fold-height-enter-active {
animation-duration: .3s;
animation-name: fold-height-open;
}
@keyframes fold-height-open {
0% {
max-height: 0;
}
100% {
max-height: px2rem(180);
}
}
/**
子選項內(nèi)容區(qū)關(guān)閉動畫，當 v-if=false 的時候調(diào)用
當子選項部分關(guān)閉時，初始狀態(tài)max-height為180，結(jié)束狀態(tài)max-height為0
*/
.fold-height-leave-active {
animation-duration: .3s;
animation-name: fold-height-close;
}
@keyframes fold-height-close {
0% {
max-height: px2rem(180);
}
100% {
max-height: 0;
}
}
}
</style>
總結(jié)
到此這篇關(guān)于vue商城中商品“篩選器”功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue商品篩選器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
webpack4+express+mongodb+vue實現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實現(xiàn)增刪改查的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應(yīng)的PDF
這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下2023-08-08
vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue定義全局變量和全局方法的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法
這篇文章主要介紹了解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲在一個單獨的地方。這使得狀態(tài)的管理和維護變得更加容易2023-03-03
Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學跟著小編來看看吧2024-04-04
這篇文章主要介紹了怎樣查看vue-cli的安裝位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題
這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06