Mon Mar 11 01:02:00 CST 2024 inscode

src/components/visualSort/index.vue

+<script lang="js" setup>
+import { reactive, onMounted } from 'vue';
+
+import { useStore } from "vuex";
+
+const store = useStore();
+const state = reactive({
+    value: '[1,2,3,4,5]',
+    title: '冒泡排序可视化',
+    sourceData: [{
+        num: 1,
+        domId: 'num-1',
+        loc: 1,
+        percent: 14
+    }, {
+        num: 3,
+        domId: 'num-3',
+        loc: 3,
+        percent: 50
+    }, {
+        num: 2,
+        domId: 'num-2',
+        loc: 2,
+        percent: 36
+    }]
+})
+
+const sortBtn = () => {
+
+}
+
+</script>
+<template>
+    <div>
+
+        <div style="display:flex;">
+            <a-card :title="state.title" style="min-width: 800px">
+                <div class="input-box">
+
+                    <div>
+                        <a-input v-model:value="state.value" placeholder="请输入数组" clearable></a-input>
+                    </div>
+                    <div style="margin-left:50px"><a-button type="primary" @click="sortBtn">开始排序</a-button></div>
+                </div>
+                <div class="container-sort">
+                    <div v-for="item in state.sourceData" :id="item.domId" class="box">
+                        <div>
+                            <div class="bar" :style="{
+                                height: `${item.percent * 7}px`
+                            }">
+
+                            </div>
+                            <div class="num">
+                                {{ item.num }}
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+            </a-card>
+        </div>
+
+    </div>
+</template>
+
+<style lang="less">
+.input-box {
+    display: flex;
+    margin-bottom: 10px;
+}
+
+.container-sort {
+    height: 600px;
+    display: flex;
+    align-items: flex-end;
+    border: 1px solid #dcdcdc;
+}
+
+.box {
+    margin: 10px;
+
+    .bar {
+        width: 10px;
+        background: #1677ff;
+        border-radius: 2px;
+    }
+
+    .num {
+        font-size: 18px;
+    }
+}
+</style>
\ No newline at end of file

src/router/modules/layout.js

@@ -92,6 +92,16 @@ export default {
                 icon: 'ion:grid-outline',
                 title: '可视化性能指标',
             },
+        },
+        {
+            path: 'visualSort',
+            name: 'visualSort',
+            component: () => import('@/components/visualSort/index.vue'),
+            meta: {
+
+                icon: 'ion:grid-outline',
+                title: '可视化排序',
+            },
         }
     ],
 };