vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼

更新時(shí)間：2020年07月01日 08:41:13 作者：雪燃?xì)w來

這篇文章主要介紹了vue商城中商品“篩選器”功能的實(shí)現(xiàn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在使用vue搭建商城項(xiàng)目的時(shí)候，要實(shí)現(xiàn)一個(gè)商品篩選器的功能，在完成之后，再一次被vue的數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大感到震撼！

首先，我們來看一下具體的需求吧。你可以先看下面的這兩張圖，然后再看文字描述，可能會(huì)更容易理解。

沒有觸發(fā)時(shí)的狀態(tài)

觸發(fā)后的狀態(tài)

       我們需求有下面幾點(diǎn)：
       1、默認(rèn)情況下，只顯示一級(jí)菜單，二級(jí)菜單不顯
       2、存在二級(jí)菜單的情況下，在二級(jí)菜單沒有顯示的情況下，點(diǎn)擊一級(jí)菜單，一級(jí)菜單的樣式發(fā)生改變，二級(jí)菜單不顯示
       3、存在二級(jí)菜單的情況下，一級(jí)菜單已經(jīng)點(diǎn)擊過之后，再點(diǎn)擊一級(jí)菜單，會(huì)顯示二級(jí)菜單
       我們舉例子說明一下，當(dāng)前的一級(jí)菜單有默認(rèn)、有貨優(yōu)先、直營優(yōu)先，只有默認(rèn)是含有二級(jí)菜單的，比如現(xiàn)在焦點(diǎn)在有貨優(yōu)先上面，那么我們點(diǎn)擊默認(rèn)的時(shí)候，不會(huì)彈出默認(rèn)下面的二級(jí)菜單，只會(huì)改變一級(jí)菜單默認(rèn)的樣式（字體和三角形的顏色），當(dāng)再次點(diǎn)擊一級(jí)菜單默認(rèn)的時(shí)候，其下面的二級(jí)菜單就顯示出來了。
       需求分析完成后，我們開始編寫代碼吧。

一、創(chuàng)建篩選器數(shù)據(jù)結(jié)構(gòu)

跟以前的開發(fā)方式不同，我們首先要?jiǎng)?chuàng)建數(shù)據(jù)結(jié)構(gòu)，而不是編寫模版代碼。

1、設(shè)置篩選器數(shù)據(jù)結(jié)構(gòu)

// 數(shù)據(jù)源
optionsDatas: [
 {
  id: '1',
  name: '默認(rèn)',
  subs: [
  {
   id: '1',
   name: '默認(rèn)',
  },
  {
   id: '1-2',
   name: '價(jià)格由高到低',
  },
  {
   id: '1-3',
   name: '銷量由高到低',
  },
  ]
 },
 {
  id: '2',
  name: '有貨優(yōu)先',
  subs: []
 },
 {
  id: '3',
  name: '直營優(yōu)先',
  subs: []
 }
]

這個(gè)數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)得是非常出彩的，此處您可能還看不到，在下面具體的應(yīng)用中你就能感覺到它的優(yōu)美呢。

2、設(shè)置二級(jí)菜單（選中項(xiàng)subs）的數(shù)據(jù)結(jié)構(gòu)

// 選中的篩選項(xiàng)
selectOption: {},
// 是否展開子篩選項(xiàng)
sShowSubContent: false
 當(dāng)然，我們要在created鉤子函數(shù)中對(duì)selecOption進(jìn)行賦值操作，保證其具有初始值。

created: function () {
 // 設(shè)置初始選中項(xiàng)
 this.selectOption = this.optionsDatas[0];
}

二、設(shè)置模版代碼

下面是完整模版代碼，內(nèi)容相對(duì)比較多，我們按照功能逐塊進(jìn)行講解吧。

<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、渲染一級(jí)菜單
 <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、一級(jí)菜單的樣式變化

一級(jí)菜單的文字顏色的變化需要滿足下面的規(guī)則，也就是selectOption.id === item.id。也就是說在當(dāng)選中是一級(jí)菜單是默認(rèn)的時(shí)候，我們就要其文字顏色改編成紅色。

