结合子输入框的页面搜索

本hooks适用于vue3

使用方法

只需要在页面中引入hook，即可通过子输入框进行页面搜索

变量说明

• keyword: 用户搜索的关键字
• available：当前是否在搜索中
• forward：上一个搜索结果
• findNext：下一个搜索结果
• close：关闭搜索

特殊说明

按Enter进行下一个搜索结果，按shift + Enter跳转上一个搜索结果

代码演示

<template>
  <div>文本文本文本文本文本</div>
</template>
<script lang="ts" setup>
  import {usePageSearch} from '@/hooks/usePageSearch';
  
  const {keyword, available, forward, findNext, close} = usePageSearch();
</script>
<style></style>

代码

usePageSearch.ts

import {computed, onMounted, onUnmounted, ref, watch} from "vue";

export function usePageSearch(placeholder = '在页面中搜索') {
  const keyword = ref('');

  const available = computed(() => keyword.value.trim() !== '');


  watch(keyword, text => {
    if (text) {
      utools.findInPage(text, {
        matchCase: false,
        wordStart: true
      });
    } else {
      utools.stopFindInPage('clearSelection')
    }
  });

  function forward() {
    if (keyword.value) {
      utools.findInPage(keyword.value, {
        matchCase: false,
        forward: false,
        findNext: true
      });
    }
  }

  function findNext() {
    if (keyword.value) {
      utools.findInPage(keyword.value, {
        matchCase: false,
        forward: true,
        findNext: false,
      });
    }
  }

  function onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      if (keyword.value) {
        if (e.shiftKey) {
          forward();
        } else {
          findNext();
        }
      }
    }
  }

  onMounted(() => {
    utools.setSubInput(({text}) => keyword.value = text, placeholder, true);
    window.addEventListener('keydown', onKeyDown)
  });

  onUnmounted(() => {
    window.removeEventListener('keydown', onKeyDown);
    utools.removeSubInput()
  });

  function close() {
    utools.setSubInputValue('')
  }

  return {keyword, available, forward, findNext, close}


}

usePageSearch.js

import {computed, onMounted, onUnmounted, ref, watch} from "vue";

export function usePageSearch(placeholder = '在页面中搜索') {
  const keyword = ref('');

  const available = computed(() => keyword.value.trim() !== '');


  watch(keyword, text => {
    if (text) {
      utools.findInPage(text, {
        matchCase: false,
        wordStart: true
      });
    } else {
      utools.stopFindInPage('clearSelection')
    }
  });

  function forward() {
    if (keyword.value) {
      utools.findInPage(keyword.value, {
        matchCase: false,
        forward: false,
        findNext: true
      });
    }
  }

  function findNext() {
    if (keyword.value) {
      utools.findInPage(keyword.value, {
        matchCase: false,
        forward: true,
        findNext: false,
      });
    }
  }

  function onKeyDown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      if (keyword.value) {
        if (e.shiftKey) {
          forward();
        } else {
          findNext();
        }
      }
    }
  }

  onMounted(() => {
    utools.setSubInput(({text}) => keyword.value = text, placeholder, true);
    window.addEventListener('keydown', onKeyDown)
  });

  onUnmounted(() => {
    window.removeEventListener('keydown', onKeyDown);
    utools.removeSubInput()
  });

  function close() {
    utools.setSubInputValue('')
  }

  return {keyword, available, forward, findNext, close}


}