Merge pull request #1 from 1962247851/feat-1.5.6

Feat 1.5.6

components/or/OrInputDialog.vue

@@ -28,6 +28,7 @@
       persistent
       loading
       :title="title"
+      @onClose="onClose"
       @onConfirm="$emit('onConfirm',input)"
   >
     <v-form ref="form">
@@ -58,6 +59,13 @@
 export default {
   name: 'OrInputDialog',
   props: {
+    /**
+     * 关闭时是否保留输入
+     */
+    keepInputOnClose: {
+      type: Boolean,
+      default: false
+    },
     defaultValue: {
       type: [String, Number],
       default: ''
@@ -97,6 +105,12 @@ export default {
     },
     validate () {
       return this.$refs.form.validate()
+    },
+    onClose () {
+      if (!this.keepInputOnClose) {
+        this.input = ''
+      }
+      this.$emit('onClose')
     }
   }
 }

components/or/OrSearch.vue

@@ -24,44 +24,45 @@
 
 <template>
   <span
-    style="position: relative;"
-    class="d-inline-flex align-center"
+      style="position: relative;"
+      class="d-inline-flex align-center"
   >
     <v-fade-transition>
       <v-form
-        v-if="(autoExpand&&$vuetify.breakpoint.mdAndUp)||searchInputFocused"
-        style="position: absolute; right: 0; width: 100%; max-width: 400px"
-        :style="{'width':$vuetify.breakpoint.smAndDown&&!searchInputFocused?'100px':'300px'}"
-        @submit="onSearchFormSubmit"
-        @submit.n.native.prevent
+          v-if="(autoExpand&&$vuetify.breakpoint.mdAndUp)||searchInputFocused"
+          style="position: absolute; right: 0; width: 100%; max-width: 400px"
+          :style="{'width':$vuetify.breakpoint.smAndDown&&!searchInputFocused?'100px':'300px'}"
+          @submit="onSearchFormSubmit"
+          @submit.n.native.prevent
       >
         <v-text-field
-          ref="input"
-          v-model.trim="searchInput"
-          dense
-          :autofocus="!autoExpand||$vuetify.breakpoint.smAndDown"
-          class="transition-fast-in-fast-out"
-          :class="searchInputFocused?'elevation-2':null"
-          hide-details
-          :placeholder="searchInputPlaceholder"
-          solo
-          :solo-inverted="soloInverted"
-          clearable
-          flat
-          maxlength="10"
-          :rules="[$or.rules.max100Chars]"
-          append-icon="mdi-magnify"
-          @click:append="onClickSearchInputAppend"
-          @focusin="searchInputFocused=true"
-          @focusout="searchInputFocused=false"
+            id="orSearchInput"
+            ref="input"
+            v-model.trim="searchInput"
+            dense
+            :autofocus="!autoExpand||$vuetify.breakpoint.smAndDown"
+            class="transition-fast-in-fast-out"
+            :class="searchInputFocused?'elevation-2':null"
+            hide-details
+            :placeholder="searchInputPlaceholder"
+            solo
+            :solo-inverted="soloInverted"
+            clearable
+            flat
+            maxlength="10"
+            :rules="[$or.rules.max100Chars]"
+            append-icon="mdi-magnify"
+            @click:append="onClickSearchInputAppend"
+            @focusin="searchInputFocused=true"
+            @focusout="searchInputFocused=false"
         />
       </v-form>
     </v-fade-transition>
     <v-fade-transition>
       <v-btn
-        v-if="(!autoExpand||$vuetify.breakpoint.smAndDown)&&!searchInputFocused"
-        icon
-        @click="searchInputFocused=true"
+          v-if="(!autoExpand||$vuetify.breakpoint.smAndDown)&&!searchInputFocused"
+          icon
+          @click="searchInputFocused=true"
       >
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
@@ -87,6 +88,12 @@ export default {
     }
   },
   data: () => ({
+    observer: null,
+    /**
+     * 观察器的配置（需要观察什么变动）
+     */
+    observerConfig: { attributes: false, childList: true, subtree: true },
+
     searchInput: '',
     searchInputFocused: false
   }),
@@ -110,7 +117,28 @@ export default {
       this.$emit('update:focused', val)
     }
   },
+  created () {
+  },
   mounted () {
+    // 创建一个观察器实例并传入回调函数
+    this.observer = new MutationObserver(this.mutationObserverCallback)
+    // 以上述配置开始观察目标节点
+    this.observer.observe(document, this.observerConfig)
+
+    // 之后，可停止观察
+    // observer.disconnect()
+
+    // 兼容其他输入框正常输入'/'
+    const editableElements = this.getEditableElements(document)
+    // console.log(editableElements)
+    if (editableElements && editableElements.length) {
+      for (const element of editableElements) {
+        element.addEventListener('focus', this.onFocusOtherEditableElements)
+        element.addEventListener('blur', this.onBlurOtherEditableElements)
+        // console.log('element', element)
+      }
+    }
+
     window.addEventListener('keydown', (e) => {
       if (this.$vuetify.breakpoint.smAndDown || this.disableHotKey) {
         return
@@ -134,6 +162,56 @@ export default {
     })
   },
   methods: {
+    /**
+     * 当观察到变动时执行的回调函数
+     */
+    mutationObserverCallback (mutationsList, observer) {
+      // Use traditional 'for loops' for IE 11
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          // A child node has been added or removed.
+          // console.log(mutation)
+          // console.log(mutation.addedNodes)
+          mutation.addedNodes.forEach((value, key, parent) => {
+            // console.log(value)
+            const editableElements = this.getEditableElements(value)
+            if (editableElements && editableElements.length) {
+              // console.log(value)
+              // console.log('editableElements', editableElements)
+              for (const element of editableElements) {
+                element.addEventListener('focus', this.onFocusOtherEditableElements)
+                element.addEventListener('blur', this.onBlurOtherEditableElements)
+              }
+            }
+          })
+        }
+      }
+    },
+    /**
+     * 获取可编辑的元素
+     * @param element
+     */
+    getEditableElements (element) {
+      if (!element) {
+        return []
+      }
+      const inputs = [...element.getElementsByTagName('input')].filter((input) => {
+        return input.id !== 'orSearchInput' && input.type === 'text' && input.getAttribute('readonly') !== 'readonly'
+      })
+      const textareas = element.getElementsByTagName('textarea')
+      return [...inputs, ...textareas]
+    },
+
+    onFocusOtherEditableElements (ev) {
+      // console.log('onFocus', ev)
+      this.$store.dispatch('app/setSearchInputHotKeyEnabled', false)
+    },
+
+    onBlurOtherEditableElements (ev) {
+      // console.log('onBlur', ev)
+      this.$store.dispatch('app/setSearchInputHotKeyEnabled', true)
+    },
+
     onClickSearchInputAppend () {
       if (this.searchInputFocused) {
         this.onSearchFormSubmit()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordinaryroad-vuetify",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "private": false,
   "main": "src/main.js"
 }

src/locales/en.json

@@ -70,6 +70,7 @@
   },
   "search": "Search",
   "settings": "Settings",
+  "submit": "Submit",
   "systemHint": "System Hint",
   "term": {
     "agreeHint": "Please tick to agree \"Privacy Policy\"",