Vue + element-ui + TS封装全局搜索组件

本文介绍了如何在Vue项目中使用element-ui和TypeScript封装一个全局搜索组件。

依赖安装

首先需要安装Vue、element-ui和TypeScript依赖：

npm install vue element-ui --save
npm install typescript ts-loader --save-dev

组件封装

全局搜索组件是一个通用的搜索框，可以在整个应用中使用。我们可以使用Vue的全局组件来实现这个功能。

创建组件

首先，我们需要在src/components目录下创建一个SearchBox.vue文件，用来封装搜索框组件。

<template>
  <el-input v-model="keyword" placeholder="请输入关键字" @keyup.enter.native="handleSearch"></el-input>
</template>

<script lang="ts">
import {
    
     Component, Vue } from 'vue-property-decorator';

@Component
export default class SearchBox extends Vue {
    
    
  keyword: string = '';

  handleSearch() {
    
    
    this.$emit('search', this.keyword);
  }
}
</script>

在这个组件中，我们使用了element-ui的Input组件来实现搜索框，通过v-model指令实现了双向绑定。同时，我们在keyup.enter事件中调用了handleSearch方法，来触发搜索操作。

注册组件

接下来，我们需要在main.ts文件中注册这个组件，以便在全局中使用。

import Vue from 'vue';
import SearchBox from './components/SearchBox.vue';

Vue.component('SearchBox', SearchBox);

使用组件

最后，我们可以在任何需要搜索框的地方使用这个组件。

<template>
  <div>
    <search-box @search="handleSearch"></search-box>
    <!-- 其他内容 -->
  </div>
</template>

<script lang="ts">
import {
    
     Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
    
    
  handleSearch(keyword: string) {
    
    
    // 处理搜索请求
  }
}
</script>

在这个例子中，我们在MyComponent组件中使用了SearchBox组件，并通过@search事件来处理搜索请求。

总结

通过以上步骤，我们成功地封装了一个全局搜索组件，并在Vue项目中使用了它。使用TypeScript可以使我们的代码更加健壮和易于维护。