提交 924e4ff8 authored 作者: coderBryanFu's avatar coderBryanFu

fix:修改自定排序组件逻辑

上级 3942d4f3
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="降序 8" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<rect id="矩形 6349" width="12.000000" height="1.000000" x="2.000000" y="3.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
<rect id="矩形 6350" width="12.000000" height="1.000000" x="2.000000" y="6.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
<rect id="矩形 6351" width="6.000000" height="1.000000" x="2.000000" y="9.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
<rect id="矩形 6352" width="6.000000" height="1.000000" x="2.000000" y="12.000000" rx="0.500000" fill="rgb(95, 101, 108)" />
<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,9)" />
<path id="矢量 1984" d="M10 12L12 14L14 12" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
</svg>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
<rect id="降序 12" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="路径" d="M12.6473 7.70235L14.0825 6.30313C14.1606 6.22657 14.2121 6.12657 14.2278 6.01719C14.27 5.74376 14.0793 5.49063 13.8059 5.45001L9.83871 4.87344L8.06527 1.27813C8.01683 1.17969 7.93715 1.10001 7.83871 1.05157C7.59183 0.929693 7.29183 1.03126 7.1684 1.27813L5.39496 4.87344L1.42777 5.45001C1.3184 5.46563 1.2184 5.51719 1.14183 5.59532C0.949647 5.79376 0.952772 6.10938 1.15121 6.30313L4.02152 9.10157L3.3434 13.0531C3.32465 13.1609 3.34183 13.2734 3.3934 13.3703C3.52152 13.6141 3.82465 13.7094 4.0684 13.5797L7.61684 11.7141L8.50394 12.1805" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
<path id="矢量 1983" d="M0 0L4 0" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" transform="matrix(0,1,-1,0,12,9)" />
<path id="矢量 1984" d="M10 12L12 14L14 12" stroke="rgb(95, 101, 108)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.000000" />
</svg>
<template> <template>
<div class="time-sort-select-box"> <div class="time-sort-select-box">
<el-select v-model="isSort" placeholder="排序方式" style="width: 130px" @change="handlePxChange"> <el-select v-model="sortValue" placeholder="排序方式" style="width: 130px" @change="handlePxChange">
<template #prefix> <template #prefix>
<div style="display: flex; align-items: center; height: 100%"> <div style="display: flex; align-items: center; height: 100%">
<img v-if="isSort" src="./down.svg" style="width: 16px; height: 16px" /> <img v-if="sortValue === 1" src="./down.svg" style="width: 16px; height: 16px" />
<img v-else src="./up.svg" style="width: 16px; height: 16px" /> <img v-else-if="sortValue === 2" src="./up.svg" style="width: 16px; height: 16px" />
<img v-else-if="sortValue === 3" src="./down1.svg" style="width: 16px; height: 16px" />
<img v-else-if="sortValue === 4" src="./down2.svg" style="width: 16px; height: 16px" />
</div> </div>
</template> </template>
<el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value" />
...@@ -16,20 +18,26 @@ ...@@ -16,20 +18,26 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const props = defineProps({ const props = defineProps({
onlyTime: { sortDemension: {
type: Boolean, type: Number,
default: true default: 1
} }
}) })
const isSort = ref(1) const sortValue = ref(1)
const sortList = computed(() => { const sortList = computed(() => {
if (props.onlyTime) { if (props.sortDemension === 1) {
return [ return [
{ label: "时间倒序", value: 1 }, { label: "时间倒序", value: 1 },
{ label: "时间正序", value: 2 }, { label: "时间正序", value: 2 },
] ]
} else if (props.sortDemension === 2) {
return [
{ label: "时间倒序", value: 1 },
{ label: "时间正序", value: 2 },
{ label: "评分倒序", value: 3 },
]
} else { } else {
return [ return [
{ label: "时间倒序", value: 1 }, { label: "时间倒序", value: 1 },
...@@ -43,7 +51,7 @@ const sortList = computed(() => { ...@@ -43,7 +51,7 @@ const sortList = computed(() => {
const emits = defineEmits(['handlePxChange']) const emits = defineEmits(['handlePxChange'])
const handlePxChange = () => { const handlePxChange = () => {
emits('handlePxChange', isSort.value) emits('handlePxChange', sortValue.value)
} }
</script> </script>
......
...@@ -7,16 +7,16 @@ ...@@ -7,16 +7,16 @@
import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue' import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
<div class="time-box"> <div class="time-box">
<TimeSortSelectBox @handle-px-change="handleTimePx" /> <TimeSortSelectBox @handle-px-change="handleTimePx" />
<TimeSortSelectBox :only-time="false" @handle-px-change="handleTimePx" /> <TimeSortSelectBox :sort-demension="2" @handle-px-change="handleTimePx" />
<TimeSortSelectBox :sort-demension="3" @handle-px-change="handleTimePx" />
</div> </div>
` `
}} }}
</pre> </pre>
<div class="time-box"> <div class="time-box">
<TimeSortSelectBox @handle-px-change="handleTimePx" /> <TimeSortSelectBox @handle-px-change="handleTimePx" />
<TimeSortSelectBox :only-time="false" @handle-px-change="handleTimePx" /> <TimeSortSelectBox :sort-demension="2" @handle-px-change="handleTimePx" />
<!-- <HeatSortSelectBox @handle-px-change="handleHeatPx" /> <TimeSortSelectBox :sort-demension="3" @handle-px-change="handleTimePx" />
<GradeSortSelectBox @handle-px-change="handleGradePx" /> -->
</div> </div>
</el-col> </el-col>
...@@ -55,5 +55,7 @@ const handleGradePx = (val) => { ...@@ -55,5 +55,7 @@ const handleGradePx = (val) => {
padding: 100px; padding: 100px;
background: #F2F8FF; background: #F2F8FF;
border: 1px solid var(--bg-black-5); border: 1px solid var(--bg-black-5);
display: flex;
gap: 8px;
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论