搜索功能复杂逻辑的思考与项目总结

小二李

于 2024-03-18 22:15:29 发布

阅读量238

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 3.0实战项目之『万年历』文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43800535/article/details/136635099

Vue 3.0实战项目之『万年历』专栏收录该内容

14 篇文章

订阅专栏

文章描述了一个Vue组件SearchInput，使用Vuex管理状态，当输入框长度达到最大限制或变为0时，调用相应服务获取数据。同时，组件还监听field变化，清空输入框内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src\components\SearchInput\index.vue

<template>
  <div class="search-wrap">
    <input
      type="text"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :value="inputValue"
      @input="searchData($event)"
    />
  </div>
</template>

<script>
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'

import { formatUserDate, getNowDate } from '@/libs/utils'
import getData from '@/services'
export default {
  name: 'SearchInput',
  props: {
    placeholder: String,
    maxlength: Number,
  },
  setup(props) {
    const inputValue = ref(''),
      store = useStore(),
      state = store.state

    const searchData = (e) => {
      inputValue.value = e.target.value

      const field = computed(() => state.field).value
      // 输入长度跟设定的maxlength相等时，调用接口
      if (inputValue.value.length === props.maxlength) {
        getData(store, field, formatUserDate(inputValue.value))
      } else if (inputValue.value.length === 0) {
        getData(store, field, getNowDate(field))
      }
    }

    /**
     * 监听 field 变化，清空输入框的值
     */
    watch(
      () => {
        return state.field
      },
      () => {
        inputValue.value = ''
      }
    )
    return {
      inputValue,
      searchData,
    }
  },
}
</script>