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

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

适用场景

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

知识点

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

效果图

el-dropdown(下拉菜单)的入门学习_第1张图片

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

官网

el-dropdown的学习官网

你可能感兴趣的:(element-ui,学习,elementui)