DropdownV2 下拉菜单 ​

<template>
  <el-space>
    <el-dropdown-v2
      trigger="hover"
      :options="options"
      :trigger-props="{ triggerText: 'Hover Me' }"
      @change="handleChange"
    />
    <el-dropdown-v2
      split-button
      trigger="hover"
      :options="options"
      :trigger-props="{
        triggerText: 'Hover Icon',
        onClick() {
          ElMessage('do some thing')
        },
      }"
      @change="handleChange"
    />
    <el-dropdown-v2
      trigger="click"
      :options="options"
      :trigger-props="{
        triggerText: 'Click Me',
      }"
      @change="handleChange"
    />
    <el-dropdown-v2
      trigger="click"
      split-button
      :options="options"
      :trigger-props="{
        triggerText: 'Click Icon',
        type: '',
        onClick() {
          ElMessage('do some thing')
        },
      }"
      @change="handleChange"
    />
  </el-space>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'

const handleChange = (value, valuePath) => {
  console.log(value, valuePath)
}

const options = [
  {
    label: '选项一',
    value: '1',
  },
  {
    label: '选项二',
    value: '2',
    disabled: true,
  },
  {
    label: '选项三',
    value: '3',
    children: [
      {
        label: '子选项一',
        value: '3-1',
      },
      {
        label: '子选项二',
        value: '3-2',
      },
      {
        label: '子选项三',
        value: '3-3',
      },
    ],
  },
  {
    label: '选项四',
    value: '4',
  },
]
</script>

<template>
  <el-dropdown-v2
    width="100"
    trigger="click"
    :options="options"
    @change="handleChange"
  >
    <el-button type="primary">
      Click Me<el-icon class="el-icon--right"><CaretBottom /></el-icon>
    </el-button>
  </el-dropdown-v2>
</template>

<script lang="ts" setup>
import { ElButton, ElIcon } from 'element-plus'
import { CaretBottom } from '@element-plus/icons-vue'

const handleChange = (value, valuePath) => {
  console.log(value, valuePath)
}

const options = [
  {
    label: '选项一',
    value: '1',
  },
  {
    label: '选项二',
    value: '2',
  },
  {
    label: '选项三',
    value: '3',
    divided: true,
    children: [
      {
        label: '子选项一',
        value: '3-1',
      },
      {
        label: '子选项二',
        value: '3-2',
      },
      {
        label: '子选项三',
        value: '3-3',
      },
    ],
  },
  {
    label: '选项四',
    value: '4',
  },
]
</script>

<template>
  <el-card class="dropdown-v2-card">
    <el-dropdown-v2
      width="110"
      trigger="click"
      :options="options"
      :tooltip-options="tooltipOptions"
      @change="handleChange"
    >
      <div class="icon-wrapper">
        <el-icon><MoreFilled /></el-icon>
      </div>
    </el-dropdown-v2>
  </el-card>
</template>

<script lang="ts" setup>
import { ElIcon } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'

const handleChange = (value, valuePath) => {
  console.log(value, valuePath)
}

const tooltipOptions = {
  offset: 8,
  showArrow: true,
  placement: 'bottom-start',
}

const options = [
  {
    label: '编辑',
    value: 'edit',
  },
  {
    label: '删除',
    value: 'del',
  },
  {
    label: '复制',
    value: 'copy',
    children: [
      {
        label: '该节点',
        value: 'node1',
      },
      {
        label: '该节点以下',
        value: 'node2',
      },
    ],
  },
  {
    label: '黏贴到同级',
    value: 'paste',
  },
]
</script>

<style lang="scss" scoped>
.dropdown-v2-card {
  width: 260px;
  height: 140px;
  display: flex;
  justify-content: flex-end;
  .icon-wrapper {
    width: 40px;
    display: flex;
    justify-content: center;
    i {
      cursor: pointer;
    }
  }
}
</style>

<template>
  <el-dropdown-v2
    width="180"
    trigger="click"
    :options="options"
    :trigger-props="{ triggerText: 'Click Me' }"
    @change="handleChange"
  >
    <template #label="{ label, value, disabled, children }">
      <div v-if="children.length" class="el-dropdown-v2-item">
        <div>
          {{ label }}-{{ value }}-{{ disabled }}-childs:{{ children.length }}
        </div>
      </div>
      <div v-else>{{ label }}-{{ value }}-{{ disabled }}</div>
    </template>
  </el-dropdown-v2>
</template>

<script lang="ts" setup>
const handleChange = (value, valuePath) => {
  console.log(value, valuePath)
}

const options = [
  {
    label: '选项一',
    value: '1',
  },
  {
    label: '选项二',
    value: '2',
    disabled: true,
  },
  {
    label: '选项三',
    value: '3',
    children: [
      {
        label: '子选项一',
        value: '3-1',
      },
      {
        label: '子选项二',
        value: '3-2',
      },
      {
        label: '子选项三',
        value: '3-3',
      },
    ],
  },
  {
    label: '选项四',
    value: '4',
  },
]
</script>

<template>
  <el-dropdown-v2-panel :options="options" @select="handleSelect" />
</template>

<script lang="ts" setup>
const handleSelect = (value: string, valuePath: string[]) => {
  console.log(value, valuePath)
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation1',
        label: 'Navigation1',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'color',
            label: 'Color',
          },
          {
            value: 'typography',
            label: 'Typography',
          },
          {
            value: 'icon',
            label: 'Icon',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'checkbox',
            label: 'Checkbox',
          },
          {
            value: 'input',
            label: 'Input',
          },
          {
            value: 'input-number',
            label: 'InputNumber',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker',
          },
          {
            value: 'upload',
            label: 'Upload',
          },
          {
            value: 'rate',
            label: 'Rate',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'tag',
            label: 'Tag',
          },
          {
            value: 'progress',
            label: 'Progress',
          },
          {
            value: 'tree',
            label: 'Tree',
          },
          {
            value: 'pagination',
            label: 'Pagination',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'loading',
            label: 'Loading',
          },
          {
            value: 'message',
            label: 'Message',
          },
          {
            value: 'message-box',
            label: 'MessageBox',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          },
          {
            value: 'tabs',
            label: 'Tabs',
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb',
          },
          {
            value: 'dropdown',
            label: 'Dropdown',
          },
          {
            value: 'steps',
            label: 'Steps',
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          },
          {
            value: 'tooltip',
            label: 'Tooltip',
          },
          {
            value: 'popover',
            label: 'Popover',
          },
          {
            value: 'card',
            label: 'Card',
          },
          {
            value: 'carousel',
            label: 'Carousel',
          },
          {
            value: 'collapse',
            label: 'Collapse',
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
</script>