@[toc]
26.排序操作（难点）
26.1使用阿里的iconfont
- 在线地址: https://www.iconfont.cn/
- 注册并登陆
- 创建一个可以包含需要的所有图标的项目
- 搜索图标并添加到购物车
- 将购物车中的图标添加到指定项目
- 修改图标的名称
- 选择Font class的使用方式, 并点击生成在线样式url
- 在index页面中引入此图标的在线样式链接: \
- 在组件中使用
可以通过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>综合<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></a>
</li>
<li :class="{active: isTwo}" @click="changeOrder('2')">
<a>价格<span v-show="isTwo" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></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"谁就会有颜色。
<li :class="{active: isOne}">
注意点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
<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span>
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组件）】
2.vue尚品汇商城项目-day04【25.面包屑处理关键字】
3.vue尚品汇商城项目-day04【26.排序操作（难点）】
4.vue尚品汇商城项目-day04【27.分页器静态组件（难点）】
5.vue尚品汇商城项目-day04【28.详情页面Detail】
6.vue尚品汇商城项目-day04【29.加入购物车操作（难点）】
