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>

<script>
import { reactive, toRefs } from "vue";
export default {
  props: {},
  emits: ["refresh"],
  setup(props, { emit }) {
    const data = reactive({
      reverse: false, // 倒序
    });
    //点击排序
    const orderFn = () => {
      data.reverse = !data.reverse;
      let num = null;
      if (data.reverse) {
        num = 0;
      } else {
        num = 1;
      }
      emit("refresh", num);
    };

    return {
      ...toRefs(data),
      orderFn, //打开弹窗
    };
  },
};
</script>

<style lang="scss" scoped>
.order-wrap {
  margin: 0 10px;
  cursor: pointer;
  display: inline-block;
  .text {
    display: inline-block;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3c456c;
  }
  .triangle {
    margin: 0 10px;
    display: inline-block;
    position: relative;

    .top {
      top: -10px;
      width: 0;
      height: 0;
      position: absolute;
      display: inline-block;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 5px solid #d4d8de;
      box-sizing: border-box;
    }
    .bottom {
      top: -2px;
      width: 0;
      height: 0;
      position: absolute;
      display: inline-block;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid #d4d8de;
      box-sizing: border-box;
    }
    .topActive {
      border-bottom: 5px solid #6995ff;
    }
    .bottomActive {
      border-top: 5px solid #6995ff;
    }
  }
}
</style>

 使用：

 <order @refresh="refresh"></order>

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

     return {

      ...toRefs(data),

      refresh,

    };