提交 3942d4f3 authored 作者: coderBryanFu's avatar coderBryanFu

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

上级 27dad4d2
<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="isSort" 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="isSort" src="./down.svg" style="width: 16px; height: 16px" />
<img v-else src="./up.svg" style="width: 16px; height: 16px" /> <img v-else src="./up.svg" style="width: 16px; height: 16px" />
</div> </div>
</template> </template>
<el-option v-for="item in timeList" :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" />
</el-select> </el-select>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { computed, ref } from 'vue'
const isSort = ref(true) const props = defineProps({
onlyTime: {
type: Boolean,
default: true
}
})
const timeList = ref([ const isSort = ref(1)
{ label: "时间倒序", value: true },
{ label: "时间正序", value: false } const sortList = computed(() => {
]) if (props.onlyTime) {
return [
{ label: "时间倒序", value: 1 },
{ label: "时间正序", value: 2 },
]
} else {
return [
{ label: "时间倒序", value: 1 },
{ label: "时间正序", value: 2 },
{ label: "评分倒序", value: 3 },
{ label: "热度倒序", value: 4 },
]
}
})
const emits = defineEmits(['handlePxChange']) const emits = defineEmits(['handlePxChange'])
......
...@@ -5,20 +5,18 @@ ...@@ -5,20 +5,18 @@
{{ {{
` `
import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue' import TimeSortSelectBox from '@/components/base/TimeSortSelectBox/index.vue'
import HeatSortSelectBox from '@/components/base/HeatSortSelectBox/index.vue'
import GradeSortSelectBox from '@/components/base/GradeSortSelectBox/index.vue'
<div class="time-box"> <div class="time-box">
<TimeSortSelectBox @handle-px-change="handleTimePx" /> <TimeSortSelectBox @handle-px-change="handleTimePx" />
<HeatSortSelectBox @handle-px-change="handleHeatPx" /> <TimeSortSelectBox :only-time="false" @handle-px-change="handleTimePx" />
<GradeSortSelectBox @handle-px-change="handleGradePx" />
</div> </div>
` `
}} }}
</pre> </pre>
<div class="time-box"> <div class="time-box">
<TimeSortSelectBox @handle-px-change="handleTimePx" /> <TimeSortSelectBox @handle-px-change="handleTimePx" />
<HeatSortSelectBox @handle-px-change="handleHeatPx" /> <TimeSortSelectBox :only-time="false" @handle-px-change="handleTimePx" />
<GradeSortSelectBox @handle-px-change="handleGradePx" /> <!-- <HeatSortSelectBox @handle-px-change="handleHeatPx" />
<GradeSortSelectBox @handle-px-change="handleGradePx" /> -->
</div> </div>
</el-col> </el-col>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论