diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 59c51a0..463cdda 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -1,13 +1,16 @@
import * as tsx from 'vue-tsx-support';
-import { CreateElement, VNode } from 'vue';
+import { CreateElement, VNode, VNodeDirective } from 'vue';
import { BtnType, BtnTypes, Btn, BtnState } from '../Btn';
import { IconType } from '../Icon';
-import { flattenListener } from '../../utils/listener';
import { VerticalMenu } from '../VerticalMenu';
+import { ClickOutside } from '../../directives/ClickOutside';
+import { flattenListener } from '../../utils/listener';
export const DropdownMenu = /*#__PURE__*/ tsx.component({
name: 'DropdownMenu',
- functional: true,
+ directives: {
+ ClickOutside,
+ },
props: {
items: { type: [Object, Array], default: undefined },
right: { type: Boolean },
@@ -16,27 +19,36 @@ export const DropdownMenu = /*#__PURE__*/ tsx.component({
btnIcon: { type: String as () => IconType, default: undefined },
state: { type: String as () => BtnState, default: undefined },
},
- render(h: CreateElement, { props, listeners, scopedSlots }): VNode {
- const onOpen = (): ((event: any) => void) => flattenListener(listeners.opened);
- const onClose = (): ((event: any) => void) => flattenListener(listeners.closed);
- const btnCssClass = ['dropdown-toggle', BtnTypes[props.btnType]];
+ render(h: CreateElement): VNode {
+ const onOpen = flattenListener(this.$listeners.opened);
+ const onClose = flattenListener(this.$listeners.closed);
+ const btnCssClass = [BtnTypes[this.btnType], 'dropdown-toggle'];
const btn = (