ERP组件库

页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。

基本用法

下拉菜单的基本用法。下拉菜单开启后会为触发元素添加 fk-dropdown-open 类名。

代码事例

vue

<template>
  <fk-space size="large">
    <fk-dropdown @select="handleSelect" @popupVisibleChange="handlePopupVisibleChange">
      <fk-button>Click Me</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption disabled>Option 2</fk-doption>
        <fk-doption :value="{ value: 'Option3' }">Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown disabled @select="handleSelect">
      <fk-button disabled>Click Me</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption disabled>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown :popup-max-height="false" @select="handleSelect">
      <fk-button>No Max Height <icon-down class=""/></fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption disabled>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
        <fk-doption>Option 4</fk-doption>
        <fk-doption>Option 5</fk-doption>
        <fk-doption>Option 6</fk-doption>
        <fk-doption>Option 7</fk-doption>
        <fk-doption>Option 8</fk-doption>
        <fk-doption>Option 9</fk-doption>
      </template>
    </fk-dropdown>
  </fk-space>
</template>

<script>
export default {
  setup() {
    const handleSelect = (v) => {
      console.log(v)
    };

    const handlePopupVisibleChange = (v) => {
      console.log('handlePopupVisibleChange >>', v);
    }

    return {
      handleSelect,
      handlePopupVisibleChange
    }
  },
}
</script>

<style>
.fk-dropdown-open .fk-icon-down {
  transform: rotate(180deg);
}
</style>

弹出方向

通过 position 支持指定 6 种弹出方位，分别是：top: 向上, tl: 左上, tr: 右上, bottom: 下方(默认), bl: 左下, br: 右下。

代码事例

vue

<template>
  <fk-space>
    <fk-dropdown position="bl">
      <fk-button>Bottom Left</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown position="bottom">
      <fk-button>Bottom</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown position="br">
      <fk-button>Bottom Right</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown position="tl">
      <fk-button>Top Left</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown position="top">
      <fk-button>Top</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown position="tr">
      <fk-button>Top Right</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
  </fk-space>
</template>

触发方式

通过 trigger 指定触发方式。

代码事例

vue

<template>
  <fk-space size="large">
    <fk-dropdown>
      <fk-button>Click Me</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
    <fk-dropdown trigger="hover">
      <fk-button>Hover Me</fk-button>
      <template #content>
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </template>
    </fk-dropdown>
  </fk-space>
</template>

按钮下拉框

可以使用 <dropdown-button> 组件用来展示右边是额外相关功能菜单的按钮。

代码事例

vue

<template>
  <fk-space size="large">
    <fk-dropdown-button class="import-dropdown-button" label="Publish" :button-props="{ icon: 'erpfont icon-to-bottom' }">
      <template #content>
        <fk-doption>Save now</fk-doption>
        <fk-doption>Save and Publish</fk-doption>
      </template>
    </fk-dropdown-button>
    <fk-dropdown-button disabled>
      Disabled
      <template #content>
        <fk-doption>Save now</fk-doption>
        <fk-doption>Save and Publish</fk-doption>
      </template>
    </fk-dropdown-button>
    <fk-dropdown-button>
      Publish
      <template #icon>
        <icon-down />
      </template>
      <template #content>
        <fk-doption>Save now</fk-doption>
        <fk-doption>Save and Publish</fk-doption>
      </template>
    </fk-dropdown-button>
  </fk-space>

</template>

<style lang="less">
.fk-dropdown-open .fk-icon-down {
  transform: rotate(180deg);
}
.import-dropdown-button {
  .icon-to-bottom {
    margin-right: 5px;
  }
  .fk-dropdown-arrow-icon {
    margin-left: 8px;
  }
}
</style>

分组选项

通过 <dgroup> 组件使用分组选项。

代码事例

vue

