feat(action-menu): 修复 ActionMenu 下拉后箭头旋转向上 (#70)

* chore: checkout release branch

* feat(action-menu): 修复 ActionMenu 下拉后箭头旋转向上

---------

Co-authored-by: Kagol <kagol@sina.com>

.github/workflows/auto-publish.yml

@@ -11,6 +11,8 @@ jobs:
     steps:
       - name: CheckOut Code
         uses: actions/checkout@master
+        with:
+          ref: release
 
       - name: Setup Node
         uses: actions/setup-node@v3

example/src/demo/pc/action-menu/more-click.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-action-menu :options="options" @more-click="moreClick"> </tiny-action-menu>
+  <tiny-action-menu :options="options" trigger="click" @more-click="moreClick"> </tiny-action-menu>
 </template>
 
 <script>

example/src/demo/pc/action-menu/visible-change.vue

@@ -0,0 +1,44 @@
+<template>
+  <tiny-action-menu :options="options" @visible-change="visibleChange"> </tiny-action-menu>
+</template>
+
+<script>
+import { ActionMenu, Notify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆'
+        },
+        {
+          label: '开机'
+        },
+        {
+          label: '关机'
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ]
+    }
+  },
+  methods: {
+    visibleChange(status) {
+      Notify({
+        message: `触发 visible-change 事件,下拉状态为 ${status}`,
+        position: 'top-right',
+        duration: 2000
+      })
+    }
+  }
+}
+</script>

example/src/docs/zh-CN/action-menu/visible-change.md

@@ -0,0 +1,20 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-business-action-menu"/>
+</p>
+
+## ActionMenu 菜单按钮
+
+<nova-uxlink widget-name="ActionMenu"></nova-uxlink>
+
+提供一组操作按钮的组件，当按钮数量太多导致预留空间大小无法显示所有按钮时，自动将超出部分的按钮放置在一个 menu 组件下拉中。
+
+</div>
+
+### 菜单显示或隐藏改变时触发的事件
+
+<nova-demo-view link="action-menu/visible-change"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="action-menu"></nova-attributes>

example/src/nav.config.comp.json

@@ -562,6 +562,10 @@
               "path": "/action-menu/more-click",
               "name": "更多按钮点击事件"
             },
+            {
+              "path": "/action-menu/visible-change",
+              "name": "菜单显示隐藏变化事件"
+            },
             {
               "path": "/action-menu/slot-item",
               "name": "菜单项插槽"

example/src/route.config.comp2.js

@@ -1466,6 +1466,11 @@ export default [
     meta: { title: '导航组件-ActionMenu 下拉菜单', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/action-menu/more-click.md')
   },
+  {
+    path: 'action-menu/visible-change',
+    meta: { title: '导航组件-ActionMenu 下拉菜单', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/action-menu/visible-change.md')
+  },
   {
     path: 'action-menu/more-text',
     meta: { title: '导航组件-ActionMenu 下拉菜单', lang: 'zh-CN', sign: 'component' },

packages/action-menu/src/index.vue

@@ -15,11 +15,7 @@
       </li>
 
       <li v-if="state.moreOptions.length" class="tiny-action-menu__item">
-        <tiny-dropdown @item-click="handleItemClick">
-          <span @click="handleMoreClick">
-            <span>{{ moreText }} </span>
-            <icon-chevron-down></icon-chevron-down>
-          </span>
+        <tiny-dropdown :title="moreText" :trigger="trigger" @item-click="handleItemClick" @handle-click="handleMoreClick" @visible-change="visibleChange">
           <template #dropdown>
             <tiny-dropdown-menu :textField="textField" :popperClass="popperClass">
               <tiny-dropdown-item v-for="(item, index) in state.moreOptions" :key="index" :itemData="item" :label="item[textField]">
@@ -42,7 +38,6 @@ import '@opentiny/vue-theme/action-menu/index.css'
 import Dropdown from '@opentiny/vue-dropdown'
 import DropdownMenu from '@opentiny/vue-dropdown-menu'
 import DropdownItem from '@opentiny/vue-dropdown-item'
-import { iconChevronDown } from '@opentiny/vue-icon'
 import { t } from '@opentiny/vue-locale'
 
 export default {
@@ -50,10 +45,9 @@ export default {
   components: {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
-    IconChevronDown: iconChevronDown()
+    TinyDropdownItem: DropdownItem
   },
-  emits: ['more-click', 'item-click'],
+  emits: ['more-click', 'item-click', 'visible-change'],
   props: {
     options: {
       type: Array,
@@ -82,6 +76,10 @@ export default {
     popperAppendToBody: {
       type: Boolean,
       default: false
+    },
+    trigger: {
+      type: String,
+      default: 'hover'
     }
   },
   setup(props, context) {