selectList 100%

src/components/quickcommandUI/SelectList.vue

@@ -31,9 +31,12 @@
             }"
           >
             <q-item-section v-if="isText">{{ item }}</q-item-section>
-            <q-item-section v-else-if="isJson">
-              <q-avatar v-if="item.icon">
-                <q-icon :name="item.icon" />
+            <q-item-section
+              v-else-if="isJson"
+              class="content-start q-gutter-md"
+            >
+              <q-avatar size="40px" v-if="item.icon">
+                <q-img :src="item.icon" />
               </q-avatar>
               <q-item-label>{{ item.title }}</q-item-label>
               <q-item-label caption>{{ item.description }}</q-item-label>
@@ -45,6 +48,7 @@
         </template>
       </q-virtual-scroll>
       <q-btn
+        v-if="options.showCancelButton"
         class="absolute-bottom-right q-ma-xs"
         round
         color="primary"
@@ -59,6 +63,7 @@
 export default {
   data() {
     return {
+      items: this.initItems,
       listMaxHeight: 500,
       currentIndex: 0,
       itemHeight: 50,
@@ -70,7 +75,7 @@ export default {
   },
   mounted() {
     window.SelectList = this;
-    this.setSubInput();
+    this.options.enableSearch && this.setSubInput();
     this.setUtoolsHeight(this.itemHeight * this.matchedItemsSize);
   },
   computed: {
@@ -98,8 +103,7 @@ export default {
   },
   props: {
     options: Object,
-    items: Array,
-    pinyinMatch: Function,
+    initItems: Array,
   },
   emits: ["ok", "hide"],
   methods: {
@@ -125,7 +129,7 @@ export default {
               text: this.matchedItems[this.currentIndex],
             };
       this.$emit("ok", selected);
-      this.hide();
+      this.options.closeOnSelect && this.hide();
     },
 
     onCancelClick() {

src/js/quickcommand.js

@@ -20,7 +20,7 @@ const quickcommand = {
             hints: [],
             title: title
         }
-        if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
+        if (!(options instanceof Object)) return reject(new TypeError(`应为 Object, 而非 ${typeof options}`))
         if (options instanceof Array) props.labels = options
         else Object.assign(props, options)
         Dialog.create({
@@ -34,7 +34,7 @@ const quickcommand = {
     }),
 
     showButtonBox: (labels = ["确定"], title = "") => new Promise((reslove, reject) => {
-        if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
+        if (!(labels instanceof Array)) return reject(new TypeError(`应为 Array, 而非 ${typeof labels}`))
         let props = {
             labels: labels,
             title: title
@@ -90,11 +90,18 @@ const quickcommand = {
     }),
 
     showSelectList: (selects, options = {}) => new Promise((reslove, reject) => {
-        if (!options.placeholder) options.placeholder = "输入进行筛选，支持拼音"
-        if (!options.optionType) options.optionType = "plaintext"
+        if (!(selects instanceof Array)) return reject(new TypeError(`应为 Array, 而非 ${typeof selects}`))
+        let defaultOptions = {
+            placeholder: "输入进行筛选，支持拼音",
+            optionType: "plaintext",
+            enableSearch: true,
+            showCancelButton: false,
+            closeOnSelect: true
+        }
+        Object.assign(defaultOptions, options)
         let props = {
-            items: selects,
-            options: options
+            initItems: selects,
+            options: defaultOptions
         }
         Dialog.create({
             component: SelectList,
@@ -107,9 +114,9 @@ const quickcommand = {
     }),
 
     // 更新选项列表
-    updateSelectList: (opt, id) => {
+    updateSelectList: () => {
 
     },
 }
 
-export default quickcommand
+export default quickcommand

src/plugins/monaco/types/quickcommand.api.d.ts

@@ -58,7 +58,7 @@ interface quickcommandApi {
    * var opt = []
    * for (var i = 0; i < 15; i++) {
    *     // 每一个选项为 json 格式
-   *     opt.push({title: `选项${i}`, description: `选项${i}的描述`, icon: `选项${i}的图标`,abcd: `选项${i}的自定义属性`})
+   *     opt.push({title: `选项${i}`, description: `选项${i}的描述`, icon: `http://www.u.tools/favicon.ico`,abcd: `选项${i}的自定义属性`})
    * }
    * quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => {
    *     console.log(`选择的选项为${choise.title}`)
@@ -76,11 +76,19 @@ interface quickcommandApi {
    * ```
    *
    * @param selects 每一个列表选项
-   * @param options 列表的选项。placeholder: 搜索框占位符,optionType: 选项的格式，默认为plaintext
+   * @param options 列表的选项。placeholder: 搜索框占位符；optionType: 选项的格式，默认为plaintext；
+   * enableSearch：启用搜索，默认 true；showCancelButton：显示关闭按钮，默认 false；closeOnSelect：
+   * 点击后关闭，默认 true
    */
   showSelectList(
     selects: array,
-    options?: { placeholder: string; optionType: "plaintext" | "html" | "json" }
+    options?: {
+      placeholder: string;
+      optionType: "plaintext" | "html" | "json";
+      enableSearch: boolean;
+      showCancelButton: boolean;
+      closeOnSelect: boolean;
+    }
   ): Promise<{ id: number; text: string | object }>;
 
   /**