vue尚品汇商城项目-day04【26.排序操作（难点）】

深碍√TFBOYSˉ_ 2024-03-24 13:16 12阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  26.排序操作（难点）
     *   *  26.1使用阿里的iconfont
         *  26.2排序操作
 *  本人其他相关文章链接

### 26.排序操作（难点） ###

#### 26.1使用阿里的iconfont ####

1. 在线地址: [https://www.iconfont.cn/][https_www.iconfont.cn]
2. 注册并登陆
3. 创建一个可以包含需要的所有图标的项目
4. 搜索图标并添加到购物车
5. 将购物车中的图标添加到指定项目
6. 修改图标的名称
7. 选择Font class的使用方式, 并点击生成在线样式url
8. 在index页面中引入此图标的在线样式链接: <link rel=“stylesheet” href=“http://at.alicdn.com/t/font\_1766283\_dobjk7xxze7.css”>
9. 在组件中使用 
 可以通过color改变颜色, 通过font-size改变大小

#### 26.2排序操作 ####

排序操作难点：

*  考虑点1：谁应该有类名class=“active”？
    
    答案：order为1，综合加类名，order为2，价格加类名。
 *  考虑点2：谁应该有箭头？

答案：谁有类名，谁就有箭头

*  考虑点3：如何区分是向上↑还是向下↓？

答案：取决于order中是asc还是desc

*  考虑点4：如何区分当前点击是点的综合还是价格，需要向上向下动态展示？
    
    答案：添加点击事件，去动态判断设置1、2、asc、desc，并拼接order属性值

代码修改：

> public/index.html

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3963551_nocag8pfqor.css">

> src/pages/Search/index.vue

<ul class="sui-nav">
 <li :class="{active: isOne}" @click="changeOrder('1')">
 <a>综合</a>
 </li>
 <li :class="{active: isTwo}" @click="changeOrder('2')">
 <a>价格</a>
 </li>
 </ul>
 
 methods: {
 	//排序的操作
 changeOrder(flag) {
 //flag:用户每一次点击li标签的时候，用于区分是综合（1）还是价格（2）
 //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
 let originOrder = this.searchParams.order;
 let oiriginFlag = originOrder.split(":")[0];
 let oiriginSort = originOrder.split(":")[1];
 //新的排序方式
 let newOrder = '';
 //判断的是多次点击的是不是同一个按钮
 if (flag == oiriginFlag) {
 newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
 } else {
 //点击不是同一个按钮
 newOrder = `${flag}:${oiriginSort}`
 }
 //需要给order重新赋值
 this.searchParams.order = newOrder;
 //再次发请求
 this.getData()
 }
 }
 
 computed:{
 //判断order属性中是否包含1
 isOne() {
 return this.searchParams.order.indexOf("1") != -1;
 },
 //判断order属性中是否包含2
 isTwo() {
 return this.searchParams.order.indexOf("2") != -1;
 },
 //判断order属性中是否包含asc
 isAsc() {
 return this.searchParams.order.indexOf("asc") != -1;
 },
 //判断order属性中是否包含desc
 isDesc() {
 return this.searchParams.order.indexOf("desc") != -1;
 },
 }

注意点1：li标签谁有class="active"谁就会有颜色。

![在这里插入图片描述][d512388c08bc4a4da70ad00203a3d088.png_pic_center]

注意点2：

排序方式 1: 综合、2: 价格、asc: 升序、desc: 降序

示例: “1:desc”

排序目前假设只有【综合、价格】，分asc升序、desc降序，那么总共结果会有4种【1:asc 、1:dexc、2:asc、2:desc】

注意点3：

> 问题：如何区分用户点击的是“综合”排序还是“价格”排序？

答案：根据order参数中的数字是1（综合）还是2（价格）进行区分。

注意点4：

> 问题：如何添加类名？

答案：有2种方式，方式1采用标签上直接加判断，方式2采用计算属性返回

方式1采用标签上直接加判断：
 <li :class="{active: searchParams.order.indexOf("1") != -1}">
 ------------------------------------------------------------------------------
 方式2采用计算属性返回：
 computed:{
 //判断order属性中是否包含1
 isOne() {
 return this.searchParams.order.indexOf("1") != -1;
 }
 }

注意点5：箭头采用第三方组件（阿里图标库），练习使用

*  第一步：百度搜索“阿里图标库”，把搜索想要的图标添加到自己项目中
 *  第二步：点击“在线生成链接”，把url在public/index.html中引入样式
 *  第三步：使用样式，格式为class=“iconfont icon-icon-arrow-top4”，切记前缀一定要写iconfont 才能生效

注意点6：

> 问题：如何区分是向上↑还是向下↓？

答案：取决于order中是asc还是desc

computed:{
 //判断order属性中是否包含asc
 isAsc() {
 return this.searchParams.order.indexOf("asc") != -1;
 },
 //判断order属性中是否包含desc
 isDesc() {
 return this.searchParams.order.indexOf("desc") != -1;
 },
 }

注意点7：

> 问题：如何区分当前点击是点的综合还是价格，需要向上向下动态展示？

答案：定义点击事件

<li :class="{active: isOne}" @click="changeOrder('1')">
 <li :class="{active: isTwo}" @click="changeOrder('2')">
 
 //排序的操作
 changeOrder(flag) {
 //flag:用户每一次点击li标签的时候，用于区分是综合（1）还是价格（2）
 //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
 let originOrder = this.searchParams.order;
 let oiriginFlag = originOrder.split(":")[0];
 let oiriginSort = originOrder.split(":")[1];
 //新的排序方式
 let newOrder = '';
 //判断的是多次点击的是不是同一个按钮
 if (flag == oiriginFlag) {
 newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
 } else {
 //点击不是同一个按钮
 newOrder = `${flag}:${oiriginSort}`
 }
 //需要给order重新赋值
 this.searchParams.order = newOrder;
 //再次发请求
 this.getData()
 }

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】][vue_-day04_24._Search]  
2.[vue尚品汇商城项目-day04【25.面包屑处理关键字】][vue_-day04_25.]  
3.[vue尚品汇商城项目-day04【26.排序操作（难点）】][vue_-day04_26.]  
4.[vue尚品汇商城项目-day04【27.分页器静态组件（难点）】][vue_-day04_27.]  
5.[vue尚品汇商城项目-day04【28.详情页面Detail】][vue_-day04_28._Detail]  
6.[vue尚品汇商城项目-day04【29.加入购物车操作（难点）】][vue_-day04_29.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2954cf2a0379475f902874c62d6cd4b0.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[d512388c08bc4a4da70ad00203a3d088.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7888a90bcca140acacc763811aba0fae.png
[vue_-day04_24._Search]: https://blog.csdn.net/a924382407/article/details/129907104
[vue_-day04_25.]: https://blog.csdn.net/a924382407/article/details/129907133
[vue_-day04_26.]: https://blog.csdn.net/a924382407/article/details/129907270
[vue_-day04_27.]: https://blog.csdn.net/a924382407/article/details/129907322
[vue_-day04_28._Detail]: https://blog.csdn.net/a924382407/article/details/129907372
[vue_-day04_29.]: https://blog.csdn.net/a924382407/article/details/129907505