el-dropdown(下拉菜单)的入门学习

本文介绍: el–dropdown的入门学习

el–dropdown(下拉 菜单)的入门 学习

适用场景

el-dropdown和el-select的展示效果很相似，我暂时还未找到el-dropdown适合的使用场景

知识点

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

效果图

在这里插入图片描述

代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    <meta charset="UTF-8"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Document</title&gt;
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&gt;
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;</script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <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 icon='el-icon-view'>杨枝甘露</el-dropdown-item>
                <el-dropdown-item icon='el-icon-search' disabled>疏灌丛</el-dropdown-item>
                <el-dropdown-item icon='el-icon-edit' divided>伯伯奶茶</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
            <el-button type='primary'>更多菜单<i class='el-icon-arrow-down el-icon--right'></i></el-button>
            <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item icon='el-icon-delete'>金色传说</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown size='mini' @command='handleCommand' :hide-on-click='false' trigger='click' split-button type='primary' @click='handleClick'>
            土豆英雄
            <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item icon='el-icon-mail' command='s'>众神之王</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</body>
</html>

<style>
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>

<script>
    new Vue({
        el:"#app",
        data(){
            return{}
        },
        methods:{
            handleClick(){
                console.log('handleClick')
            },
            handleCommand(command){
                console.log(command)
            }
        }
    })
</script>