vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
在使用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)文章希望大家以后多多支持腳本之家!
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- vue分類篩選filter方法簡(jiǎn)單實(shí)例
- vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能思路詳解
- 基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
- vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
- VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
- vue實(shí)現(xiàn)前端列表多條件篩選
- vue+element table表格實(shí)現(xiàn)動(dòng)態(tài)列篩選的示例代碼
- vue3自定義動(dòng)態(tài)不同UI組件篩選框案例
相關(guān)文章
webpack4+express+mongodb+vue實(shí)現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實(shí)現(xiàn)增刪改查的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0,感興趣的朋友一起看看吧2022-06-06解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法
這篇文章主要介紹了解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vue3實(shí)現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來看看吧2024-04-04解決el-cascader在IE11瀏覽器中加載頁面自動(dòng)展開下拉框問題
這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁面自動(dòng)展開下拉框問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06