feat: 选择图标时自动滚动到已选图标位置

dearjianfu · Feb 19, 2021 · 11b54e8 · 11b54e8
1 parent d05bcaf
commit 11b54e8
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/views/index/IconsDialog.vue b/src/views/index/IconsDialog.vue
@@ -19,7 +19,7 @@
           clearable
         />
       </div>
-      <ul class="icon-ul">
+      <ul ref="iconWrap" class="icon-ul">
         <li
           v-for="icon in iconList"
           :key="icon"
@@ -61,12 +61,21 @@ export default {
     onOpen() {
       this.active = this.current
       this.key = ''
+      this.scrollToActive()
     },
     onClose() {},
     onSelect(icon) {
       this.active = icon
       this.$emit('select', icon)
       this.$emit('update:visible', false)
+    },
+    scrollToActive() {
+      this.$nextTick(() => {
+        const $activeItem = this.active
+          ? document.getElementsByClassName('active-item')[0]
+          : this.$refs.iconWrap.childNodes[0]
+        $activeItem && $activeItem.scrollIntoView && $activeItem.scrollIntoView()
+      })
     }
   }
 }