当前位置：首页 > news >正文

Vue Kubernetes项目局部布局下拉菜单

news 来源：原创 2025/5/26 4:45:52

下拉菜单 [el-dropdown]

下拉菜单也比较简单，就是类似于按钮下面来一个下拉菜单。

示例Demo如下：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item>Action 2</el-dropdown-item>
      <el-dropdown-item>Action 3</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  // 组件的逻辑代码
};
</script>

<style>
/* 组件的样式代码 */
</style>

其中el-dropdown组件包含了一个el-dropdown-menu，el-dropdown-menu包含了多个el-dropdown-item，这些项就是菜单中的选项

对于属性和时间中，el-dropdown组件支持一系列属性和事件，用于定制和控制其行为。例如，可以使用trigger属性来设置触发下拉菜单的方式（默认是鼠标悬停），还可以监听command事件来处理菜单项被点击时的操作

也提供了多个插槽，允许定制菜单的内容和样式。使用slot属性来指定插槽的位置，常用的插槽包括dropdown、dropdown-title、dropdown-icon等。

示例：

                      <el-col class="header-menu" :span="13">
                              <el-dropdown >
                                 <!--下拉框-->
                                  <div class="header-dropdown">
                                    <el-image :src="avator" class="avator-image" />
                                    <span>{{ username }}</span>
                                  </div>
                                <!--下拉内容 插槽的方式-->
                                  <template #dropdown>
                                     <el-dropdown-menu >
                                        <el-dropdown-item disabled>修改密码</el-dropdown-item>
                                        <el-dropdown-item @click="logout">退出</el-dropdown-item>
                                     </el-dropdown-menu>
                                  </template>
                              </el-dropdown>                          
                      </el-col>



   .header-dropdown {
      line-height: 60px;
   }

   .avator-image {
      width: 30px;
      height: 30px;
      top: 12px;
      border-radius: 50%;
      margin-right: 8px;
   }

   .header-menu {
     text-align: right;
   }

补充

在div标签中输入文字，这时默认情况下div里面的文字靠左居中：

为div标签添加属性“text-align: right;”，“text-align”指的是文字对齐方式，“ right”指的是靠右对齐，这时div里面的文字就会靠右对齐：

在Vue-cli脚手架搭建的项目中，必须要带有require，直接使用相对路径或绝对路径引用是不行滴！

<el-image :src="require('@/assets/2.png')" />  //√
<el-image :src="require('../assets/2.png')" />  //√
 
<el-image src="@/assets/2.png" />  //X
<el-image src="../assets/2.png" />  //X