generated from Luthics/vue-elementplus-template
143 lines
3.9 KiB
Vue
143 lines
3.9 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const datas = ref([])
|
||
const sorting = ref(false)
|
||
let currentIndex1 = ref(-1)
|
||
let currentIndex2 = ref(-1)
|
||
let currentIndex3 = ref(-1)
|
||
const desc = ref(0)
|
||
|
||
const asc_texts = ['', '最小值', '当前值', '选中值']
|
||
const desc_texts = ['', '最大值', '当前值', '选中值']
|
||
|
||
const selectionSort = async (descc) => {
|
||
if (sorting.value) {
|
||
return
|
||
}
|
||
sorting.value = true
|
||
desc.value = descc
|
||
// 实现选择排序
|
||
|
||
// 1. 获取数据
|
||
const data = datas.value
|
||
|
||
// 2. 排序
|
||
// 2.1 外层循环，控制比较的轮数
|
||
for (let i = 0; i < data.length - 1; i++) {
|
||
let minIndex = i
|
||
currentIndex3.value = i
|
||
// 2.2 内层循环，找到最小值的 index
|
||
for (let j = i + 1; j < data.length; j++) {
|
||
// 检查是否停止排序
|
||
if (!sorting.value) {
|
||
return
|
||
}
|
||
// 根据 desc 判断是升序还是降序
|
||
if (desc.value === 0) {
|
||
if (data[j] < data[minIndex]) {
|
||
minIndex = j
|
||
}
|
||
} else {
|
||
if (data[j] > data[minIndex]) {
|
||
minIndex = j
|
||
}
|
||
}
|
||
currentIndex1.value = minIndex
|
||
currentIndex2.value = j
|
||
// 每次延时
|
||
await new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve()
|
||
}, 200)
|
||
})
|
||
}
|
||
// 2.3 把找到的最小值放到当前轮的最左侧
|
||
const temp = data[i]
|
||
data[i] = data[minIndex]
|
||
data[minIndex] = temp
|
||
}
|
||
|
||
currentIndex1.value = -1
|
||
currentIndex2.value = -1
|
||
currentIndex3.value = -1
|
||
sorting.value = false
|
||
}
|
||
|
||
const shuffle = () => {
|
||
// 范围从 20~99
|
||
datas.value = []
|
||
for (let i = 0; i < 10; i++) {
|
||
datas.value.push(Math.floor(Math.random() * 80 + 20))
|
||
}
|
||
}
|
||
|
||
const stop = () => {
|
||
sorting.value = false
|
||
}
|
||
|
||
const compare = (index) => {
|
||
// 判断当前索引是否与指针重合
|
||
if (index === currentIndex1.value) {
|
||
return 'compare-1'
|
||
}
|
||
if (index === currentIndex2.value) {
|
||
return 'compare-2'
|
||
}
|
||
if (index === currentIndex3.value) {
|
||
return 'compare-3'
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 传入全数据列表索引，返回对应的文字
|
||
const getText = (index) => {
|
||
if (index === currentIndex1.value) {
|
||
if (desc.value === 0) {
|
||
return asc_texts[1]
|
||
} else {
|
||
return desc_texts[1]
|
||
}
|
||
}
|
||
if (index === currentIndex2.value) {
|
||
if (desc.value === 0) {
|
||
return asc_texts[2]
|
||
} else {
|
||
return desc_texts[2]
|
||
}
|
||
}
|
||
if (index === currentIndex3.value) {
|
||
if (desc.value === 0) {
|
||
return asc_texts[3]
|
||
} else {
|
||
return desc_texts[3]
|
||
}
|
||
}
|
||
return ''
|
||
}
|
||
|
||
shuffle()
|
||
</script>
|
||
|
||
<template>
|
||
<el-row class="ct">
|
||
<!-- 两个div，左右各占一半 -->
|
||
<div class="left" v-auto-animate>
|
||
<el-card v-for="(data, index) in datas" :key="data" :class="['data-card', compare(index)]"
|
||
:style="'width:' + data / 1.4 + 'rem;'">
|
||
<el-row>
|
||
<div class="text">{{ getText(index,) }}</div>
|
||
<div class="data">{{ data }}</div>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
<div class="right">
|
||
<el-button type="primary" @click="selectionSort(0)" :disabled="sorting">从小到大</el-button>
|
||
<el-button type="primary" @click="selectionSort(1)" :disabled="sorting">从大到小</el-button>
|
||
<el-button type="primary" @click="shuffle" :disabled="sorting">随机打乱</el-button>
|
||
<el-button type="primary" @click="stop" :disabled="!sorting">停止排序</el-button>
|
||
</div>
|
||
</el-row>
|
||
</template>
|
||
|
||
<style scoped></style> |