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,63 +10,58 @@ 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 = "") => {
+    showInputBox: (options = ["请输入"], title = "") => new Promise((reslove, reject) => {
-        return new Promise((reslove, reject) => {
+        let props = {
-            let props = {
+            labels: [],
-                labels: [],
+            values: [],
-                values: [],
+            hints: [],
-                hints: [],
+            title: title
-                title: title
+        }
-            }
+        if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
-            if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
+        if (options instanceof Array) props.labels = options
-            if (options instanceof Array) props.labels = options
+        else Object.assign(props, options)
-            else Object.assign(props, options)
+        Dialog.create({
-            Dialog.create({
+            component: inputBox,
-                component: inputBox,
+            componentProps: props
-                componentProps: props
+        }).onOk(results => {
-            }).onOk(results => {
+            reslove(Array.from(results))
-                reslove(Array.from(results))
+        }).onCancel(() => {
-            }).onCancel(() => {
+            console.log('取消')
-                console.log('取消')
-            })
         })
-    },
+    }),
 
-    showButtonBox: (labels = ["确定"], title = "") => {
+    showButtonBox: (labels = ["确定"], title = "") => new Promise((reslove, reject) => {
-        return new Promise((reslove, reject) => {
+        if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
-            if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
+        let props = {
-            let props = {
+            labels: labels,
-                labels: labels,
+            title: title
-                title: title
+        }
-            }
+        Dialog.create({
-            Dialog.create({
+            component: buttonBox,
-                component: buttonBox,
+            componentProps: props
-                componentProps: props
+        }).onOk(results => {
-            }).onOk(results => {
+            reslove(results)
-                reslove(results)
+        }).onCancel(() => {
-            }).onCancel(() => {
+            console.log('取消')
-                console.log('取消')
-            })
         })
-    },
+    }),
 
 
-    showConfirmBox: (message = "", title = "提示") => {
+    showConfirmBox: (message = "", title = "提示") => new Promise((reslove, reject) => {
-        return new Promise((reslove, reject) => {
+        Dialog.create({
-            Dialog.create({
+            title: title,
-                title: title,
+            message: message,
-                message: message,
+            cancel: true,
-                cancel: true,
+            persistent: true
-                persistent: true
+        }).onOk(() => {
-            }).onOk(() => {
+            reslove(true)
-                reslove(true)
+        }).onCancel(() => {
-            }).onCancel(() => {
+            reslove(false)
-                reslove(false)
-            })
         })
-    },
+    }),
 
     showMessageBox: (message, icon = 'success', time = 3000) => {
         if (icon === 'success') icon = 'positive'
@@ -79,22 +74,39 @@ const quickcommand = {
         })
     },
 
-    showTextArea: (placeholder = "", value = "") => {
+    showTextArea: (placeholder = "", value = "") => new Promise((reslove, reject) => {
-        return new Promise((reslove, reject) => {
+        let props = {
-            let props = {
+            placeholder: placeholder,
-                placeholder: placeholder,
+            value: value
-                value: value
+        }
-            }
+        Dialog.create({
-            Dialog.create({
+            component: TextArea,
-                component: TextArea,
+            componentProps: props
-                componentProps: props
+        }).onOk(results => {
-            }).onOk(results => {
+            reslove(results)
-                reslove(results)
+        }).onCancel(() => {
-            }).onCancel(() => {
+            console.log('取消')
-                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