需求背景

需要实现一个复用性，是提供表单顺倒排序的按钮

解决效果

index.vue

<!--/**
   * @author: liuk
   * @date: 2023/7/25
   * @describe: 排序按钮
  */-->
<template>
  <div class="sort-fn">
    <span :class="['positive',sortVal==='asc'?'select':'']" @click="toggleSort('asc')"></span>
    <span :class="['reverse',sortVal==='desc'?'select':'']" @click="toggleSort('desc')"></span>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

// Props
const props = defineProps({
  modelValue: {
    type: String || undefined,
    required: true,
  },
});

// Emits
const emit = defineEmits<{
  (e: "update:modelValue", value: string | undefined): void
  (e:"change"):void
}>()

// 父子组件数据双向绑定
const sortVal = computed<string | undefined>({
  get() {
    return props.modelValue;
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
    emit('update:modelValue', val);
  },
});

const toggleSort = (type) => {
  sortVal.value = type;
  emit('change');
}
</script>

<style lang="scss" scoped>
.sort-fn {
  position: relative;
  top: -5px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 20px;

  & > * {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  .positive {
    border-bottom-color: #aaaaaa;
    margin-bottom: 10px;

    &.select {
      border-bottom-color: #e6a33e;
    }
  }

  .reverse {
    border-top-color: #aaaaaa;

    &.select {
      border-top-color: #e6a33e;
    }
  }
}
</style>