:class="{'goods-options-item-content-name-active' : selectOption.id === item.id}"

相應(yīng)地，三角形的顏色和箭頭的朝向也需要進(jìn)行更改。更改的邏輯如下。當(dāng)然，如果一級(jí)菜單沒有對(duì)應(yīng)的二級(jí)菜單時(shí)，三角形就不應(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、一級(jí)菜單的點(diǎn)擊事件onOptionsItemClick(item, index)實(shí)現(xiàn)的主要功能是改變一次菜單的樣式和二級(jí)菜單的顯示/隱藏。具體的功能如下分析所示：
       1、如果子選項(xiàng)視圖處于展開狀態(tài)，則關(guān)閉掉子選項(xiàng)視圖
       2、展示子選項(xiàng)視圖
              2.1、選中項(xiàng)包含子選項(xiàng)
              2.2、當(dāng)前篩選項(xiàng)處于選中狀態(tài)
       3、設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)

onOptionsItemClick: function (item, index) {
 // 如果子選項(xiàng)視圖處于展開狀態(tài)，則關(guān)閉掉子選項(xiàng)視圖
 if (this.isShowSubContent) {
  this.isShowSubContent = false;
  return;
 }
 // 1、選中項(xiàng)包含子選項(xiàng)
 // 2、當(dāng)前篩選項(xiàng)處于選中狀態(tài)
 // 展示子選項(xiàng)視圖
 if (item.subs.length > 0 && this.selectOption.id === item.id) {
  this.isShowSubContent = true;
 } 
  // 設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
 this.selectOption = item;
}

2、渲染二級(jí)菜單

<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、二級(jí)菜單樣式的變化
二級(jí)菜單的樣式變化需要滿足下面的規(guī)則。這個(gè)規(guī)則基本上跟一級(jí)菜單的一致。

:class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}"

對(duì)于右側(cè)的對(duì)勾，需要符合下面的邏輯。

v-show="selectOption.id === item.id"

2.2、二級(jí)菜單的點(diǎn)擊事件onSubOptionsItemClick(item, index)，這個(gè)事件需要實(shí)現(xiàn)功能如下：
       1、設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
       2、將選中項(xiàng)置頂
       3、關(guān)閉子選項(xiàng)視圖

onSubOptionsItemClick: function (subItem, index) { 
 // 遍歷所有的可選項(xiàng)，將選中項(xiàng)置頂
 this.optionsDatas.forEach(options => {
  options.subs.forEach (subOptions => {
  if (subOptions.id === subItem.id) {
   options.id = subOptions.id;
   options.name = subOptions.name;
   }
  })
 });
 // 關(guān)閉子選項(xiàng)視圖
 this.isShowSubContent = false;
}

2.3、二級(jí)菜單動(dòng)畫的實(shí)現(xiàn)
二級(jí)菜單動(dòng)畫的實(shí)現(xiàn)，我們采用了vue的過度動(dòng)畫。其使用到的css動(dòng)畫如下：

