Skip to content
On this page

下拉

按钮组件是对 Element Plus 的下拉菜单组件 进行二次封装成 JSON 配置模式,除了支持 Element Plus 的 弹窗基本功能之外还扩展了其他功能

文件说明

  • 组件地址:components/Dropdown/src/Dropdown.vue

  • 组件类型文件:components/Dropdown/types.ts

参数json格式

<dropdownOption> = {
  icon: {
    // 图标可为引入的Svg图标文件名或element-plus的图标名(首字母大写)
    prefixIcon: '',  // 前缀图标名
    suffixIcon: '',	// 后缀图标名
    type: '', // 图标的类型 值为 svg 或 el
    size: '', // 图标的大小
  }
  title: '' | {} // 下拉菜单名称或配置
  attr: {}, // 参考 element-plus el-dropdown 的属性以及HTML元素属性
  event: {}, // 参考 element-plus el-dropdown 的事件以及HTML事件属性
  ref: ref(), // ekl-dropdown组件的实例对象
  items: [  // 渲染的下拉菜单项数组
    {
      attr:{}// 参考 element-plus el-dropdown-item 的属性以及HTML元素属性
	  icon: {},
      content: '' || {}, // 菜单项的文本内容
	  slot:'' // 下拉项插槽名称
     }
  ]
}

参数说明

属性名说明类型默认值
icon菜单标题图标IconType-
title下拉菜单名配置,传入对象,则使用配置项生成组件;传入字符串默认显示字符串CompType 或 string-
attrel-dropdown的属性对象,参考 element-plus el-dropdown 的属性以及HTML元素属性Record<String, any>-
eventel-dropdown的事件对象,参考 element-plus el-dropdown 的事件以及HTML事件属性Record<String, any>-
refel-dropdown组件的实例对象Ref<T>-
items渲染的下拉菜单项数组Array<DropdownItemType>-
属性名说明类型默认值
attrel-dropdown-item的属性对象,参考 element-plus el-dropdown-item 的属性以及HTML元素属性Record<String, any>-
icon菜单项图标配置对象IconType-
content菜单项的文本内容或菜单项的渲染配置对象String | CompType-
slot下拉插槽名称String-

IconType

属性名说明类型默认值
prefixIcon前缀图标名String-
suffixIcon后缀图标名String-
isSvgIcon是否为自引入svg图标Boolean-
size图标的大小String-

插槽

名称描述
default下拉内容默认插槽

示例

</>

sewen-ui design by Sewen