vue尚品汇商城项目-day0426.排序操作（难点）

Posted 2023-04-03 刘大猫.

文章目录

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

26.排序操作（难点）

26.1使用阿里的iconfont

1. 在线地址: 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. 在组件中使用
   <i class=”iconfont icondown”>可以通过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.加入购物车操作（难点）】

vue尚品汇商城项目-day07vue插件-49.（了解）自定义插件

文章目录

• • 49.（了解）自定义插件
• 本人其他相关文章链接

49.（了解）自定义插件

自定义插件好处：

1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

使用流程：

1. 新建xx.js文件自定义插件并提供暴露对象。
2. 在src/main.js中引入自定义插件并使用。

修改代码：

首先创建plugins文件夹，新建myPlugins.js文件

//Vue插件一定暴露一个对象
let myPlugins = ;

myPlugins.install = function(Vue,options)
    //Vue.prototype.$bus:任何组件都可以使用
    //Vue.directive自定义指令
    //Vue.component注册组件
    //Vue.filter过滤
    //全局指令
    Vue.directive(options.name,(element,params)=>
        element.innerHTML = params.value.toUpperCase();
        console.log(params);
    );


//对外暴露组件对象
export default myPlugins;

src/main.js

//引入自定义插件
import myPlugins from '@/plugins/myPlugins';
Vue.use(myPlugins,
    name:'upper'
);

本人其他相关文章链接

1.vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】