selectList 10%

src/components/quickcommandUI/SelectList.vue

@@ -0,0 +1,107 @@
+<template>
+  <q-dialog
+    @keydown="keyEvent"
+    maximized
+    ref="dialog"
+    transition-show="fade"
+    @hide="onDialogHide"
+  >
+    <q-scroll-area
+      ref="scrollbar"
+      :thumb-style="{
+        width: '7px',
+      }"
+    >
+      <q-card>
+        <q-virtual-scroll
+          virtual-scroll-slice-size="50"
+          virtual-scroll-item-size="50"
+          @virtual-scroll="scrollEvent"
+          :items="items"
+        >
+          <template v-slot="{ item, index }">
+            <q-item
+              :key="index"
+              ref="qitems"
+              clickable
+              v-ripple
+              @mousemove="currentIndex = index"
+              manual-focus
+              :focused="index === currentIndex"
+              :active="index === currentIndex"
+              :style="{
+                height: itemHeight + 'px',
+              }"
+            >
+              <q-item-section>
+                <q-item-section>{{ item }}</q-item-section>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-virtual-scroll>
+      </q-card>
+    </q-scroll-area>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      result: this.items[0],
+      currentIndex: 0,
+      itemHeight: 50,
+    };
+  },
+  mounted() {
+    window.SelectList = this;
+  },
+  computed: {
+    maxIndex() {
+      return this.items.length - 1;
+    },
+  },
+  props: {
+    options: Object,
+    items: Array,
+  },
+  emits: ["ok", "hide"],
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+
+    onDialogHide() {
+      this.$emit("hide");
+    },
+
+    onOKClick() {
+      this.$emit("ok", this.result);
+      this.hide();
+    },
+
+    onCancelClick() {
+      this.hide();
+    },
+
+    keyEvent(e) {
+      e.preventDefault();
+      switch (e.keyCode) {
+        case 38:
+          this.currentIndex = Math.max(0, this.currentIndex - 1);
+          break;
+        case 40:
+          this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1);
+          break;
+      }
+      //   this.$refs.qitems[this.currentIndex].$el.scrollIntoViewIfNeeded(false);
+    },
+    scrollEvent(e) {
+      console.log(e);
+    },
+  },
+};
+</script>

src/js/quickcommand.js

@@ -10,10 +10,10 @@ import {
 import inputBox from "../components/quickcommandUI/InputBox"
 import buttonBox from "../components/quickcommandUI/ButtonBox"
 import TextArea from "../components/quickcommandUI/TextArea"
+import SelectList from "../components/quickcommandUI/SelectList"
 
 const quickcommand = {
-    showInputBox: (options = ["请输入"], title = "") => {
-        return new Promise((reslove, reject) => {
+    showInputBox: (options = ["请输入"], title = "") => new Promise((reslove, reject) => {
         let props = {
             labels: [],
             values: [],
@@ -31,11 +31,9 @@ const quickcommand = {
         }).onCancel(() => {
             console.log('取消')
         })
-        })
-    },
+    }),
 
-    showButtonBox: (labels = ["确定"], title = "") => {
-        return new Promise((reslove, reject) => {
+    showButtonBox: (labels = ["确定"], title = "") => new Promise((reslove, reject) => {
         if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
         let props = {
             labels: labels,
@@ -49,12 +47,10 @@ const quickcommand = {
         }).onCancel(() => {
             console.log('取消')
         })
-        })
-    },
+    }),
 
 
-    showConfirmBox: (message = "", title = "提示") => {
-        return new Promise((reslove, reject) => {
+    showConfirmBox: (message = "", title = "提示") => new Promise((reslove, reject) => {
         Dialog.create({
             title: title,
             message: message,
@@ -65,8 +61,7 @@ const quickcommand = {
         }).onCancel(() => {
             reslove(false)
         })
-        })
-    },
+    }),
 
     showMessageBox: (message, icon = 'success', time = 3000) => {
         if (icon === 'success') icon = 'positive'
@@ -79,8 +74,7 @@ const quickcommand = {
         })
     },
 
-    showTextArea: (placeholder = "", value = "") => {
-        return new Promise((reslove, reject) => {
+    showTextArea: (placeholder = "", value = "") => new Promise((reslove, reject) => {
         let props = {
             placeholder: placeholder,
             value: value
@@ -93,8 +87,26 @@ const quickcommand = {
         }).onCancel(() => {
             console.log('取消')
         })
-        })
+    }),
+
+
+    showSelectList: (selects, options = {
+        placeholder: "请选择",
+        optionType: "plaintext"
+    }) => new Promise((reslove, reject) => {
+        let props = {
+            items: selects,
+            options: options
         }
+        Dialog.create({
+            component: SelectList,
+            componentProps: props
+        }).onOk(results => {
+            reslove(results)
+        }).onCancel(() => {
+            console.log('取消')
+        })
+    })
 }
 
 export default quickcommand