升级到 vue3

src/renderer/components/material/SearchInput.vue

@@ -1,34 +1,50 @@
-<template lang="pug">
-div(:class="$style.container")
-  div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
-    div(:class="$style.form")
-      input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
-            @focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
-            @change="sendEvent('change')"
-            @keyup.enter="handleSearch"
-            @keyup.40.prevent="handleKeyDown"
-            @keyup.38.prevent="handleKeyUp"
-            @contextmenu="handleContextMenu")
-      transition(enter-active-class="animated zoomIn" leave-active-class="animated zoomOut")
-        button(type="button" @click="handleClearList" v-show="text")
-          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 24 24' space='preserve')
-            use(xlink:href='#icon-window-close')
-      button(type="button" @click="handleSearch")
-        slot
-          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
-            use(xlink:href='#icon-search')
-    //- transition(name="custom-classes-transition"
-    //-             enter-active-class="animated flipInX"
-    //-             leave-active-class="animated flipOutX")
-    div(v-if="list" :class="$style.list" :style="listStyle")
-      ul(ref="dom_list")
-        li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
-          span {{item}}
+<template>
+<div :class="$style.container">
+  <div :class="[$style.search, {[$style.active]: focus}, {[$style.big]: big}, {[$style.small]: small}]">
+    <div :class="$style.form">
+      <input :placeholder="placeholder"
+        v-model.trim="text"
+        ref="dom_input"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="$emit('update:modelValue', text)"
+        @change="sendEvent('change')"
+        @keyup.enter="handleSearch"
+        @keyup.arrow-down.prevent="handleKeyDown"
+        @keyup.arrow-up.prevent="handleKeyUp"
+        @contextmenu="handleContextMenu" />
+      <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
+        <button type="button" @click="handleClearList" v-show="text">
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 24 24" space="preserve">
+            <use xlink:href="#icon-window-close"></use>
+          </svg>
+        </button>
+      </transition>
+      <button type="button" @click="handleSearch">
+        <slot>
+          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 30.239 30.239" space="preserve">
+            <use xlink:href="#icon-search"></use>
+          </svg>
+        </slot>
+      </button>
+    </div>
+    <div v-if="list" :class="$style.list" :style="listStyle">
+      <ul ref="dom_list">
+        <li v-for="(item, index) in list"
+          :key="item"
+          :class="{[$style.select]: selectIndex === index }"
+          @mouseenter="selectIndex = index"
+          @click="handleTemplistClick(index)"
+        ><span>{{item}}</span></li>
+      </ul>
+    </div>
+  </div>
+</div>
 </template>
 
 <script>
-import { clipboardReadText } from '../../utils'
-import { common as eventCommonNames } from '../../../common/hotKey'
+import { clipboardReadText } from '@renderer/utils'
+import { common as eventCommonNames } from '@common/hotKey'
 export default {
   props: {
     placeholder: {
@@ -42,7 +58,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -55,6 +71,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue', 'event'],
   data() {
     return {
       isShow: false,
@@ -74,7 +91,7 @@ export default {
         this.listStyle.height = this.$refs.dom_list.scrollHeight + 'px'
       })
     },
-    value(n) {
+    modelValue(n) {
       this.text = n
     },
     visibleList(n) {
@@ -85,13 +102,13 @@ export default {
     if (this.$store.getters.setting.search.isFocusSearchBox) this.handleFocusInput()
     this.handleRegisterEvent('on')
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.handleRegisterEvent('off')
   },
   methods: {
     handleRegisterEvent(action) {
       let eventHub = window.eventHub
-      let name = action == 'on' ? '$on' : '$off'
+      let name = action == 'on' ? 'on' : 'off'
       eventHub[name](eventCommonNames.focusSearchInput.action, this.handleFocusInput)
     },
     handleFocusInput() {
@@ -146,11 +163,11 @@ export default {
       str = str.replace(/\s+/g, ' ')
       let dom_input = this.$refs.dom_input
       this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
-      this.$emit('input', this.text)
+      this.$emit('update:modelValue', this.text)
     },
     handleClearList() {
       this.text = ''
-      this.$emit('input', this.text)
+      this.$emit('update:modelValue', this.text)
       this.sendEvent('submit')
     },
   },
@@ -159,7 +176,7 @@ export default {
 
 
 <style lang="less" module>
-@import '../../assets/styles/layout.less';
+@import '@renderer/assets/styles/layout.less';
 
 .container {
   position: relative;
@@ -279,7 +296,7 @@ export default {
 }
 
 each(@themes, {
-  :global(#container.@{value}) {
+  :global(#root.@{value}) {
 
     .search {
       background-color: ~'@{color-@{value}-search-form-background}';