<template>
  <fk-dropdown>
    <fk-button>Click Me</fk-button>
    <template #content>
      <fk-dgroup title="Group 1">
        <fk-doption>Option 1</fk-doption>
        <fk-doption>Option 2</fk-doption>
        <fk-doption>Option 3</fk-doption>
      </fk-dgroup>
      <fk-dgroup title="Group 2">
        <fk-doption>Option 4</fk-doption>
        <fk-doption>Option 5</fk-doption>
        <fk-doption>Option 6</fk-doption>
      </fk-dgroup>
    </template>
  </fk-dropdown>
</template>

多级菜单

带有多级菜单的下拉框。

代码事例

vue

<template>
  <fk-dropdown>
    <fk-button>Click Me</fk-button>
    <template #content>
      <fk-doption>Option 1</fk-doption>
      <fk-dsubmenu value="option-1">
        <template #default>Option 2</template>
        <template #content>
          <fk-doption>Option 2-1</fk-doption>
          <fk-dsubmenu value="option-2-2" trigger="hover">
            <template #default>Option 2-2</template>
            <template #content>
              <fk-doption>Option 2-1</fk-doption>
              <fk-doption>Option 2-2</fk-doption>
              <fk-doption>Option 2-3</fk-doption>
            </template>
            <template #footer>
              <div style="padding: 6px; text-align: center;">
                <fk-button>Click</fk-button>
              </div>
            </template>
          </fk-dsubmenu>
          <fk-doption>Option 2-3</fk-doption>
        </template>
      </fk-dsubmenu>
      <fk-doption>Option 3</fk-doption>
    </template>
  </fk-dropdown>
</template>

右键菜单

移入区域后，可点击鼠标右键触发。

代码事例

vue

<template>
  <fk-dropdown trigger="contextMenu" alignPoint :style="{display:'block'}">
    <div :style="{display:'flex',alignItems:'center',justifyContent:'center', height:'300px',backgroundColor:'var(--color-fill-2)'}">
      <div>Click Me</div>
    </div>
    <template #content>
      <fk-doption>Option 1</fk-doption>
      <fk-doption>Option 2</fk-doption>
      <fk-doption>Option 3</fk-doption>
    </template>
  </fk-dropdown>
</template>

带图标的选项

通过 icon 插槽在选项前添加图标。

代码事例

vue

<template>
  <fk-dropdown>
    <fk-button>Click Me</fk-button>
    <template #content>
      <fk-doption>
        <template #icon>
          <icon-location />
        </template>
        <template #default>Option 1</template>
      </fk-doption>
      <fk-doption>
        <template #icon>
          <icon-location />
        </template>
        <template #default>Option 2</template>
      </fk-doption>
      <fk-doption>
        <template #icon>
          <icon-location />
        </template>
        <template #default>Option 3</template>
      </fk-doption>
    </template>
  </fk-dropdown>
</template>

<dropdown> 组件继承 <trigger> 组件的全部属性

API

`<dropdown>` Props

参数名	描述	类型	默认值	版本
popup-visible (v-model)	弹出框是否可见	`boolean`	`-`
default-popup-visible	弹出框默认是否可见（非受控模式）	`boolean`	`false`
trigger	触发方式	`'hover' \| 'click' \| 'focus' \| 'contextMenu'`	`'click'`
position	弹出位置	`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`	`'bottom'`
popup-container	弹出框的挂载容器	`string \| HTMLElement`	`-`
hide-on-select	是否在用户选择后隐藏弹出框	`boolean`	`true`	1.0.0
show-arrow-down	显现下拉箭头	`boolean`	`false`
dropdown-class	下拉面板样式	`string`	`-`

`<dropdown>` Events

事件名	描述	参数
popup-visible-change	下拉框显示状态发生改变时触发	visible: `boolean`
select	用户选择时触发	value: `string \| number \| Record<string, any> \| undefined` ev: `Event`

`<dropdown>` Slots

插槽名	描述	参数	版本
content	内容	-
footer	页脚	-	1.0.0

`<doption>` Props

参数名	描述	类型	默认值
value	选项值	`string\|number\|object`	`-`
disabled	是否禁用	`boolean`	`false`

`<doption>` Events

事件名	描述	参数
click	点击按钮时触发	ev: `MouseEvent`

`<doption>` Slots

插槽名	描述	参数
icon	图标	-

