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