ソースを参照

feat(menu): 增加open和close事件 (#1848)

* docs: 菜单组件文档添加 toggle 事件说明

* docs: 修改菜单组件的英文文档

* docs: 修改菜单组件的英文文档

* feat: 菜单组件增加open和close方法
yangjinjun3 3 年 前
コミット
194596f1cf

+ 35 - 0
src/packages/__VUE/menu/__tests__/menu.spec.ts

@@ -292,3 +292,38 @@ test('menu title-class props: nut-menu__title classes should contain custom-titl
 
   expect(menuTitle.classes()).toContain('custom-title-class');
 });
+
+test('menu item open and close events: should be both emitted', async () => {
+  const wrapper = mount({
+    components: {
+      NutMenu: Menu,
+      NutMenuItem: MenuItem
+    },
+    template: `
+    <nut-menu>
+    <nut-menu-item v-model="value2" @open="handleOpen" @close="handleClose" :options="options2" />
+  </nut-menu>
+    `,
+    data: () => {
+      return {
+        value2: 'a',
+        options2
+      };
+    },
+    methods: {
+      handleOpen(val: any) {
+        (this as any).value2 = 'b';
+      },
+      handleClose(val: any) {
+        (this as any).value2 = 'c';
+      }
+    }
+  });
+
+  await nextTick();
+  wrapper.find('.nut-menu__item').trigger('click');
+  expect(wrapper.vm.value2).toBe('b');
+
+  wrapper.find('.placeholder-element').trigger('click');
+  expect(wrapper.vm.value2).toBe('c');
+});

+ 3 - 1
src/packages/__VUE/menu/doc.en-US.md

@@ -414,4 +414,6 @@ export default {
 | Event  | Description                   | Arguments      |
 |--------|-------------------------------|----------------|
 | change | Emitted select option changed | Selected value |
-| toggle | Toggle menu display status, `true` to show,`false` to hide, no param is negated | show?: boolean |
+| toggle | Toggle menu display status, `true` to show,`false` to hide, no param is negated | show?: boolean |
+| open `v3.2.7` | Emitted when opening menu | - |
+| close `v3.2.7` | Emitted when closing menu | - |

+ 3 - 1
src/packages/__VUE/menu/doc.md

@@ -413,4 +413,6 @@ export default {
 | 事件名 | 说明                 | 回调参数     |
 |--------|----------------------|--------------|
 | change | 选择 option 之后触发 | 选择的 value |
-| toggle | 切换菜单展示状态,传 `true` 为显示,`false` 为隐藏,不传参为取反 | show?: boolean |
+| toggle | 切换菜单展示状态,传 `true` 为显示,`false` 为隐藏,不传参为取反 | show?: boolean |
+| open `v3.2.7` | 打开菜单栏时触发 | - |
+| close `v3.2.7` | 关闭菜单栏时触发 | - |

+ 4 - 1
src/packages/__VUE/menuitem/index.vue

@@ -88,7 +88,7 @@ export default create({
     [Icon.name]: Icon,
     [Popup.name]: Popup
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ['update:modelValue', 'change', 'open', 'close'],
   setup(props, { emit, slots }) {
     const state = reactive({
       showPopup: false,
@@ -145,6 +145,7 @@ export default create({
 
       if (show) {
         state.showWrapper = true;
+        emit('open');
       }
     };
 
@@ -169,12 +170,14 @@ export default create({
     };
 
     const handleClose = () => {
+      emit('close');
       state.showWrapper = false;
       state.isShowPlaceholderElement = false;
     };
 
     const handleClickOutside = () => {
       state.showPopup = false;
+      emit('close');
     };
 
     return {