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

最新推荐文章于 2024-05-06 09:31:33 发布

自律最差的编程狗

最新推荐文章于 2024-05-06 09:31:33 发布

阅读量2.3w

点赞数 15

分类专栏： element-ui 文章标签：学习 elementui

本文链接：https://blog.csdn.net/qq_40765784/article/details/125445183

版权

element-ui 专栏收录该内容

43 篇文章 20 订阅

订阅专栏

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,即不可选中

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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>