vue➕elementui实现搜索框样式的导航栏

Vue.js 结合 Element UI 可以轻松地创建一个功能丰富的搜索框样式导航栏。Element UI 提供了预设的样式和组件，可以快速搭建界面。以下是实现步骤：

1. 首先，在 Vue 项目中安装 Element UI 和相关的依赖库：

   npm install element-ui --save

2. 引入所需的 CSS 文件，并在 Vue 的 main.js 或 App.vue 中导入 Element UI 框架：

   import { createApp } from 'vue';
   import ElementUI from 'element-plus';
   import 'element-plus/dist/index.css'; // 引入全局样式
   const app = createApp(App);
   app.use(ElementUI);

3. 创建一个包含搜索框的导航栏模板，例如在 `nav.vue` 组件里：

   <template>
     <el-menu :default-active="$route.path" class="navbar">
       <el-menu-item index="/">首页</el-menu-item>
       <el-submenu index="1">
         <template slot="title">菜单</template>
         <el-menu-item v-for="(item, index) in items" :key="index" :index="item.path">{{ item.name }}</el-menu-item>
       </el-submenu>
       <el-form-item style="text-align:right;">
         <el-input v-model="searchText" placeholder="请输入搜索内容" @input="search"/>
       </el-form-item>
     </el-menu>
   </template>

   <script>
   export default {
     data() {
       return {
         searchText: '',
         items: [
           { name: '子菜单1', path: '/submenu1' },
           { name: '子菜单2', path: '/submenu2' }
         ]
       };
     },
     methods: {
       search(query) {
         this.$emit('search', query); // 当搜索框输入变化时，触发自定义事件传递给父组件
       }
     }
   };
   </script>

4. 在父组件（如 App.vue）中引入并使用这个导航栏组件，并监听其 `search` 事件来处理搜索功能：

   <template>
     <div id="app">
       <nav-search @search="handleSearch"></nav-search> <!-- 这里是 nav.vue 的引用 -->
       <router-view></router-view>
     </div>
   </template>

   <script>
   import NavSearch from './components/NavSearch.vue';
   export default {
     components: {
       NavSearch
     },
     methods: {
       handleSearch(query) {
         console.log('搜索关键词:', query);
         // 这里可以根据查询关键字对路由或数据进行过滤操作
       }
     }
   }
   </script>

通过以上步骤，你就实现了Vue + Element UI 中的搜索框样式导航栏。用户可以在搜索框中输入内容，而导航栏的内容会根据输入的关键字进行动态筛选。