diff --git a/components/_util/vnode.js b/components/_util/vnode.js index 3919d75d4..663aa7972 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.js @@ -45,7 +45,14 @@ export function cloneVNodes (vnodes, deep) { } export function cloneElement (n, nodeProps, clone) { - const node = clone ? cloneVNode(n, true) : n + let ele = n + if (Array.isArray(n)) { + ele = filterEmpty(n)[0] + } + if (!ele) { + return null + } + const node = clone ? cloneVNode(ele, true) : ele const { props = {}, key, on = {}} = nodeProps const data = node.data || {} const { style = data.style, @@ -95,6 +102,10 @@ export function filterEmpty (children = []) { return children.filter(c => c.tag || c.text.trim() !== '') } +export function getPropsData (ele) { + return ele.componentOptions && ele.componentOptions.propsData +} + export function getEvents (child) { let events = {} if (child.componentOptions && child.componentOptions.listeners) { @@ -102,5 +113,5 @@ export function getEvents (child) { } else if (child.data && child.data.on) { events = child.data.on } - return events + return { ...events } } diff --git a/components/button/button-group.vue b/components/button/button-group.vue index aab6839e8..a69df4bf9 100644 --- a/components/button/button-group.vue +++ b/components/button/button-group.vue @@ -1,18 +1,20 @@ +``` diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md new file mode 100644 index 000000000..ec2961af9 --- /dev/null +++ b/components/dropdown/demo/event.md @@ -0,0 +1,34 @@ + +#### 触发事件 +点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。 + + + +#### Click event +An event will be triggered when you click menu items, in which you can make different operations according to item's key. + + +```html + + + +``` diff --git a/components/dropdown/demo/index.vue b/components/dropdown/demo/index.vue new file mode 100644 index 000000000..0ea3c7fa3 --- /dev/null +++ b/components/dropdown/demo/index.vue @@ -0,0 +1,46 @@ + diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md new file mode 100644 index 000000000..17d3de0c8 --- /dev/null +++ b/components/dropdown/demo/item.md @@ -0,0 +1,29 @@ + +#### 其他元素 +分割线和不可用菜单项。 + + + +#### Other elements +Divider and disabled menu item. + + +```html + +``` diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md new file mode 100644 index 000000000..b15970888 --- /dev/null +++ b/components/dropdown/demo/overlay-visible.md @@ -0,0 +1,41 @@ + +#### 菜单隐藏方式 +默认是点击关闭菜单，可以关闭此功能。 + + + +#### The way of hiding menu. +The default is to close the menu when you click on menu items, this feature can be turned off. + + +```html + + + +``` diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md new file mode 100644 index 000000000..2edf090af --- /dev/null +++ b/components/dropdown/demo/placement.md @@ -0,0 +1,49 @@ + +#### 弹出位置 +支持 6 个弹出位置。 + + + +#### Placement +Support 6 placements. + + +```html + + + + +``` diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md new file mode 100644 index 000000000..92e2ae27c --- /dev/null +++ b/components/dropdown/demo/sub-menu.md @@ -0,0 +1,31 @@ + +#### 多级菜单 +传入的菜单里有多个层级。 + + + +#### Cascading menu +The menu has multiple levels. + + +```html + +``` diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md new file mode 100644 index 000000000..e68ae5bf5 --- /dev/null +++ b/components/dropdown/demo/trigger.md @@ -0,0 +1,29 @@ + +#### 触发方式 +默认是移入触发菜单，可以点击触发。 + + + +#### Trigger mode +The default trigger mode is `hover`, you can change it to `click`. + + +```html + +``` diff --git a/components/dropdown/dropdown-button.vue b/components/dropdown/dropdown-button.vue new file mode 100644 index 000000000..f36871bd6 --- /dev/null +++ b/components/dropdown/dropdown-button.vue @@ -0,0 +1,81 @@ + diff --git a/components/dropdown/dropdown.vue b/components/dropdown/dropdown.vue new file mode 100644 index 000000000..04d5524bc --- /dev/null +++ b/components/dropdown/dropdown.vue @@ -0,0 +1,76 @@ + diff --git a/components/dropdown/getDropdownProps.js b/components/dropdown/getDropdownProps.js new file mode 100644 index 000000000..93b0391e9 --- /dev/null +++ b/components/dropdown/getDropdownProps.js @@ -0,0 +1,13 @@ +import PropTypes from '../_util/vue-types' +export default () => ({ + trigger: PropTypes.array.def(['hover']), + overlay: PropTypes.any, + visible: PropTypes.bool, + disabled: PropTypes.bool, + align: PropTypes.object, + getPopupContainer: PropTypes.func, + prefixCls: PropTypes.string, + transitionName: PropTypes.string, + placement: PropTypes.oneOf(['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight']), + forceRender: PropTypes.bool, +}) diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md new file mode 100644 index 000000000..a0b0dba82 --- /dev/null +++ b/components/dropdown/index.en-US.md @@ -0,0 +1,43 @@ +## API + +### Dropdown + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| disabled | whether the dropdown menu is disabled | boolean | - | +| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | +| overlay(slot) | the dropdown menu | [Menu](#/components/us/menu) | - | +| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | +| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | +| visible(v-model) | whether the dropdown menu is visible | boolean | - | + +### events +| Events Name | Description | Arguments | +| --- | --- | --- | +| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | function(visible) | + +You should use [Menu](#/components/us/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`. + +> Warning: You must set a unique `key` for `Menu.Item`. +> +> Menu of Dropdown is unselectable by default, you can make it selectable via ``. + +### Dropdown.Button + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| disabled | whether the dropdown menu is disabled | boolean | - | +| overlay(slot) | the dropdown menu | [Menu](#/components/us/menu) | - | +| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | +| size | size of the button, the same as [Button](#/components/us/button) | string | `default` | +| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | +| type | type of the button, the same as [Button](#/components/us/button) | string | `default` | +| visible | whether the dropdown menu is visible | boolean | - | + + + +### Dropdown.Button events +| Events Name | Description | Arguments | +| --- | --- | --- | +| click | a callback function, the same as [Button](#/components/us/button), which will be executed when you click the button on the left | Function | +| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | diff --git a/components/dropdown/index.js b/components/dropdown/index.js new file mode 100644 index 000000000..4186aef72 --- /dev/null +++ b/components/dropdown/index.js @@ -0,0 +1,8 @@ +import Dropdown from './dropdown' +import DropdownButton from './dropdown-button' + +export { DropDownProps } from './dropdown' +export { DropdownButtonProps } from './dropdown-button' + +Dropdown.Button = DropdownButton +export default Dropdown diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md new file mode 100644 index 000000000..8f4d3d753 --- /dev/null +++ b/components/dropdown/index.zh-CN.md @@ -0,0 +1,42 @@ +## API + +属性如下 + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| disabled | 菜单是否禁用 | boolean | - | +| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` | +| overlay(slot) | 菜单 | [Menu](#/components/cn/menu) | - | +| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | +| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | +| visible(v-model) | 菜单是否显示 | boolean | - | + +`overlay` 菜单使用 [Menu](#/components/cn/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。 + +> 注意： Menu.Item 必须设置唯一的 key 属性。 +> +> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 ``. + +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) | + + +### Dropdown.Button + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| disabled | 菜单是否禁用 | boolean | - | +| overlay(slot) | 菜单 | [Menu](#/components/cn/menu/) | - | +| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | +| size | 按钮大小，和 [Button](#/components/cn/button/) 一致 | string | 'default' | +| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` | +| type | 按钮类型，和 [Button](#/components/cn/button/) 一致 | string | 'default' | +| visible(v-model) | 菜单是否显示 | boolean | - | + +### Dropdown.Button事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| click | 点击左侧按钮的回调，和 [Button](#/components/cn/button/) 一致 | Function | +| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) | diff --git a/components/dropdown/src/Dropdown.vue b/components/dropdown/src/Dropdown.vue new file mode 100644 index 000000000..e99d348e2 --- /dev/null +++ b/components/dropdown/src/Dropdown.vue @@ -0,0 +1,157 @@ + diff --git a/components/dropdown/src/index.js b/components/dropdown/src/index.js new file mode 100644 index 000000000..7f53b7141 --- /dev/null +++ b/components/dropdown/src/index.js @@ -0,0 +1,2 @@ +import Dropdown from './Dropdown' +export default Dropdown diff --git a/components/dropdown/src/placements.js b/components/dropdown/src/placements.js new file mode 100644 index 000000000..51387f431 --- /dev/null +++ b/components/dropdown/src/placements.js @@ -0,0 +1,47 @@ +const autoAdjustOverflow = { + adjustX: 1, + adjustY: 1, +} + +const targetOffset = [0, 0] + +export const placements = { + topLeft: { + points: ['bl', 'tl'], + overflow: autoAdjustOverflow, + offset: [0, -4], + targetOffset, + }, + topCenter: { + points: ['bc', 'tc'], + overflow: autoAdjustOverflow, + offset: [0, -4], + targetOffset, + }, + topRight: { + points: ['br', 'tr'], + overflow: autoAdjustOverflow, + offset: [0, -4], + targetOffset, + }, + bottomLeft: { + points: ['tl', 'bl'], + overflow: autoAdjustOverflow, + offset: [0, 4], + targetOffset, + }, + bottomCenter: { + points: ['tc', 'bc'], + overflow: autoAdjustOverflow, + offset: [0, 4], + targetOffset, + }, + bottomRight: { + points: ['tr', 'br'], + overflow: autoAdjustOverflow, + offset: [0, 4], + targetOffset, + }, +} + +export default placements diff --git a/components/dropdown/style/index.js b/components/dropdown/style/index.js new file mode 100644 index 000000000..81f6a07af --- /dev/null +++ b/components/dropdown/style/index.js @@ -0,0 +1,5 @@ +import '../../style/index.less' +import './index.less' + +// style dependencies +import '../../button/style' diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less new file mode 100644 index 000000000..52feee243 --- /dev/null +++ b/components/dropdown/style/index.less @@ -0,0 +1,250 @@ +@import "../../style/themes/default"; +@import "../../style/mixins/index"; + +@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown"; + +.@{dropdown-prefix-cls} { + .reset-component; + position: absolute; + left: -9999px; + top: -9999px; + z-index: @zindex-dropdown; + display: block; + + &-wrap { + position: relative; + + .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down { + .iconfont-size-under-12px(10px); + } + + .@{iconfont-css-prefix}-down:before { + transition: transform .2s; + } + } + + &-wrap-open { + .@{iconfont-css-prefix}-down:before { + transform: rotate(180deg); + } + } + + &-hidden, + &-menu-hidden { + display: none; + } + + &-menu { + outline: none; + position: relative; + list-style-type: none; + padding: 0; + margin: 0; + text-align: left; + background-color: @component-background; + border-radius: @border-radius-base; + box-shadow: @box-shadow-base; + background-clip: padding-box; + + &-item-group-title { + color: @text-color-secondary; + padding: 5px @control-padding-horizontal; + transition: all .3s; + } + + &-submenu-popup { + position: absolute; + } + + &-item, + &-submenu-title { + padding: 5px @control-padding-horizontal; + margin: 0; + clear: both; + font-size: @font-size-base; + font-weight: normal; + color: @text-color; + white-space: nowrap; + cursor: pointer; + transition: all .3s; + line-height: 22px; + + > a { + color: @text-color; + display: block; + padding: 5px @control-padding-horizontal; + margin: -5px -@control-padding-horizontal; + transition: all .3s; + &:focus { + text-decoration: none; + } + } + + &-selected, + &-selected > a { + color: @primary-color; + background-color: @item-active-bg; + } + + &:hover { + background-color: @item-hover-bg; + } + + &-disabled { + color: @disabled-color; + cursor: not-allowed; + + &:hover { + color: @disabled-color; + background-color: @component-background; + cursor: not-allowed; + } + } + + &:first-child, + &:first-child > a { + border-radius: @border-radius-base @border-radius-base 0 0; + } + + &:last-child, + &:last-child > a { + border-radius: 0 0 @border-radius-base @border-radius-base; + } + + &:only-child, + &:only-child > a { + border-radius: @border-radius-base; + } + + &-divider { + height: 1px; + overflow: hidden; + background-color: @border-color-split; + line-height: 0; + } + .@{dropdown-prefix-cls}-menu-submenu-arrow { + position: absolute; + right: @padding-xs; + &:after { + font-family: "anticon" !important; + font-style: normal; + content: "\e61f"; + color: @text-color-secondary; + .iconfont-size-under-12px(10px); + } + } + } + + &-submenu-title { + padding-right: 26px; + &:first-child, + &:last-child { + border-radius: 0; + } + } + + &-submenu-vertical { + position: relative; + } + + &-submenu-vertical > & { + top: 0; + left: 100%; + position: absolute; + min-width: 100%; + margin-left: 4px; + transform-origin: 0 0; + } + + &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title { + &, + .@{dropdown-prefix-cls}-menu-submenu-arrow:after { + color: @disabled-color; + } + } + &-submenu:first-child &-submenu-title { + border-radius: @border-radius-base @border-radius-base 0 0; + } + + &-submenu:last-child &-submenu-title { + border-radius: 0 0 @border-radius-base @border-radius-base; + } + } + + &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft, + &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft, + &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter, + &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter, + &.slide-down-enter.slide-down-enter-active&-placement-bottomRight, + &.slide-down-appear.slide-down-appear-active&-placement-bottomRight { + animation-name: antSlideUpIn; + } + + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, + &.slide-up-appear.slide-up-appear-active&-placement-topLeft, + &.slide-up-enter.slide-up-enter-active&-placement-topCenter, + &.slide-up-appear.slide-up-appear-active&-placement-topCenter, + &.slide-up-enter.slide-up-enter-active&-placement-topRight, + &.slide-up-appear.slide-up-appear-active&-placement-topRight { + animation-name: antSlideDownIn; + } + + &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft, + &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter, + &.slide-down-leave.slide-down-leave-active&-placement-bottomRight { + animation-name: antSlideUpOut; + } + + &.slide-up-leave.slide-up-leave-active&-placement-topLeft, + &.slide-up-leave.slide-up-leave-active&-placement-topCenter, + &.slide-up-leave.slide-up-leave-active&-placement-topRight { + animation-name: antSlideDownOut; + } +} + +.@{dropdown-prefix-cls}-trigger, +.@{dropdown-prefix-cls}-link { + .@{iconfont-css-prefix}-down { + .iconfont-size-under-12px(10px); + } +} + +.@{dropdown-prefix-cls}-button { + white-space: nowrap; + + &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) { + padding-left: @padding-xs; + padding-right: @padding-xs; + } + .@{iconfont-css-prefix}-down { + .iconfont-size-under-12px(10px); + } +} + +// https://github.com/ant-design/ant-design/issues/4903 +.@{dropdown-prefix-cls}-menu-dark { + &, + .@{dropdown-prefix-cls}-menu { + background: @menu-dark-bg; + } + .@{dropdown-prefix-cls}-menu-item, + .@{dropdown-prefix-cls}-menu-submenu-title, + .@{dropdown-prefix-cls}-menu-item > a { + color: @text-color-secondary-dark; + .@{dropdown-prefix-cls}-menu-submenu-arrow:after { + color: @text-color-secondary-dark; + } + &:hover { + color: #fff; + background: transparent; + } + } + .@{dropdown-prefix-cls}-menu-item-selected { + &, + &:hover, + > a { + background: @primary-color; + color: #fff; + } + } +} diff --git a/components/index.js b/components/index.js index c3faa56eb..451c88b6b 100644 --- a/components/index.js +++ b/components/index.js @@ -41,6 +41,15 @@ export { default as Popover } from './popover' export { default as Popconfirm } from './popconfirm' -export { default as Menu } from './menu' +import Menu from './menu' +const MenuItem = Menu.Item +const SubMenu = Menu.SubMenu +const MenuDivider = Menu.Divider +const MenuItemGroup = Menu.ItemGroup +export { Menu, MenuItem, SubMenu, MenuDivider, MenuItemGroup } export { default as Card } from './card' + +import Dropdown from './dropdown' +const DropdownButton = Dropdown.Button +export { Dropdown, DropdownButton } diff --git a/components/style.js b/components/style.js index fa9aadfbd..e417a51a1 100644 --- a/components/style.js +++ b/components/style.js @@ -14,3 +14,4 @@ import './tooltip/style' import './popover/style' import './popconfirm/style' import './menu/style' +import './dropdown/style' diff --git a/components/trigger/index.vue b/components/trigger/index.vue index 8c4fa9dc7..312df58a1 100644 --- a/components/trigger/index.vue +++ b/components/trigger/index.vue @@ -18,7 +18,7 @@ function returnDocument () { return window.document } const ALL_HANDLERS = ['click', 'mousedown', 'touchStart', 'mouseenter', - 'mouseleave', 'focus', 'blur', 'contextMenu'] + 'mouseleave', 'focus', 'blur', 'contextmenu'] export default { name: 'Trigger', @@ -124,7 +124,7 @@ export default { // https://github.com/react-component/trigger/issues/50 if (state.sPopupVisible) { let currentDocument - if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) { + if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextmenuToShow())) { currentDocument = props.getDocument() this.clickOutsideHandler = addEventListener(currentDocument, 'mousedown', this.onDocumentClick) @@ -135,16 +135,16 @@ export default { this.touchOutsideHandler = addEventListener(currentDocument, 'touchstart', this.onDocumentClick) } - // close popup when trigger type contains 'onContextMenu' and document is scrolling. - if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) { + // close popup when trigger type contains 'onContextmenu' and document is scrolling. + if (!this.contextmenuOutsideHandler1 && this.isContextmenuToShow()) { currentDocument = currentDocument || props.getDocument() - this.contextMenuOutsideHandler1 = addEventListener(currentDocument, - 'scroll', this.onContextMenuClose) + this.contextmenuOutsideHandler1 = addEventListener(currentDocument, + 'scroll', this.onContextmenuClose) } - // close popup when trigger type contains 'onContextMenu' and window is blur. - if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) { - this.contextMenuOutsideHandler2 = addEventListener(window, - 'blur', this.onContextMenuClose) + // close popup when trigger type contains 'onContextmenu' and window is blur. + if (!this.contextmenuOutsideHandler2 && this.isContextmenuToShow()) { + this.contextmenuOutsideHandler2 = addEventListener(window, + 'blur', this.onContextmenuClose) } return } @@ -203,14 +203,14 @@ export default { } }, - onContextMenu (e) { + onContextmenu (e) { e.preventDefault() - this.fireEvents('contextMenu', e) + this.fireEvents('contextmenu', e) this.setPopupVisible(true) }, - onContextMenuClose () { - if (this.isContextMenuToShow()) { + onContextmenuClose () { + if (this.isContextmenuToShow()) { this.close() } }, @@ -401,14 +401,14 @@ export default { this.clickOutsideHandler = null } - if (this.contextMenuOutsideHandler1) { - this.contextMenuOutsideHandler1.remove() - this.contextMenuOutsideHandler1 = null + if (this.contextmenuOutsideHandler1) { + this.contextmenuOutsideHandler1.remove() + this.contextmenuOutsideHandler1 = null } - if (this.contextMenuOutsideHandler2) { - this.contextMenuOutsideHandler2.remove() - this.contextMenuOutsideHandler2 = null + if (this.contextmenuOutsideHandler2) { + this.contextmenuOutsideHandler2.remove() + this.contextmenuOutsideHandler2 = null } if (this.touchOutsideHandler) { @@ -433,9 +433,9 @@ export default { return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1 }, - isContextMenuToShow () { + isContextmenuToShow () { const { action, showAction } = this.$props - return action.indexOf('contextMenu') !== -1 || showAction.indexOf('contextMenu') !== -1 + return action.indexOf('contextmenu') !== -1 || showAction.indexOf('contextmenu') !== -1 }, isClickToHide () { @@ -485,20 +485,20 @@ export default { } const child = children[0] const events = getEvents(child) - // 黑科技，vue暂未发现保留原事件的方法，使用_ANT_EVENT_HACK来判断事件是否更新 - if (!events._ANT_EVENT_HACK) { + // 黑科技，vue暂未发现保留原事件的方法，使用_ANT_TRIGGER_EVENT_HACK来判断事件是否更新 + if (!events._ANT_TRIGGER_EVENT_HACK) { this.childOriginEvents = events } const newChildProps = { props: {}, - on: { _ANT_EVENT_HACK: () => {} }, + on: { _ANT_TRIGGER_EVENT_HACK: () => {} }, key: 'trigger', } - if (this.isContextMenuToShow()) { - newChildProps.on.contextMenu = this.onContextMenu + if (this.isContextmenuToShow()) { + newChildProps.on.contextmenu = this.onContextmenu } else { - newChildProps.on.contextMenu = this.createTwoChains('contextMenu') + newChildProps.on.contextmenu = this.createTwoChains('contextmenu') } if (this.isClickToHide() || this.isClickToShow()) { diff --git a/examples/demo.js b/examples/demo.js index e988c0642..63a72702f 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -16,4 +16,5 @@ export { default as rate } from 'antd/rate/demo/index.vue' export { default as tabs } from 'antd/tabs/demo/index.vue' export { default as tag } from 'antd/tag/demo/index.vue' export { default as tooltip } from 'antd/tooltip/demo/index.vue' +export { default as dropdown } from 'antd/dropdown/demo/index.vue' diff --git a/examples/routes.js b/examples/routes.js index e93c85bb4..1b61e245f 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -1,7 +1,7 @@ import Demo from './components/demo.vue' const AsyncComp = () => { return { - component: import(`../components/avatar/demo/index.vue`), + component: import(`../components/dropdown/demo/sub-menu.md`), } } export default [