`<dgroup>` Props

参数名	描述	类型	默认值
title	分组标题	`string`	`-`

`<dgroup>` Slots

插槽名	描述	参数	版本
title	分组标题	-	1.0.0

`<dsubmenu>` Props

参数名	描述	类型	默认值	版本
value	选项值（2.16.0 版本后暂无用处）	`string\|number`	`-`
disabled	是否禁用	`boolean`	`false`	1.0.0
trigger	触发方式	`'hover' \| 'click'`	`'click'`	1.0.0
position	弹出位置	`'rt' \| 'lt'`	`'rt'`	1.0.0
popup-visible (v-model)	弹出框是否可见	`boolean`	`-`
default-popup-visible	弹出框默认是否可见（非受控模式）	`boolean`	`false`
option-props	自定义选项属性	`object`	`-`	1.0.0

`<dsubmenu>` Events

事件名	描述	参数
popup-visible-change	下拉框显示状态发生改变时触发	visible: `boolean`

`<dsubmenu>` Slots

插槽名	描述	参数	版本
icon	图标	-	1.0.0
content	子菜单内容	-
footer	页脚	-	1.0.0

`<dropdown-button>` Props

参数名	描述	类型	默认值
popup-visible (v-model)	弹出框是否可见	`boolean`	`-`
default-popup-visible	弹出框默认是否可见（非受控模式）	`boolean`	`false`
trigger	触发方式	`'hover' \| 'click' \| 'focus' \| 'contextMenu'`	`'click'`
position	弹出位置	`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`	`'br'`
popup-container	弹出框的挂载容器	`string \| HTMLElement`	`-`
disabled	是否禁用	`boolean`	`false`
type	按钮类型	`ButtonTypes`	`-`
size	按钮大小	`Size`	`-`
button-props	按钮属性	`ButtonProps`	`-`
hide-on-select	是否在用户选择后隐藏弹出框	`boolean`	`true`
label	标签	`string`	`-`

`<dropdown-button>` Events

事件名	描述	参数
popup-visible-change	下拉框显示状态发生改变时触发	visible: `boolean`
click	点击按钮时触发	ev: `MouseEvent`
select	用户选择时触发	value: `string \| number \| Record<string, any> \| undefined` ev: `Event`

`<dropdown-button>` Slots

插槽名	描述	参数
icon	按钮图标	popupVisible: `boolean`
content	内容	-

Form 动态表单

SearchForm 查询表单

Table 数据表格

页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。

基本用法

弹出方向

触发方式

按钮下拉框

分组选项

多级菜单

右键菜单

带图标的选项

API

`<doption>` Props

`<doption>` Events

`<doption>` Slots

`<dgroup>` Props

`<dgroup>` Slots

`<dsubmenu>` Props

`<dsubmenu>` Events

`<dsubmenu>` Slots

下拉菜单 Dropdown ​

页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。 ​

基本用法 ​

弹出方向 ​

触发方式 ​

按钮下拉框 ​

分组选项 ​

多级菜单 ​

右键菜单 ​

带图标的选项 ​

API ​

<dropdown> Props ​

<dropdown> Events ​

<dropdown> Slots ​

<doption> Props ​

<doption> Events ​

<doption> Slots ​

<dgroup> Props ​

<dgroup> Slots ​

<dsubmenu> Props ​

<dsubmenu> Events ​

<dsubmenu> Slots ​

<dropdown-button> Props ​

<dropdown-button> Events ​

<dropdown-button> Slots ​

下拉菜单 Dropdown

页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。

基本用法

弹出方向

触发方式

按钮下拉框

分组选项

多级菜单

右键菜单

带图标的选项

API

`<dropdown>` Props

`<dropdown>` Events

`<dropdown>` Slots

`<doption>` Props

`<doption>` Events

`<doption>` Slots

`<dgroup>` Props

`<dgroup>` Slots

`<dsubmenu>` Props

`<dsubmenu>` Events

`<dsubmenu>` Slots

`<dropdown-button>` Props

`<dropdown-button>` Events

`<dropdown-button>` Slots