Vue2电商实战项目(三)

qinganning / 2023-05-12 / 原文

`排序`的操作

要求的数据格式

- 数据格式说明
    - '1'表示'综合排序'
    - '2'表示'价格排序'
    - 'asc'表示'升序'
    - 'desc'表示降序
    
- 项目的数据格式的样子
	- 1:asc
	- 1:desc
	- 2:asc
	- 2:desc

### Search.index.vue
......
"order": "1:desc", // 项目的默认排序(综合降序排列)

class=active样式的显示: 由order参数值来决定

### Search.index.vue
......
<ul class="sui-nav">
  <!--找到'1'就展示class样式-->
  <li :class="{active:searchParams.order.indexOf('1') != -1}">
    <a href="#">综合</a>
  </li>
  <!--找到'2'就展示class样式-->
  <!--'1'和'2'不可能同时存在-->
  <li :class="{active:searchParams.order.indexOf('2') != -1}">
    <a href="#">价格⬆</a>
  </li>
</ul>

简化一下代码,修改成计算属性的形式

computed:{
 ......
  isOne(){
    return this.searchParams.order.indexOf('1') != -1
  },
  isTwo(){
    return this.searchParams.order.indexOf('2') != -1
  }
},

......
<ul class="sui-nav">
  <li :class="{active:isOne}"> <!--应用-->
    <a href="#">综合</a>
  </li>
  <li :class="{active:isTwo}">
    <a href="#">价格</a>
  </li>
</ul>

在线引入阿里icon图标库

### public.index.html
<head>
  ......
  <!--先引入全局css样式(阿里后台有提供代码)-->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4064138_5e7pv6qsh5g.css">
</head>

### 举例使用
......
<span class="iconfont icon-down"></span>

本项目中,我们引入两个箭头(向上升 && 向下降)

- 设计思路: 
	- 当 order值包含'asc'时,就展示'上升箭头'
	- 当 order值包含'desc'时,就展示'下降箭头'

<ul class="sui-nav">
  <li :class="{active:isOne}">
  	<!--展示的时候,添加两个class样式: iconfont && icon-xxx -->
  	<!--语法注意事项: 如果不加引号,icon-down写法会报'-'错误-->
    <a href="#">综合<span v-show="isOne" class="iconfont" :class="{'icon-down':isDesc,'icon-ttd-copy':isAsc}"></span></a>
  </li>
  <li :class="{active:isTwo}">
    <a href="#">价格<span v-show="isTwo" class="iconfont" :class="{'icon-down':isDesc,'icon-ttd-copy':isAsc}"></span></a>
  </li>
</ul>
......
computed:{
  
  isOne(){
    return this.searchParams.order.indexOf('1') != -1
  },
  isTwo(){
    return this.searchParams.order.indexOf('2') != -1
  },
  isAsc(){
    // 若找到asc
    return this.searchParams.order.indexOf('asc') != -1
  },
  // 若找到desc
  isDesc(){
    return this.searchParams.order.indexOf('desc') != -1
  }
},