The title says “ crumbs ” Is the small square shown in the figure below , Various attributes of items can be filtered conveniently according to the needs of users .
utilize vue Designing this bread crumb requires a lot of requests
Breadcrumbs include breadcrumbs that are clicked in all product categories on the home page , Bread crumbs generated by entering keywords , Click on the bread crumbs produced by the brand below , There are also bread crumbs that click on the sales attribute .
Parameters brought to the server
data(){ return{ // Parameters brought to the server searchParams:{ // Primary classification id "category1Id": "",
// Secondary classification id "category2Id": "", // Three level classification id "category3Id": "", // Category name "categoryName":
"", // key word "keyword": "", // sort "order": "", // Pager , Represents the current page number "pageNo": 1,
// Represents how much data is displayed on a page "pageSize": 5, // Platform sales attributes "props": [], // brand "trademark": "" } } }
Structure of various bread crumbs
<ul class="fl sui-tag"> <!-- Classified bread crumbs --> <li class="with-x" v-if
="searchParams.categoryName">{{searchParams.categoryName}}<i
@click="removeCategoryName">×</i></li> <!-- Keywords bread crumbs --> <li class="with-x" v-if
="searchParams.keyword">{{searchParams.keyword}}<i
@click="removeKeyword">×</i></li> <!-- Brand bread crumbs --> <li class="with-x" v-if
="searchParams.trademark">{{searchParams.trademark.split(":")[1]}}<i
@click="removeTrademark">×</i></li> <!-- Attribute value display of platform sales --> <li class="with-x"
v-for ="(attrValue,index) in searchParams.props" :key="index">{
{attrValue.split(":")[1]}}<i @click="removeAttr">×</i></li> </ul>
<!--selector--> <SearchSelector @trademarkInfo ="trademarkInfo"
@attrInfo="attrInfo"/>
When removing small flour crumbs , Also change the route , include query Parameters and params parameter
beforeMount(){ // Complex writing // Click the keyword or enter the keyword to search // this.searchParams.category1Id
= this.$route.query.category1Id // this.searchParams.category2Id =
this.$route.query.category2Id // this.searchParams.category3Id =
this.$route.query.category3Id // this.searchParams.categoryName =
this.$route.query.categoryName // this.searchParams.keyword =
this.$route.params.keyword //Object.assign:ES6 New syntax
Object.assign(this.searchParams,this.$route.query,this.$route.params) },
methods:{ // Send a request to the server to get search Module data getData(){
this.$store.dispatch('getSearchList',this.searchParams) }, // Delete the name of the category bread crumbs
removeCategoryName(){ // Just empty the data of the server , Re request required
// The parameter description of the server is optional , If the attribute value is empty, the string will still bring the corresponding field to the server
// But change the corresponding field to undefined, Currently, this field will not be brought to the server this.searchParams.categoryName=undefined
this.searchParams.category1Id=undefined this.searchParams.category2Id=undefined
this.searchParams.category3Id=undefined this.getData() // The address bar also needs to be modified : Route jump
// rigorous ： The original intention is to delete query, If the path is reset params parameter , Should not be deleted Should be retained if(this.$route.params){
this.$router.push({name:"search",params:this.$route.params}) } }, // Delete keyword
removeKeyword(){ // Parameters brought to the server searchparams of keyword Empty this.searchParams.keyword =
undefined // Request again this.getData() // Notify sibling components Header Clear keyword this.$bus.$emit("clear")
// Route jump if(this.$route.query){
this.$router.push({name:"search",query:this.$route.query}) } }, // Custom event callback of brand information
trademarkInfo(trademark){ //1, Sort out the parameters of the brand field this.searchParams.trademark =
`${trademark.tmId}:${trademark.tmName}` // Request again for search Module data this.getData() },
// Delete brand information removeTrademark(){ // Leave the brand information blank this.searchParams.trademark = undefined
// Request again this.getData() }, // Callback function for collecting platform properties --- Custom event attrInfo(attr,attrValue){ let
props = `${attr.attrId}:${attrValue}:${attr.attrName}` // Array de duplication
if(this.searchParams.props.indexOf(props)==-1){
this.searchParams.props.push(props) } // Request again this.getData() }, // Delete sale attribute
removeAttr(index){ this.searchParams.props.splice(index,1) // Request again
this.getData() } }, // Data monitoring ： Monitor whether the components have changed , If there is a change , Send request again watch:{
// Monitor whether the routing information changes , If there is a change , Send request again $route(newValue,oldValue){ // Organize the data brought to the server before sending the request again
Object.assign(this.searchParams,this.$route.query,this.$route.params)
// Send again ajax request this.getData() // End of each request , The corresponding 123 Level classified id Empty , Let him accept the new one id
this.searchParams.category1Id=undefined this.searchParams.category2Id=undefined
this.searchParams.category3Id=undefined } }
The selling attribute of the platform is a sub component
<!-- Brand place --> <ul class="logo-list"> <li v-for ="trademark in trademarkList"
:key="trademark.tmId" @click="tradeMarkHandler(trademark)">{
{trademark.tmName}}</li> </ul> </div> <div class="ext"> <a
href="javascript:void(0);" class="sui-btn"> Multiple choice </a> <a
href="javascript:void(0);"> more </a> </div> </div> <!-- Where the platform sells properties --> <div
class="type-wrap" v-for = "attr in attrsList" :key="attr.attrId"> <!--
Platform sales attributes ： For example, color --> <div class="fl key">{{attr.attrName}}</div> <div class="fl
value"> <ul class="type-list"> <!-- The attribute value of the corresponding selling attribute of the platform ： Pink ... --> <li
v-for="attrValue in attr.attrValueList" :key="attrValue"
@click="attrInfo(attr,attrValue)"> <a>{{attrValue}}</a> </li> </ul> </div> <div
class="fl ext"></div> </div>
request Leverage custom events
methods:{ // Brand processing function tradeMarkHandler(trademark){ // Click on the brand
You still need to sort out the parameters , Send a request to the server to obtain the corresponding amount data for display // In which component is the request made // Parent component
Because the parent component searchParams Parameters are parameters brought to the server , Subcomponent bar the brand information you click , Need to pass the past to the parent component ---- Custom event
this.$emit('trademarkInfo',trademark) }, // Click worthy events of platform sales attributes
attrInfo(attr,attrValue){ this.$emit("attrInfo",attr,attrValue) } }
Technology