定制开发el-dropdown（下拉菜单）

适用场景

定制开发与选择器相似，定制开发但是点击选择选项时，定制开发选项框可以不收起。

知识点

1. el-dropdown嵌套el-dropdown-menu，el-dropdown-menu嵌套el-dropdown-item使用
2. 下拉可设置成文本+图标，按钮+图标，统一在el-dropdown的标签包裹位置设置
3. 按钮+分割线+图标的设置通过el-dropdown中的split-button和type属性控制，@click事件点击按钮文本触发
4. el-dropdown的trigger默认为hover，可以设置为click
5. el-dropdown的hide-on-click默认为true，即下拉菜单选项被选中后，会自动关闭下拉菜单，设置为false，不会自动关闭
6. size可以控制下拉菜单的大小
7. el-dropdown-menu需要指定slot为dropdown
8. el-dropdown-item设置icon,左侧显示图标
9. el-dropdown-item设置command对应el-dropdown的@command的参数
10. el-dropdown-item设置divided 可以在菜单选项上方显示分割线
11. el-dropdown和el-dropdown-item设置disabled,即不可选中

示例代码

<el-dropdown      v-if="showRgbImage"      class="selectImage"      trigger="click"      placement = "bottom-start"      :hide-on-click = "false"      @command="selectImageChange"      @visible-change="removeImage">      <span class="el-dropdown-link" style="display: inline-block;position: relative;width: 100%">        影像展示<i class="el-icon-arrow-down el-icon--right" style="position: absolute;right: 0px;top: 7px"></i>      </span>      <el-dropdown-menu slot="dropdown">        <el-dropdown-item v-for="item in imageArray" :command="item">          {{item.dateTime.substring(0,4)}}年{{item.dateTime.substring(4,6)}}月{{item.dateTime.substring(6,8)}}日        </el-dropdown-item>      </el-dropdown-menu></el-dropdown>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参考连接：