需求背景

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

解决效果

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>