element-plus点击按钮展开导航栏

Element Plus 是一套基于 Vue.js 的桌面端组件库。在 Element Plus 中实现点击按钮展开导航栏的功能，你需要结合 HTML、CSS 和 JavaScript 来完成这个任务。

### 技术栈概述：

1. **HTML**：用于创建页面结构。
2. **CSS**：通过样式控制元素的外观，包括但不限于按钮和导航栏的显示状态。
3. **JavaScript / Vue.js**：用于处理用户交互事件，如按钮点击事件，并更新界面状态。

### 实现步骤：

#### 步骤 1: 创建基础组件

首先，在 `src/components` 目录下创建一个新的 `.vue` 文件，例如命名为 `Navbar.vue`:

<template>
  <div class="navbar">
    <button @click="toggleCollapse">展开/收起</button>
    <nav v-if="isCollapsed === false" class="menu">
      <!-- 这里可以添加导航项 -->
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true,
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
}

.menu {
  display: none;
}
</style>

在这个例子中，我们定义了一个名为 `Navbar` 的基本组件，它包含一个按钮和一个条件渲染的导航菜单。当按钮被点击时，将调用 `toggleCollapse` 方法改变 `isCollapsed` 属性的值，进而切换导航栏的状态。

#### 步骤 2: 引入并注册组件到主应用

接下来，在项目的 `main.js` 或 `App.vue` 中引入并注册 `Navbar` 组件：

import Vue from 'vue';
import App from './App.vue';
import Navbar from './components/Navbar.vue';

Vue.component('navbar-component', Navbar);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

这里我们引入了 `Navbar` 组件，并将其作为 Vue 应用的一部分进行注册。

#### 步骤 3: 在应用视图中使用组件

最后，在 `App.vue` 文件或需要展示导航栏的位置引入并使用 `Navbar` 组件：

<template>
  <div id="app">
    <navbar-component />
  </div>
</template>

通过以上步骤，你可以成功地在 Element Plus 中实现点击按钮展开导航栏的功能。为了提高用户体验，你还可以进一步优化界面设计和交互逻辑，比如添加动画效果、键盘操作支持等。

###