element-ui下拉菜单使用

一、实例代码(登录后进行退出操作)：

<el-dropdown class="user-name" split-button trigger="click" @command="handleCommand">

                        <span class="el-dropdown-link">

                            {{username}} <i class="el-icon-caret-bottom"></i>

                        </span>

                        <el-dropdown-menu slot="dropdown">

                            <el-dropdown-item  command="loginout">退出登录</el-dropdown-item>

                        </el-dropdown-menu>

</el-dropdown>

handleCommand(command) {

                if(command == 'loginout'){

                    //清除用户信息

                    this.$router.push('/login');

                }

},

二、腾讯社区文档：

1、通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

2、设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。

3、可以配置 click 激活或者 hover 激活。在trigger属性设置为click即可。

4、可以hide-on-click属性来配置菜单隐藏方式。下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。

5、点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作

6、Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

三、属性列表记录一下：