element-ui搜索框

Element UI 提供了一个搜索框组件，可以在前端页面实现搜索功能。你可以按照以下步骤使用 Element UI 的搜索框组件：

1. 安装 Element UI：你可以通过 npm 或 yarn 安装 Element UI，命令如下：

npm install element-ui
# 或者
yarn add element-ui

2. 导入 Element UI 组件：在你的 Vue 组件中，导入需要的组件，例如 `el-input` 和 `el-button`。示例代码如下：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索关键字"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
  </div>
</template>

<script>
import { ElInput, ElButton } from 'element-ui';

export default {
  components: {
    ElInput,
    ElButton,
  },
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    search() {
      // 在这里编写搜索逻辑
      console.log('搜索关键字：', this.keyword);
    },
  },
};
</script>

3. 使用搜索框组件：在你的页面中引用刚才创建的组件，示例代码如下：

<template>
  <div>
    <search-box></search-box>
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue';

export default {
  components: {
    SearchBox,
  },
};
</script>

这样，在你的页面上就会显示一个带有输入框和搜索按钮的搜索框组件。当用户输入关键字并点击搜索按钮时，会触发 `search` 方法，你可以在该方法中编写实际的搜索逻辑。