vue3 正序倒序小组件

效果如图：

代码如下：

<template>
  <div class="order-wrap" @click="orderFn">
    <span class="text">{{ reverse ? "正序" : "倒序" }}span>
    <span class="triangle">
      <i class="top" :class="{ topActive: !reverse }">i>
      <i class="bottom" :class="{ bottomActive: reverse }">i>
    span>
  div>
template>

 使用：

 <order @refresh="refresh">order>

    //正序倒序
    const refresh = (val) => {
      data.order = val;//正序还是倒序
      data.page = 1;//页码重置为1
      getDetail();//重新获取数据
    };