下拉菜单 [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