github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix

pull/9/head
tangjinzhou 2018-01-08 18:31:04 +08:00
parent b985efc438
commit 8341fe44fc
14 changed files with 251 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/_util/Clone.vue Normal file
View File

@ -0,0 +1,19 @@
<script>
import { cloneElement } from './vnode'
import PropTypes from './vue-types'
export default {
props: {
childProps: PropTypes.object.def({}),
},
render () {
const { $attrs, $listeners, childProps } = this
let children = this.$slots.default[0]
children = cloneElement(children, {
attr: $attrs,
on: $listeners,
props: childProps,
})
return children
},
}
</script>

43
components/_util/vnode.js
View File

@ -1,5 +1,31 @@
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
// export function cloneVNode (vnode, deep) {
// const cloned = new vnode.constructor(
// vnode.tag,
// clonedeep(vnode.data),
// vnode.children,
// vnode.text,
// vnode.elm,
// vnode.context,
// clonedeep(vnode.componentOptions),
// vnode.asyncFactory
// )
// cloned.ns = vnode.ns
// cloned.isStatic = vnode.isStatic
// cloned.key = vnode.key
// cloned.isComment = vnode.isComment
// cloned.isCloned = true
// if (deep && vnode.children) {
// cloned.children = cloneVNodes(vnode.children, deep)
// }
// return cloned
// }
export function cloneVNode (vnode, deep) { export function cloneVNode (vnode, deep) {
const componentOptions = vnode.componentOptions
// if (componentOptions) {
// componentOptions.propsData = componentOptions.propsData ? clonedeep(componentOptions.propsData) : componentOptions.propsData
// }
const cloned = new vnode.constructor( const cloned = new vnode.constructor(
vnode.tag, vnode.tag,
clonedeep(vnode.data), clonedeep(vnode.data),
@ -7,16 +33,24 @@ export function cloneVNode (vnode, deep) {
vnode.text, vnode.text,
vnode.elm, vnode.elm,
vnode.context, vnode.context,
clonedeep(vnode.componentOptions), componentOptions,
vnode.asyncFactory vnode.asyncFactory
) )
cloned.ns = vnode.ns cloned.ns = vnode.ns
cloned.isStatic = vnode.isStatic cloned.isStatic = vnode.isStatic
cloned.key = vnode.key cloned.key = vnode.key
cloned.isComment = vnode.isComment cloned.isComment = vnode.isComment
cloned.fnContext = vnode.fnContext
cloned.fnOptions = vnode.fnOptions
cloned.fnScopeId = vnode.fnScopeId
cloned.isCloned = true cloned.isCloned = true
if (deep && vnode.children) { if (deep) {
cloned.children = cloneVNodes(vnode.children) if (vnode.children) {
cloned.children = cloneVNodes(vnode.children, true)
}
if (componentOptions && componentOptions.children) {
componentOptions.children = cloneVNodes(componentOptions.children, true)
}
} }
return cloned return cloned
} }
@ -30,7 +64,8 @@ export function cloneVNodes (vnodes, deep) {
return res return res
} }
export function cloneElement (node, nodeProps) { export function cloneElement (n, nodeProps, clone) {
const node = clone ? cloneVNode(n, true) : n
const { props = {}, key, on = {}} = nodeProps const { props = {}, key, on = {}} = nodeProps
if (node.componentOptions) { if (node.componentOptions) {
node.componentOptions.propsData = node.componentOptions.propsData || {} node.componentOptions.propsData = node.componentOptions.propsData || {}

158
components/menu/demo/antd.vue
View File

@ -1,8 +1,8 @@
<script> <script>
import { cloneElement } from '../../_util/vnode' import { cloneElement } from '../../_util/vnode'
import Clone from '../../_util/Clone'
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index' import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
import { Icon } from 'antd' import { Icon } from 'antd'
import '../assets/index.less'
import animate from 'css-animation' import animate from 'css-animation'
function handleSelect (info) { function handleSelect (info) {
@ -11,40 +11,40 @@ function handleSelect (info) {
} }
const animation = { const animation = {
enter (node, done) { on: {
let height enter (node, done) {
return animate(node, 'rc-menu-collapse', { let height
start () { return animate(node, 'rc-menu-collapse', {
height = node.offsetHeight start () {
node.style.height = 0 height = node.offsetHeight
}, node.style.height = 0
active () { },
node.style.height = `${height}px` active () {
}, node.style.height = `${height}px`
end () { },
node.style.height = '' end () {
done() node.style.height = ''
}, done()
}) },
})
},
leave (node, done) {
return animate(node, 'rc-menu-collapse', {
start () {
node.style.height = `${node.offsetHeight}px`
},
active () {
node.style.height = 0
},
end () {
node.style.height = ''
done()
},
})
},
}, },
props: {
appear () { appear: false,
return this.enter.apply(this, arguments)
},
leave (node, done) {
return animate(node, 'rc-menu-collapse', {
start () {
node.style.height = `${node.offsetHeight}px`
},
active () {
node.style.height = 0
},
end () {
node.style.height = ''
done()
},
})
}, },
} }
export default { export default {
@ -52,7 +52,7 @@ export default {
}, },
render () { render () {
const nestSubMenu = (<SubMenu title={<span>sub menu 2</span>} key='4'> const nestSubMenu = () => (<SubMenu title={<span>sub menu 2</span>} key='4'>
<MenuItem key='4-1'>inner inner</MenuItem> <MenuItem key='4-1'>inner inner</MenuItem>
<Divider/> <Divider/>
<SubMenu <SubMenu
@ -78,58 +78,62 @@ export default {
function onOpenChange (value) { function onOpenChange (value) {
console.log('onOpenChange', value) console.log('onOpenChange', value)
} }
const commonMenu = (<Menu class='test' onSelect={handleSelect} onOpenChange={onOpenChange}> const commonMenu = () => (
<SubMenu key='1' title={<span>sub menu</span>}> <Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
<MenuItem key='1-1'> <SubMenu key='1' title={<span>sub menu</span>}>
<MenuItem key='1-1'>
0-1 0-1
</MenuItem> </MenuItem>
<MenuItem key='1-2'>0-2</MenuItem> <MenuItem key='1-2'>0-2</MenuItem>
</SubMenu> </SubMenu>
{nestSubMenu} {nestSubMenu()}
<MenuItem key='2'>1</MenuItem> <MenuItem key='2'>1</MenuItem>
<MenuItem key='3'>outer</MenuItem> <MenuItem key='3'>outer</MenuItem>
<MenuItem disabled>disabled</MenuItem> <MenuItem disabled>disabled</MenuItem>
<MenuItem key='5'>outer3</MenuItem> <MenuItem key='5'>outer3</MenuItem>
</Menu>) </Menu>
const horizontalMenu = cloneElement(commonMenu, { props: { )
mode: 'horizontal',
// use openTransition for antd
openAnimation: 'rc-menu-open-slide-up',
}})
// const horizontalMenu2 = cloneElement(commonMenu, { props: {
// mode: 'horizontal',
// openAnimation: 'slide-up',
// triggerSubMenuAction: 'click',
// }})
// const verticalMenu = cloneElement(commonMenu, { props: {
// mode: 'vertical',
// openAnimation: 'zoom',
// }})
// const inlineMenu = cloneElement(commonMenu, { props: {
// mode: 'inline',
// defaultOpenKeys: ['1'],
// openAnimation: animation,
// }})
return ( return (
<div style={{ margin: '20px' }}> <div style={{ margin: '20px' }}>
<h2>antd menu</h2> <h2>antd menu</h2>
<div> <div>
<h3>horizontal</h3> <h3>horizontal</h3>
<div style={{ margin: '20px', width: '800px' }}>
<div style={{ margin: '20px', width: '800px' }}>{horizontalMenu}</div> <Clone childProps={{
mode: 'horizontal',
openAnimation: 'rc-menu-open-slide-up',
}} >
{commonMenu()}
</Clone>
</div>
<h3>horizontal and click</h3> <h3>horizontal and click</h3>
{/* <div style={{ margin: '20px', width: '800px' }}>
<div style={{ margin: '20px', width: '800px' }}>{horizontalMenu2}</div> <Clone childProps={{
mode: 'horizontal',
openAnimation: 'rc-menu-open-slide-up',
triggerSubMenuAction: 'click',
defaultOpenKeys: ['1'],
}} >
{commonMenu()}
</Clone>
</div>
<h3>vertical</h3> <h3>vertical</h3>
<div style={{ margin: '20px', width: '200px' }}>
<Clone childProps={{
mode: 'vertical',
openAnimation: 'rc-menu-open-zoom',
}} >
{commonMenu()}
</Clone></div>
<div style={{ margin: '20px', width: '200px' }}>{verticalMenu}</div>
<h3>inline</h3> <h3>inline</h3>
<div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
<div style={{ margin: '20px', width: '400px' }}>{inlineMenu}</div> mode: 'inline',
*/} defaultOpenKeys: ['1'],
openAnimation: animation,
}} >
{commonMenu()}
</Clone></div>
</div> </div>
</div> </div>
) )

16
components/menu/src/Menu.vue
View File

@ -10,10 +10,7 @@ const Menu = {
props: { props: {
getPopupContainer: PropTypes.func, getPopupContainer: PropTypes.func,
openTransitionName: PropTypes.string, openTransitionName: PropTypes.string,
subMenuOpenDelay: PropTypes.number.def(0),
subMenuCloseDelay: PropTypes.number.def(0.1),
forceSubMenuRender: PropTypes.bool, forceSubMenuRender: PropTypes.bool,
level: PropTypes.number.def(1),
selectable: PropTypes.bool.def(true), selectable: PropTypes.bool.def(true),
...commonPropsType, ...commonPropsType,
}, },
@ -23,8 +20,13 @@ const Menu = {
const props = this.$props const props = this.$props
let sSelectedKeys = props.defaultSelectedKeys let sSelectedKeys = props.defaultSelectedKeys
let sOpenKeys = props.defaultOpenKeys let sOpenKeys = props.defaultOpenKeys
sSelectedKeys = props.selectedKeys || [] if (hasProp(this, 'selectedKeys')) {
sOpenKeys = props.openKeys || [] sSelectedKeys = props.selectedKeys || []
}
if (hasProp(this, 'openKeys')) {
sOpenKeys = props.openKeys || []
}
this.isRootMenu = true this.isRootMenu = true
return { return {
sSelectedKeys, sSelectedKeys,
@ -35,10 +37,10 @@ const Menu = {
'$props': { '$props': {
handler: function (nextProps) { handler: function (nextProps) {
const props = {} const props = {}
if (nextProps.selectedKeys === undefined) { if (hasProp(this, 'selectedKeys')) {
props.sSelectedKeys = nextProps.selectedKeys || [] props.sSelectedKeys = nextProps.selectedKeys || []
} }
if (nextProps.openKeys === undefined) { if (hasProp(this, 'selectedKeys')) {
props.sOpenKeys = nextProps.openKeys || [] props.sOpenKeys = nextProps.openKeys || []
} }
this.setState(props) this.setState(props)

10
components/menu/src/MenuItem.vue
View File

@ -27,6 +27,9 @@ const MenuItem = {
// onMouseLeave: PropTypes.func, // onMouseLeave: PropTypes.func,
clearSubMenuTimers: PropTypes.func.def(noop), clearSubMenuTimers: PropTypes.func.def(noop),
}, },
inject: {
parentMenuContext: { default: undefined },
},
mixins: [StateMixin], mixins: [StateMixin],
isMenuItem: true, isMenuItem: true,
beforeDestroy () { beforeDestroy () {
@ -55,8 +58,10 @@ const MenuItem = {
}, },
onMouseEnter (e) { onMouseEnter (e) {
const { eventKey } = this.$props const { eventKey, parentMenuContext } = this
this.clearSubMenuTimers() if (parentMenuContext && parentMenuContext.subMenuInstance) {
parentMenuContext.subMenuInstance.clearSubMenuTimers()
}
this.$emit('itemHover', { this.$emit('itemHover', {
key: eventKey, key: eventKey,
hover: true, hover: true,
@ -133,6 +138,7 @@ const MenuItem = {
mouseenter: this.onMouseEnter, mouseenter: this.onMouseEnter,
} }
} }
const style = {} const style = {}
if (props.mode === 'inline') { if (props.mode === 'inline') {
style.paddingLeft = `${props.inlineIndent * props.level}px` style.paddingLeft = `${props.inlineIndent * props.level}px`

5
components/menu/src/MenuMixin.js
View File

@ -23,6 +23,11 @@ export default {
sActiveKey: this.getActiveKey(props.activeKey), sActiveKey: this.getActiveKey(props.activeKey),
} }
}, },
provide () {
return {
parentMenuContext: this,
}
},
watch: { watch: {
'$props': { '$props': {
handler: function (nextProps) { handler: function (nextProps) {

64
components/menu/src/SubMenu.vue
View File

@ -40,7 +40,10 @@ export default {
forceSubMenuRender: PropTypes.bool, forceSubMenuRender: PropTypes.bool,
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
disabled: PropTypes.bool, disabled: PropTypes.bool,
subMenuCloseDelay: PropTypes.number, subMenuOpenDelay: PropTypes.number.def(0),
subMenuCloseDelay: PropTypes.number.def(0.1),
level: PropTypes.number.def(1),
inlineIndent: PropTypes.number.def(24),
// onDeselect: PropTypes.func, // onDeselect: PropTypes.func,
// onDestroy: PropTypes.func, // onDestroy: PropTypes.func,
// onMouseEnter: PropTypes.func, // onMouseEnter: PropTypes.func,
@ -49,6 +52,9 @@ export default {
// onTitleMouseLeave: PropTypes.func, // onTitleMouseLeave: PropTypes.func,
// onTitleClick: PropTypes.func, // onTitleClick: PropTypes.func,
}, },
inject: {
parentMenuContext: { default: undefined },
},
mixins: [StateMixin], mixins: [StateMixin],
isSubMenu: true, isSubMenu: true,
data () { data () {
@ -65,9 +71,11 @@ export default {
}, },
beforeDestroy () { beforeDestroy () {
const { eventKey } = this.$props const { eventKey, parentMenuContext } = this
this.$emit('destroy', eventKey) this.$emit('destroy', eventKey)
this.clearSubMenuTimers() if (parentMenuContext.subMenuInstance === this) {
this.clearSubMenuTimers()
}
}, },
methods: { methods: {
handleUpdated () { handleUpdated () {
@ -156,8 +164,10 @@ export default {
onMouseLeave (e) { onMouseLeave (e) {
const { const {
eventKey, eventKey,
} = this.$props parentMenuContext,
this.subMenuLeaveFn = () => { } = this
parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuLeaveFn = () => {
// trigger mouseleave // trigger mouseleave
this.$emit('mouseleave', { this.$emit('mouseleave', {
key: eventKey, key: eventKey,
@ -165,7 +175,7 @@ export default {
}) })
} }
// prevent popup menu and submenu gap // prevent popup menu and submenu gap
this.subMenuLeaveTimer = setTimeout(this.subMenuLeaveFn, 100) parentMenuContext.subMenuLeaveTimer = setTimeout(parentMenuContext.subMenuLeaveFn, 100)
}, },
onTitleMouseEnter (domEvent) { onTitleMouseEnter (domEvent) {
@ -182,8 +192,9 @@ export default {
}, },
onTitleMouseLeave (e) { onTitleMouseLeave (e) {
const { eventKey } = this.$props const { eventKey, parentMenuContext } = this
this.subMenuTitleLeaveFn = () => { parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuTitleLeaveFn = () => {
this.$emit('itemHover', { this.$emit('itemHover', {
key: eventKey, key: eventKey,
hover: false, hover: false,
@ -193,7 +204,7 @@ export default {
domEvent: e, domEvent: e,
}) })
} }
this.subMenuTitleLeaveTimer = setTimeout(this.subMenuTitleLeaveFn, 100) parentMenuContext.subMenuTitleLeaveTimer = setTimeout(parentMenuContext.subMenuTitleLeaveFn, 100)
}, },
onTitleClick (e) { onTitleClick (e) {
@ -268,18 +279,20 @@ export default {
}, },
clearSubMenuTitleLeaveTimer () { clearSubMenuTitleLeaveTimer () {
if (this.subMenuTitleLeaveTimer) { const parentMenuContext = this.parentMenuContext
clearTimeout(this.subMenuTitleLeaveTimer) if (parentMenuContext.subMenuTitleLeaveTimer) {
this.subMenuTitleLeaveTimer = null clearTimeout(parentMenuContext.subMenuTitleLeaveTimer)
this.subMenuTitleLeaveFn = null parentMenuContext.subMenuTitleLeaveTimer = null
parentMenuContext.subMenuTitleLeaveFn = null
} }
}, },
clearSubMenuLeaveTimer () { clearSubMenuLeaveTimer () {
if (this.subMenuLeaveTimer) { const parentMenuContext = this.parentMenuContext
clearTimeout(this.subMenuLeaveTimer) if (parentMenuContext.subMenuLeaveTimer) {
this.subMenuLeaveTimer = null clearTimeout(parentMenuContext.subMenuLeaveTimer)
this.subMenuLeaveFn = null parentMenuContext.subMenuLeaveTimer = null
parentMenuContext.subMenuLeaveFn = null
} }
}, },
@ -292,12 +305,13 @@ export default {
return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1 return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1
}, },
renderChildren (children) { renderChildren (children, vShow) {
const props = this.$props const props = this.$props
const isOpen = this.isOpen()
const subPopupMenuProps = { const subPopupMenuProps = {
props: { props: {
mode: props.mode === 'horizontal' ? 'vertical' : props.mode, mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
visible: this.isOpen(), visible: isOpen,
level: props.level + 1, level: props.level + 1,
inlineIndent: props.inlineIndent, inlineIndent: props.inlineIndent,
focusable: false, focusable: false,
@ -325,7 +339,9 @@ export default {
id: this._menuId, id: this._menuId,
ref: 'menuInstance', ref: 'menuInstance',
} }
return <SubPopupMenu {...subPopupMenuProps}>{children}</SubPopupMenu> return vShow
? <SubPopupMenu v-show={isOpen} {...subPopupMenuProps}>{children}</SubPopupMenu>
: <SubPopupMenu {...subPopupMenuProps}>{children}</SubPopupMenu>
}, },
}, },
@ -398,7 +414,7 @@ export default {
<i class={`${prefixCls}-arrow`} /> <i class={`${prefixCls}-arrow`} />
</div> </div>
) )
const children = this.renderChildren(this.$slots.default) // const children = this.renderChildren(this.$slots.default)
const getPopupContainer = this.isRootMenu const getPopupContainer = this.isRootMenu
? this.getPopupContainer : triggerNode => triggerNode.parentNode ? this.getPopupContainer : triggerNode => triggerNode.parentNode
@ -421,7 +437,7 @@ export default {
if (openTransitionName) { if (openTransitionName) {
animProps.name = openTransitionName animProps.name = openTransitionName
} else if (typeof openAnimation === 'object') { } else if (typeof openAnimation === 'object') {
animProps = { ...animProps, ...openAnimation } animProps = { ...animProps, ...openAnimation.props || {}}
if (!transitionAppear) { if (!transitionAppear) {
animProps.appear = false animProps.appear = false
} }
@ -431,6 +447,10 @@ export default {
const transitionProps = { const transitionProps = {
props: animProps, props: animProps,
} }
if (typeof openAnimation === 'object' && openAnimation.on) {
transitionProps.on = { ...openAnimation.on }
}
const children = isInlineMode ? this.renderChildren(this.$slots.default, true) : this.renderChildren(this.$slots.default)
return ( return (
<li {...liProps}> <li {...liProps}>
{isInlineMode && title} {isInlineMode && title}

11
components/menu/src/commonPropsType.js
View File

@ -1,18 +1,21 @@
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
export default { export default {
prefixCls: PropTypes.string.def('rc-menu'), prefixCls: PropTypes.string.def('rc-menu'),
inlineIndent: PropTypes.number.def(24),
focusable: PropTypes.bool.def(true), focusable: PropTypes.bool.def(true),
multiple: PropTypes.bool, multiple: PropTypes.bool,
defaultActiveFirst: PropTypes.bool, defaultActiveFirst: PropTypes.bool,
visible: PropTypes.bool.def(true), visible: PropTypes.bool.def(true),
activeKey: PropTypes.string, activeKey: PropTypes.string,
selectedKeys: PropTypes.arrayOf(PropTypes.string), selectedKeys: PropTypes.arrayOf(PropTypes.string),
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string), defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string).def([]),
defaultOpenKeys: PropTypes.arrayOf(PropTypes.string), defaultOpenKeys: PropTypes.arrayOf(PropTypes.string).def([]),
openKeys: PropTypes.arrayOf(PropTypes.string), openKeys: PropTypes.arrayOf(PropTypes.string),
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'), mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
triggerSubMenuAction: PropTypes.string.def('click'), triggerSubMenuAction: PropTypes.string.def('hover'),
openTransitionName: PropTypes.string, openTransitionName: PropTypes.string,
subMenuOpenDelay: PropTypes.number.def(0),
subMenuCloseDelay: PropTypes.number.def(0.1),
level: PropTypes.number.def(1),
inlineIndent: PropTypes.number.def(24),
} }

2
components/menu/style/index.js Normal file
View File

@ -0,0 +1,2 @@
import '../../style/index.less'
import './index.less'

17
components/menu/assets/index.less → components/menu/style/index.less
View File

@ -25,6 +25,7 @@
&-collapse { &-collapse {
overflow: hidden; overflow: hidden;
&-active { &-active {
overflow: hidden;
transition: height .3s ease-out; transition: height .3s ease-out;
} }
} }
@ -136,7 +137,9 @@
clear: both; clear: both;
} }
} }
&-inline {
overflow: hidden;
}
&-vertical, &-vertical,
&-vertical-left, &-vertical-left,
&-vertical-right, &-vertical-right,
@ -166,7 +169,7 @@
transform: rotate(90deg); transform: rotate(90deg);
transition: transform .3s; transition: transform .3s;
} }
& .@{menuPrefixCls}-submenu-open .@{menuPrefixCls}-submenu-title { & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
.@{menuPrefixCls}-submenu-arrow { .@{menuPrefixCls}-submenu-arrow {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -193,7 +196,7 @@
} }
.effect() { .effect() {
animation-duration: .5s; animation-duration: 3s;
animation-fill-mode: both; animation-fill-mode: both;
transform-origin: 0 0; transform-origin: 0 0;
} }
@ -265,12 +268,14 @@
animation-play-state: paused; animation-play-state: paused;
} }
&-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active { &-zoom-enter-active, &-zoom-appear-active {
.effect();
animation-name: rcMenuOpenZoomIn; animation-name: rcMenuOpenZoomIn;
animation-play-state: running; animation-play-state: running;
} }
&-zoom-leave&-zoom-leave-active { &-zoom-leave-active {
.effect();
animation-name: rcMenuOpenZoomOut; animation-name: rcMenuOpenZoomOut;
animation-play-state: running; animation-play-state: running;
} }
@ -285,6 +290,7 @@
transform: scale(1, 1); transform: scale(1, 1);
} }
} }
@keyframes rcMenuOpenZoomOut { @keyframes rcMenuOpenZoomOut {
0% { 0% {
transform: scale(1, 1); transform: scale(1, 1);
@ -295,6 +301,5 @@
} }
} }
} }
} }

2
components/style.js
View File

@ -10,3 +10,5 @@ import './avatar/style'
import './badge/style' import './badge/style'
import './tabs/style' import './tabs/style'
import './input/style' import './input/style'
import './menu/style'

27
components/trigger/Popup.vue
View File

@ -24,6 +24,7 @@ export default {
data () { data () {
return { return {
destroyPopup: false, destroyPopup: false,
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
} }
}, },
mounted () { mounted () {
@ -31,15 +32,25 @@ export default {
this._container = this.getContainer() this._container = this.getContainer()
this._container.appendChild(this.$el) this._container.appendChild(this.$el)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.alignInstance.forceAlign() this.initAlign = true
}) })
}, },
beforeDestroy () {
this.$el.remove()
},
watch: { watch: {
visible (val) { visible (val) {
if (val) { if (val) {
this.destroyPopup = false this.destroyPopup = false
} }
}, },
initAlign (val) {
if (val) {
this.$nextTick(() => {
this.$refs.alignInstance.forceAlign()
})
}
},
}, },
methods: { methods: {
onAlign (popupDomNode, align) { onAlign (popupDomNode, align) {
@ -92,6 +103,9 @@ export default {
}, },
beforeEnter (el) { beforeEnter (el) {
this.$refs.alignInstance && this.$refs.alignInstance.forceAlign() this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
// this.$nextTick(() => {
// this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
// })
}, },
afterLeave (el) { afterLeave (el) {
if (this.destroyPopupOnHide) { if (this.destroyPopupOnHide) {
@ -189,12 +203,15 @@ export default {
}, },
render () { render () {
const { destroyPopup, getMaskElement, getPopupElement } = this const { destroyPopup, getMaskElement, getPopupElement, initAlign } = this
return ( return (
<div style='position: absolute; top: 0px; left: 0px; width: 100%;'> <div style='position: absolute; top: 0px; left: 0px; width: 100%;'>
{getMaskElement()} {initAlign ? (
{ destroyPopup getMaskElement(),
? null : getPopupElement()} destroyPopup
? null : getPopupElement()
) : null }
</div> </div>
) )
}, },

4
components/trigger/index.vue
View File

@ -258,7 +258,8 @@ export default {
}, },
getRootDomNode () { getRootDomNode () {
return this.$el.children[0] || this.$el console.log('this.$el.children', this.$el.children)
return this.$el.children ? this.$el.children[0] : this.$el
}, },
getPopupClassFromAlign (align) { getPopupClassFromAlign (align) {
@ -509,6 +510,7 @@ export default {
} else { } else {
newChildProps.on.mouseleave = this.createTwoChains('mouseleave') newChildProps.on.mouseleave = this.createTwoChains('mouseleave')
} }
if (this.isFocusToShow() || this.isBlurToHide()) { if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.on.focus = this.onFocus newChildProps.on.focus = this.onFocus
newChildProps.on.blur = this.onBlur newChildProps.on.blur = this.onBlur

2
webpack.config.js
View File

@ -63,7 +63,7 @@ module.exports = {
performance: { performance: {
hints: false, hints: false,
}, },
devtool: '#eval-source-map', devtool: '#source-map',
} }
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {