Vue + TS封装全局搜索组件

Dear 丶 2023-10-13 08:32 24阅读 0赞

本文介绍了如何使用Vue和TypeScript封装一个全局搜索组件。该组件可以方便地在Vue项目中使用，帮助用户快速定位所需信息。

### 组件功能 ###

该全局搜索组件具有以下功能：

*  可以搜索指定数据源中的数据
 *  支持模糊搜索和精确搜索
 *  可以自定义搜索结果的展示方式
 *  支持多种搜索数据源的切换

### 组件实现 ###

该组件基于Vue和TypeScript开发。首先，需要在Vue项目中安装依赖：

npm install vue-class-component vue-property-decorator --save

然后，在Vue单文件组件中定义全局搜索组件：

<template>
      <div class="search-container">
        <input v-model="keyword" @input="search" />
        <div v-for="result in results" :key="result.id" @click="select(result)">
          <slot :result="result">{
        {
         result }}</slot>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    import {
         Component, Prop, Watch } from 'vue-property-decorator';
    
    @Component
    export default class SearchComponent extends Vue {
        
      @Prop() data!: any[];
      @Prop({
         default: 'id' }) keyProp!: string;
      @Prop({
         default: 'name' }) labelProp!: string;
      @Prop({
         default: 'name' }) searchProp!: string;
      @Prop({
         default: true }) fuzzy!: boolean;
    
      keyword = '';
      results: any[] = [];
    
      search() {
        
        this.results = this.data.filter((item: any) => {
        
          const keyword = this.keyword.toLowerCase();
          const label = item[this.labelProp].toLowerCase();
          const searchValue = item[this.searchProp].toLowerCase();
    
          if (this.fuzzy) {
        
            return label.includes(keyword) || searchValue.includes(keyword);
          } else {
        
            return label === keyword || searchValue === keyword;
          }
        });
      }
    
      select(result: any) {
        
        this.keyword = result[this.labelProp];
        this.results = [];
        this.$emit('select', result);
      }
    }
    </script>

在上述代码中，我们定义了一个名为`SearchComponent`的Vue组件，该组件包含以下属性：

*  `data`：指定需要搜索的数据源
 *  `keyProp`：指定数据源中每个数据项的唯一标识符属性名，默认为`id`
 *  `labelProp`：指定数据源中每个数据项的展示名称属性名，默认为`name`
 *  `searchProp`：指定数据源中每个数据项的搜索属性名，默认为`name`
 *  `fuzzy`：指定是否使用模糊搜索方式，默认为`true`

在组件的模板中，我们使用`input`元素绑定了`keyword`属性，当用户输入关键字时触发`search`方法进行搜索，同时在`div`标签中使用`v-for`指令循环展示搜索结果，使用`slot`元素展示搜索结果的自定义展示方式。

### 组件使用 ###

要使用全局搜索组件，可以在Vue单文件组件中引用该组件，然后通过`data`属性指定需要搜索的数据源，如：

<template>
      <div>
        <search-component :data="users" />
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    import SearchComponent from './SearchComponent.vue';
    
    export default Vue.extend({
        
      components: {
        
        SearchComponent,
      },
      data() {
        
        return {
        
          users: [
            {
         id: 1, name: 'Tom', email: 'tom@example.com' },
            {
         id: 2, name: 'Jerry', email: 'jerry@example.com' },
            {
         id: 3, name: 'Alice', email: 'alice@example.com' },
            {
         id: 4, name: 'Bob', email: 'bob@example.com' },
          ],
        };
      },
    });
    </script>

在上述代码中，我们在Vue单文件组件中引用了`SearchComponent`组件，并通过`data`属性指定了需要搜索的数据源`users`。

### 总结 ###

本文介绍了如何使用Vue和TypeScript封装一个全局搜索组件。该组件可以方便地在Vue项目中使用，帮助用户快速定位所需信息。希望本文能够对Vue开发者有所帮助。