26. Operação de classificação (dificuldade)

26.1 Use a fonte de ícones de Ali

Endereço online: https://www.iconfont.cn/
cadastre-se e faça login
Crie um projeto que possa conter todos os ícones necessários
Pesquisar ícone e adicionar ao carrinho
Adicione o ícone no carrinho de compras ao item especificado
Alterar o nome do ícone
Escolha como usar a classe Font e clique em Generate Online Style URL
Apresente o link de estilo online deste ícone na página de índice: <link rel="stylesheet" href="http://at.alicdn.com/t/font_1766283_dobjk7xxze7.css">
Use <i class="iconfont icondown"> no componente para alterar a cor por cor e alterar o tamanho por font-size

26.2 Operações de classificação

Dificuldades nas operações de classificação:

Considere o ponto 1: Quem deve ter o nome de classe class="active"?

Resposta: O pedido é 1, o nome da categoria é adicionado de forma abrangente, o pedido é 2 e o preço é adicionado ao nome da categoria.
Considere o ponto 2: Quem deve ficar com a flecha?

Resposta: quem tiver o nome da classe, quem tiver a seta

Considere o ponto 3: Como distinguir se é para cima ↑ ou para baixo ↓?

Resposta: depende se o pedido é asc ou desc

Considere o ponto 4: Como distinguir se o clique atual é uma combinação de pontos ou um preço, que precisa ser exibido dinamicamente para cima e para baixo?

Resposta: Adicione um evento de clique para avaliar dinamicamente e definir 1, 2, asc, desc e unir o valor do atributo de ordem

Modificação do código:

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;
      },
    }

Atente-se ao ponto 1: Quem tiver class="active" na tag li terá a cor.

insira a descrição da imagem aqui

<li :class="{active: isOne}">

Nota 2:

Método de classificação 1: geral, 2: preço, asc: crescente, desc: decrescente

Exemplo: "1:desc"

Atualmente, supõe-se que haja apenas [abrangente, preço] para classificação, dividido em ordem ascendente ascendente e ordem descendente descendente, então haverá um total de 4 resultados [1:asc, 1:dexc, 2:asc, 2 :desc]

Nota 3:

Pergunta: Como distinguir se o usuário clicou na classificação "abrangente" ou na classificação "preço"?

Resposta: Diferencie se o número no parâmetro do pedido é 1 (abrangente) ou 2 (preço).

Nota 4:

Pergunta: Como adicionar o nome da classe?

Resposta: Existem 2 maneiras, a primeira é adicionar julgamento diretamente no rótulo e a segunda é usar o atributo calculado para retornar

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

Nota 5: A seta usa um componente de terceiros (biblioteca de ícones do Alibaba), pratique o uso

Etapa 1: procure no Baidu por "Biblioteca de ícones Ali" e adicione o ícone desejado ao seu projeto
Etapa 2: clique em "Gerar link online" e importe a url para o estilo em public/index.html
Passo 3: Use o estilo, o formato é class="iconfont icon-icon-arrow-top4", lembre-se que o prefixo deve ser escrito iconfont para fazer efeito

Nota 6:

Pergunta: Como distinguir se é para cima ↑ ou para baixo ↓?

Resposta: depende se a ordem é asc ou 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;
      },
}

Nota 7:

Pergunta: Como distinguir se o clique atual é uma combinação de pontos ou um preço, que precisa ser exibido dinamicamente para cima e para baixo?

Resposta: Defina o evento click

<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()
      }

Links para meus outros artigos relacionados

1. Vue Shangpinhui Mall Project-day04 [24. Clique no botão de pesquisa para pular para a lista de produtos da página, exibição dinâmica de atributos de vendas da plataforma (desenvolver componente de pesquisa)] 2. Vue Shangpinhui Mall Project-day04 [25. Breadcrumbs
Processando palavras-chave]
3 . Vue Shangpinhui Mall projeto-day04【26. Operação de classificação (dificuldade)】
4. Vue Shangpinhui Mall projeto-day04【27. Componentes estáticos do pager (dificuldade)】
5. Projeto Vue Shangpinhui Mall-day04【28. Detalhes da página Detalhe】
6 . Vue Shangpinhui Mall projeto-day04【29. Adicionar à operação do carrinho de compras (ponto difícil)】

Vue Shangpinhui Mall Project-day04 [26. Operação de classificação (ponto difícil)]

Diretório de artigos

26. Operação de classificação (dificuldade)

26.1 Use a fonte de ícones de Ali

26.2 Operações de classificação

Links para meus outros artigos relacionados

Acho que você gosta