fix(dropdown): 修复 dropdown 下拉后箭头旋转向上 (#45)

* feat(dropdown): 修复 dropdown 下拉后箭头旋转向上 * fix(dropwown): 修改 review 意见
2023-03-13 00:25:17 -07:00 · 2023-03-13 00:25:17 -07:00 · c34f066979
parent dc8b0abbe2
commit c34f066979
14 changed files with 157 additions and 73 deletions
--- a/example/src/demo/pc/dropdown/basic-usage.vue
+++ b/example/src/demo/pc/dropdown/basic-usage.vue
@ -1,6 +1,5 @@
 <template>
  <tiny-dropdown>
-    <span>下拉菜单 <icon-chevron-down /></span>
    <template #dropdown>
      <tiny-dropdown-menu>
        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
@ -15,15 +14,13 @@
 </template>

 <script>
-import { IconChevronDown } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

 export default {
  components: {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
-    IconChevronDown: IconChevronDown()
+    TinyDropdownItem: DropdownItem
  }
 }
 </script>
--- a/example/src/demo/pc/dropdown/disabled.vue
+++ b/example/src/demo/pc/dropdown/disabled.vue
@ -1,7 +1,6 @@
 <template>
  <div>
    <tiny-dropdown>
-      <span>下拉菜单 <icon-chevron-down /></span>
      <template #dropdown>
        <tiny-dropdown-menu>
          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@ -18,7 +17,6 @@
    <br />

    <tiny-dropdown disabled>
-      <span>下拉菜单 <icon-chevron-down /></span>
      <template #dropdown>
        <tiny-dropdown-menu>
          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@ -33,15 +31,13 @@
 </template>

 <script>
-import { IconChevronDown } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

 export default {
  components: {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
-    IconChevronDown: IconChevronDown()
+    TinyDropdownItem: DropdownItem
  }
 }
 </script>
--- a/example/src/demo/pc/dropdown/hide-on-click.vue
+++ b/example/src/demo/pc/dropdown/hide-on-click.vue
@ -1,6 +1,5 @@
 <template>
  <tiny-dropdown :hide-on-click="false">
-    <span>下拉菜单 <icon-chevron-down /></span>
    <template #dropdown>
      <tiny-dropdown-menu>
        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
@ -14,15 +13,13 @@
 </template>

 <script>
-import { IconChevronDown } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

 export default {
  components: {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
-    IconChevronDown: IconChevronDown()
+    TinyDropdownItem: DropdownItem
  }
 }
 </script>
--- a/example/src/demo/pc/dropdown/multi-level.vue
+++ b/example/src/demo/pc/dropdown/multi-level.vue
@ -1,10 +1,6 @@
 <template>
  <div>
    <tiny-dropdown @item-click="itemClick">
-      <span>
-        <span>下拉菜单</span>
-        <icon-chevron-down></icon-chevron-down>
-      </span>
      <template #dropdown>
        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
      </template>
@ -13,14 +9,13 @@
 </template>

 <script>
-import { iconChevronDown, iconStarDisable } from '@opentiny/vue-icon'
+import { iconStarDisable } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'

 export default {
  components: {
    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    IconChevronDown: iconChevronDown()
+    TinyDropdownMenu: DropdownMenu
  },
  data() {
    return {
--- a/example/src/demo/pc/dropdown/options.vue
+++ b/example/src/demo/pc/dropdown/options.vue
@ -1,20 +1,12 @@
 <template>
  <div>
    <tiny-dropdown>
-      <span>
-        <span>下拉菜单</span>
-        <icon-chevron-down></icon-chevron-down>
-      </span>
      <template #dropdown>
        <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
      </template>
    </tiny-dropdown>

    <tiny-dropdown>
-      <span>
-        <span>下拉菜单</span>
-        <icon-chevron-down></icon-chevron-down>
-      </span>
      <template #dropdown>
        <tiny-dropdown-menu :options="options1" textField="name"> </tiny-dropdown-menu>
      </template>
@ -22,31 +14,20 @@

    <tiny-dropdown :menuOptions="menuOptions" title="点击下拉" @item-click="itemClick"></tiny-dropdown>

-    <tiny-dropdown :menuOptions="menuOptions">
-      <span>
-        <span>自定义下拉菜单</span>
-        <icon-chevron-down></icon-chevron-down>
-      </span>
-    </tiny-dropdown>
+    <tiny-dropdown :menuOptions="menuOptions"></tiny-dropdown>

-    <tiny-dropdown :menuOptions="menuOptions1" textField="name">
-      <span>
-        <span>下拉菜单</span>
-        <icon-chevron-down></icon-chevron-down>
-      </span>
-    </tiny-dropdown>
+    <tiny-dropdown :menuOptions="menuOptions1" textField="name"></tiny-dropdown>
  </div>
 </template>

 <script>
-import { IconChevronDown, IconStarDisable } from '@opentiny/vue-icon'
+import { iconStarDisable } from '@opentiny/vue-icon'
 import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'

 export default {
  components: {
    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    IconChevronDown: IconChevronDown()
+    TinyDropdownMenu: DropdownMenu
  },
  data() {
    return {
@ -62,7 +43,7 @@ export default {
        {
          label: '黄金糕',
          divided: true,
-          icon: IconStarDisable()
+          icon: iconStarDisable()
        }
      ],
      options1: [
@ -77,7 +58,7 @@ export default {
        {
          name: '黄金糕',
          divided: true,
-          icon: IconStarDisable()
+          icon: iconStarDisable()
        }
      ],
      menuOptions: {
@ -93,7 +74,7 @@ export default {
          {
            label: '黄金糕',
            divided: true,
-            icon: IconStarDisable()
+            icon: iconStarDisable()
          }
        ]
      },
@ -110,7 +91,7 @@ export default {
          {
            name: '黄金糕',
            divided: true,
-            icon: IconStarDisable()
+            icon: iconStarDisable()
          }
        ],
        textField: 'name'
--- a/example/src/demo/pc/dropdown/slot-default.vue
+++ b/example/src/demo/pc/dropdown/slot-default.vue
@ -0,0 +1,43 @@
+<template>
+  <tiny-dropdown @visible-change="visibleChange">
+    <span>
+      <span>默认插槽</span>
+      <icon-chevron-up v-show="visible"></icon-chevron-up>
+      <icon-chevron-down v-show="!visible"></icon-chevron-down>
+    </span>
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem,
+    IconChevronDown: iconChevronDown(),
+    IconChevronUp: iconChevronUp()
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    visibleChange(status) {
+      this.visible = status
+    }
+  }
+}
+</script>
--- a/example/src/demo/pc/dropdown/title.vue
+++ b/example/src/demo/pc/dropdown/title.vue
@ -0,0 +1,25 @@
+<template>
+  <tiny-dropdown title="自定义文本">
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem
+  }
+}
+</script>
--- a/example/src/demo/pc/dropdown/trigger.vue
+++ b/example/src/demo/pc/dropdown/trigger.vue
@ -4,7 +4,6 @@
      <tiny-col :span="2">
        <p>hover 激活</p>
        <tiny-dropdown>
-          <span>下拉菜单 <icon-chevron-down /></span>
          <template #dropdown>
            <tiny-dropdown-menu>
              <tiny-dropdown-item><icon-plus></icon-plus> 黄金糕</tiny-dropdown-item>
@ -19,14 +18,13 @@
      <tiny-col :span="2">
        <p>click 激活</p>
        <tiny-dropdown trigger="click">
-          <span> 下拉菜单 <icon-chevron-down /></span>
          <template #dropdown>
            <tiny-dropdown-menu>
-              <tiny-dropdown-item :icon="IconPlus">黄金糕</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="IconPlusCircle">狮子头</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="IconPlusSquare">螺蛳粉</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="IconCheckedLinear">双皮奶</tiny-dropdown-item>
-              <tiny-dropdown-item :icon="IconCheckedSur">蚵仔煎</tiny-dropdown-item>
+              <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
+              <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
+              <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
+              <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
+              <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
            </tiny-dropdown-menu>
          </template>
        </tiny-dropdown>
@ -36,7 +34,7 @@
 </template>

 <script>
-import { IconChevronDown, IconPlus, IconPlusCircle, IconPlusSquare, IconCheckedLinear, IconCheckedSur } from '@opentiny/vue-icon'
+import { iconPlus, iconPlusCircle, iconPlusSquare, iconCheckedLinear, iconCheckedSur } from '@opentiny/vue-icon'
 import { Layout, Row, Col, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'

 export default {
@ -47,20 +45,19 @@ export default {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
    TinyDropdownItem: DropdownItem,
-    IconChevronDown: IconChevronDown(),
-    IconPlus: IconPlus(),
-    IconPlusCircle: IconPlusCircle(),
-    IconPlusSquare: IconPlusSquare(),
-    IconCheckedLinear: IconCheckedLinear(),
-    IconCheckedSur: IconCheckedSur()
+    IconPlus: iconPlus(),
+    IconPlusCircle: iconPlusCircle(),
+    IconPlusSquare: iconPlusSquare(),
+    IconCheckedLinear: iconCheckedLinear(),
+    IconCheckedSur: iconCheckedSur()
  },
  data() {
    return {
-      IconPlus: IconPlus(),
-      IconPlusCircle: IconPlusCircle(),
-      IconPlusSquare: IconPlusSquare(),
-      IconCheckedLinear: IconCheckedLinear(),
-      IconCheckedSur: IconCheckedSur()
+      iconPlus: iconPlus(),
+      iconPlusCircle: iconPlusCircle(),
+      iconPlusSquare: iconPlusSquare(),
+      iconCheckedLinear: iconCheckedLinear(),
+      iconCheckedSur: iconCheckedSur()
    }
  }
 }
--- a/example/src/docs/zh-CN/dropdown/options.md
+++ b/example/src/docs/zh-CN/dropdown/options.md
@ -11,10 +11,9 @@

 </div>

-### 禁用
+### 配置式

-Dropdown 可以通过 `menuOptions` 属性配置DropdownMenu的属性,`title` 配置触发源的名称
+Dropdown 可以通过 `menuOptions` 属性配置 DropdownMenu 的属性,`title` 配置触发源的名称
 DropdownMenu 可以通过 `options` 属性配置 DropdownItem 的属性，`textField` 结合 `options` 使用，可以指定菜单文案显示的字段，默认值为 `label`。

-
 <nova-demo-view link="dropdown/options"></nova-demo-view>
--- a/example/src/docs/zh-CN/dropdown/slot-default.md
+++ b/example/src/docs/zh-CN/dropdown/slot-default.md
@ -0,0 +1,17 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-form-usercontact"/>
+</p>
+
+## Dropdown 下拉菜单
+
+<nova-uxlink widget-name="Dropdown"></nova-uxlink>
+
+将动作或菜单折叠到下拉菜单中。
+
+</div>
+
+### 默认插槽
+
+默认插槽可以自定义触发源
+<nova-demo-view link="dropdown/slot-default"></nova-demo-view>
--- a/example/src/docs/zh-CN/dropdown/title.md
+++ b/example/src/docs/zh-CN/dropdown/title.md
@ -0,0 +1,17 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-form-usercontact"/>
+</p>
+
+## Dropdown 下拉菜单
+
+<nova-uxlink widget-name="Dropdown"></nova-uxlink>
+
+将动作或菜单折叠到下拉菜单中。
+
+</div>
+
+### 设置触发源文本
+
+可以通过 `title` 属性设置触发源文本
+<nova-demo-view link="dropdown/title"></nova-demo-view>
--- a/example/src/nav.config.comp.json
+++ b/example/src/nav.config.comp.json
@ -504,6 +504,10 @@
              "path": "/dropdown/size",
              "name": "不同尺寸"
            },
+            {
+            "path": "/dropdown/title",
+            "name": "自定义文本"
+            },
            {
              "path": "/dropdown/options",
              "name": "使用配置式"
@ -515,6 +519,10 @@
            {
              "path": "/dropdown/events",
              "name": "事件"
+            },
+            {
+              "path": "/dropdown/slot-default",
+              "name": "默认插槽"
            }
          ]
        },
--- a/example/src/route.config.comp2.js
+++ b/example/src/route.config.comp2.js
@ -1411,6 +1411,11 @@ export default [
    meta: { title: '导航组件-Dropdown 下拉菜单', lang: 'zh-CN', sign: 'component' },
    component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/dropdown/size.md')
  },
+  {
+    path: 'dropdown/title',
+    meta: { title: '导航组件-Dropdown 下拉菜单', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/dropdown/title.md')
+  },
  {
    path: 'dropdown/options',
    meta: { title: '导航组件-Dropdown 下拉菜单', lang: 'zh-CN', sign: 'component' },
@ -1421,6 +1426,11 @@ export default [
    meta: { title: '导航组件-Dropdown 下拉菜单', lang: 'zh-CN', sign: 'component' },
    component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/dropdown/events.md')
  },
+  {
+    path: 'dropdown/slot-default',
+    meta: { title: '导航组件-Dropdown 下拉菜单', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-dropdown' */ './docs/zh-CN/dropdown/slot-default.md')
+  },
  {
    path: 'action-menu',
    meta: { title: '导航组件-ActionMenu 下拉菜单', lang: 'zh-CN', sign: 'component' },
--- a/packages/dropdown/src/index.vue
+++ b/packages/dropdown/src/index.vue
@ -9,6 +9,7 @@
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 -->
+
 <script lang="jsx">
 import { renderless, api } from '@opentiny/vue-renderless/dropdown/vue'
 import { setup, $prefix, directive } from '@opentiny/vue-common'
@ -74,14 +75,15 @@ export default {
      default: '下拉菜单'
    }
  },
-  emits: ['visible-change', 'item-click', 'button-click', 'menu-item-click'],
+  emits: ['visible-change', 'item-click', 'button-click', 'menu-item-click', 'handle-click'],
  setup(props, context) {
    return setup({ props, context, renderless, api, mono: true })
  },
  render() {
-    const triggerClass = 'tiny-dropdown-trigger'
    const { hide, splitButton, type, disabled, handleMainButtonClick, slots, size, state, menuOptions, title } = this
    let triggerElm = null
+    const triggerClass = 'tiny-dropdown-trigger'
+    const visibleClass = state.visible ? 'tiny-dropdown-visible' : ''

    if (splitButton) {
      triggerElm = (
@ -90,7 +92,7 @@ export default {
            {slots.default && slots.default()}
          </tiny-button>
          <tiny-button ref="trigger" type={type} size={size} class={`tiny-dropdown__caret-button ${triggerClass}`} disabled={disabled} reset-time={0}>
-            {state.visible ? <icon-chevron-up /> : <icon-chevron-down />}
+            <icon-chevron-down class={visibleClass}></icon-chevron-down>
          </tiny-button>
        </tiny-button-group>
      )
@ -98,7 +100,7 @@ export default {
      const defaultTriggerElm = (
        <span>
          <span>{title}</span>
-          <icon-chevron-down></icon-chevron-down>
+          <icon-chevron-down class={visibleClass}></icon-chevron-down>
        </span>
      )