手搓排序 樣式 事件觸發

<!--
 * @Descripttion:
 * @version:
 * @Author: Xueran
 * @Date: 2023-02-21 17:39:34
 * @LastEditors: Xueran
 * @LastEditTime: 2023-02-22 20:29:55
-->
<template>
  <div class="ignore-sort-box">
    <div
      class="ignore-top"
      :class="{ 'sort-active-top': sortBy === prop && currentOrder === 'asc' }"
      @click="clickSort(prop, 'asc')"
    ></div>
    <div
      class="ignore-bottom"
      :class="{
        'sort-active-bottom': sortBy === prop && currentOrder === 'dec'
      }"
      @click="clickSort(prop, 'dec')"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    prop: {
      type: String,
      default: ''
    },
    currentOrder: {
      type: String,
      default: ''
    },
    currentSortBy: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sortBy: ''
    };
  },
  watch: {
    currentSortBy(value) {
      if (this.prop !== value) {
        this.sortBy = '';
      }
    }
  },
  methods: {
    clickSort(prop, order) {
      let theOrder = '';
      if (order === this.currentOrder && this.sortBy === prop) {
        this.sortBy = '';
      } else {
        this.sortBy = prop;
        theOrder = order;
      }
      this.$emit('sort', { sortBy: this.sortBy, order: theOrder });
    }
  }
};
</script>

<style lang="less" scoped>
/* stylelint-disable */
.sort {
  display: flex;
  flex-direction: column;
  width: 20px;
  height: 30px;
}
.ignore-sort-box {
  margin-left: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 30px;
  .ignore-top {
    cursor: pointer;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-bottom-color: white;
    margin-bottom: 3px;
  }
  .ignore-bottom {
    cursor: pointer;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-top-color: white;
  }
}
.sort-active-top {
  border-bottom-color: white;
  opacity: 0.4;
}
.sort-active-bottom {
  border-top-color: white;
  opacity: 0.4;
}
</style>