iconpicker 调整

src/components/CommandSideBar.vue

@@ -18,7 +18,7 @@
       />
       <q-img
         class="commandLogo"
-        @click="showIconPicker"
+        @click="showIconPicker = true"
         width="64px"
         :src="currentCommand.features.icon"
       />
@@ -257,11 +257,12 @@
         </div>
       </div>
     </div>
+    <q-dialog v-model="showIconPicker" position="left">
       <iconPicker
         @iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
-      position="left"
         ref="icon"
       />
+    </q-dialog>
   </q-scroll-area>
 </template>
 
@@ -296,6 +297,7 @@ export default {
       outputTypesOptions: Object.keys(outputTypes),
       specialVar: "{{}}",
       allQuickCommandTags: this.$parent.allQuickCommandTags,
+      showIconPicker: false,
     };
   },
   props: {
@@ -411,10 +413,6 @@ export default {
       }
       return updateData;
     },
-
-    showIconPicker() {
-      this.$refs.icon.showIconPicker = true;
-    },
   },
 };
 </script>

src/components/popup/IconPicker.vue

@@ -1,6 +1,4 @@
 <template>
-  <div>
-    <q-dialog v-model="showIconPicker" class="q-gutter" :position="position">
   <q-card>
     <q-card-section class="text-h5 text-center">更改图标</q-card-section>
     <q-card-section>
@@ -22,9 +20,7 @@
       >
         <template v-slot:no-option>
           <q-item>
-                <q-item-section class="text-grey">
-                  键入关键词搜索
-                </q-item-section>
+            <q-item-section class="text-grey"> 键入关键词搜索 </q-item-section>
           </q-item>
         </template>
         <template v-slot:selected>
@@ -78,13 +74,9 @@
       ></q-input>
     </q-card-section>
     <q-card-actions align="right">
-          <q-btn flat color="primary" @click="showIconPicker = false"
-            >确定</q-btn
-          >
+      <q-btn flat color="primary" v-close-popup>确定</q-btn>
     </q-card-actions>
   </q-card>
-    </q-dialog>
-  </div>
 </template>
 
 <script>
@@ -94,7 +86,6 @@ import pictureCompress from "picture-compressor";
 export default {
   data() {
     return {
-      showIconPicker: false,
       localIconFile: ref(null),
       icon8sIcon: ref(null),
       netWorkIconUrl: "",

src/components/popup/PanelSetting.vue

@@ -4,9 +4,7 @@
       <div class="row q-gutter-md">
         <div class="col-auto justify-center content-center flex q-pa-md">
           <q-avatar square class="commandLogo">
-            <q-img
-              :src="features.icon"
-              @click="$refs.icon.showIconPicker = true"
+            <q-img :src="features.icon" @click="showIconPicker = true"
           /></q-avatar>
         </div>
         <div class="col">
@@ -42,11 +40,12 @@
       <q-btn flat label="取消" color="grey" v-close-popup />
       <q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
     </q-card-actions>
-    <IconPicker
-      ref="icon"
+    <q-dialog v-model="showIconPicker" position="right">
+      <iconPicker
         @iconChanged="(dataUrl) => (features.icon = dataUrl)"
-      position="right"
+        ref="icon"
       />
+    </q-dialog>
   </q-card>
 </template>
 
@@ -64,6 +63,7 @@ export default {
         platform: ["win32", "darwin", "linux"],
         code: `panel_${window.hexEncode(this.currentTag)}`,
       },
+      showIconPicker: false,
     };
   },
   props: {