/**
 子選項(xiàng)內(nèi)容區(qū)展開動(dòng)畫，當(dāng) v-if=“true” 的時(shí)候調(diào)用
 當(dāng)子選項(xiàng)部分展開時(shí)，初始狀態(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);
  }
 }
/**
 子選項(xiàng)內(nèi)容區(qū)關(guān)閉動(dòng)畫，當(dāng) v-if=false 的時(shí)候調(diào)用
 當(dāng)子選項(xiàng)部分關(guān)閉時(shí)，初始狀態(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、遮罩的顯示/隱藏

最后就剩下一個(gè)遮罩的樣式和邏輯了，這個(gè)比較簡(jiǎn)單，其邏輯如下：此處不在進(jìn)行多余的解釋。

<div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false">
</div>

至此，我們所有的邏輯分析和代碼實(shí)現(xiàn)都已完成。設(shè)計(jì)的最巧妙的就是這個(gè)數(shù)據(jù)結(jié)構(gòu)，完全滿足了我們業(yè)務(wù)需求。在下面是完整的代碼，希望對(duì)您有用。

<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: '默認(rèn)',
   subs: [
   {
    id: '1',
    name: '默認(rèn)',
   },
   {
    id: '1-2',
    name: '價(jià)格由高到低',
   },
   {
    id: '1-3',
    name: '銷量由高到低',
   },
   ]
  },
  {
   id: '2',
   name: '有貨優(yōu)先',
   subs: []
  },{
   id: '3',
   name: '直營優(yōu)先',
   subs: []
  }
  ],
  // 選中的篩選項(xiàng)
  selectOption: {},
  // 是否展開子篩選項(xiàng)
  isShowSubContent: false
 }
 },
 created: function () {
 // 設(shè)置初始選中項(xiàng)
 this.selectOption = this.optionsDatas[0];
 },
 methods: {
 /**
  * 1、如果子選項(xiàng)視圖處于展開狀態(tài)，則關(guān)閉掉子選項(xiàng)視圖
  * 2、展示子選項(xiàng)視圖
  * 1、選中項(xiàng)包含子選項(xiàng)
  * 2、當(dāng)前篩選項(xiàng)處于選中狀態(tài)
  * 3、設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
  */
 onOptionsItemClick: function (item, index) {
  // 如果子選項(xiàng)視圖處于展開狀態(tài)，則關(guān)閉掉子選項(xiàng)視圖
  if (this.isShowSubContent) {
  this.isShowSubContent = false;
  return;
  }
  // 1、選中項(xiàng)包含子選項(xiàng)
  // 2、當(dāng)前篩選項(xiàng)處于選中狀態(tài)
  // 展示子選項(xiàng)視圖
  if (item.subs.length > 0 && this.selectOption.id === item.id) {
  this.isShowSubContent = true;
  } 
  // 設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
  this.selectOption = item;

  
 },
 /**
  * 1、設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
  * 2、將選中項(xiàng)置頂
  * 3、關(guān)閉子選項(xiàng)視圖
  */
 onSubOptionsItemClick: function (subItem, index) {
  // 設(shè)置選中項(xiàng)為用戶點(diǎn)擊的選項(xiàng)
  // this.selectOption = subItem;
  
  // 遍歷所有的可選項(xiàng)，將選中項(xiàng)置頂
  this.optionsDatas.forEach(options => {
  options.subs.forEach (subOptions => {
   if (subOptions.id === subItem.id) {
   options.id = subOptions.id;
   options.name = subOptions.name;
   }
  })
  });

  // 關(guān)閉子選項(xiàng)視圖
  this.isShowSubContent = false;
 },

 },
 watch: {
 /**
  * 當(dāng)選擇項(xiàng)發(fā)生變化的時(shí)候，需要通知父組件
  */
 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;
   }
   }

   // 子選項(xiàng)展開時(shí)，三角形的動(dòng)畫
   &-caret {
   &-open {
    transform:rotate(-180deg);
    transition: all .3s;
   }

   &-close {
    transform:rotate(0deg);
    transition: all .3s;
   }
   }

  }
  }

 }

 // 子選項(xiàng)內(nèi)容區(qū)
 .options-sub-content {
  // 脫離標(biāo)準(zhǔn)文檔流
  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);
   }

   }

  }
  }
 }

 /**
  子選項(xiàng)內(nèi)容區(qū)展開動(dòng)畫，當(dāng) v-if=“true” 的時(shí)候調(diào)用
  當(dāng)子選項(xiàng)部分展開時(shí)，初始狀態(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);
  }
 }

 /**
  子選項(xiàng)內(nèi)容區(qū)關(guān)閉動(dòng)畫，當(dāng) v-if=false 的時(shí)候調(diào)用
  當(dāng)子選項(xiàng)部分關(guān)閉時(shí)，初始狀態(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商城中商品“篩選器”功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue商品篩選器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: