fix
tangjinzhou
parent
127a67d53d
commit
1b8ecf5656
|
|
@ -1,5 +0,0 @@
|
|||
export default (instance, prop) => {
|
||||
const $options = instance.$options || {}
|
||||
const propsData = $options.propsData || {}
|
||||
return prop in propsData
|
||||
}
|
||||
|
|
@ -44,9 +44,9 @@ const animation = {
|
|||
leave (node, done) {
|
||||
return animate(node, false, done)
|
||||
},
|
||||
appear (node, done) {
|
||||
return animate(node, true, done)
|
||||
},
|
||||
// appear (node, done) {
|
||||
// return animate(node, true, done)
|
||||
// },
|
||||
}
|
||||
|
||||
export default animation
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ export default {
|
|||
disabled: PropTypes.bool.def(false),
|
||||
},
|
||||
data () {
|
||||
this.aligned = false
|
||||
return {
|
||||
aligned: false,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -103,7 +103,6 @@ export default {
|
|||
if (!props.disabled) {
|
||||
const source = this.$el
|
||||
this.aligned = true
|
||||
// this.$emit('align', source, align(source, props.target(), props.align))
|
||||
this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align))
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,17 +1,3 @@
|
|||
<template>
|
||||
<label :class="classes">
|
||||
<span :class="checkboxClass">
|
||||
<input :name="name" type="checkbox" :disabled="disabled"
|
||||
:class="`${prefixCls}-input`" :checked="stateChecked"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span :class="`${prefixCls}-inner`" />
|
||||
</span>
|
||||
<span v-if="hasDefaultSlot">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
import hasProp from '../_util/props-util'
|
||||
export default {
|
||||
|
|
@ -33,77 +19,106 @@ export default {
|
|||
prop: 'checked',
|
||||
},
|
||||
inject: {
|
||||
checkboxGroupContext: { default: undefined },
|
||||
checkboxGroupContext: { default: null },
|
||||
},
|
||||
data () {
|
||||
const { checkboxGroupContext, checked, defaultChecked, value } = this
|
||||
let stateChecked
|
||||
if (checkboxGroupContext && checkboxGroupContext.checkedStatus) {
|
||||
stateChecked = checkboxGroupContext.checkedStatus.has(value)
|
||||
let sChecked
|
||||
if (checkboxGroupContext) {
|
||||
sChecked = checkboxGroupContext.sValue.indexOf(value) !== -1
|
||||
} else {
|
||||
sChecked = !hasProp(this, 'checked') ? defaultChecked : checked
|
||||
}
|
||||
return {
|
||||
stateChecked: stateChecked === undefined
|
||||
? !hasProp(this, 'checked') ? defaultChecked : checked
|
||||
: stateChecked,
|
||||
sChecked,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasDefaultSlot () {
|
||||
return !!this.$slots.default
|
||||
},
|
||||
classes () {
|
||||
const { prefixCls } = this
|
||||
return {
|
||||
[`${prefixCls}-wrapper`]: true,
|
||||
}
|
||||
},
|
||||
checkboxClass () {
|
||||
const { prefixCls, indeterminate, stateChecked, disabled } = this
|
||||
const { prefixCls, indeterminate, sChecked, $props, checkboxGroupContext } = this
|
||||
let disabled = $props.disabled
|
||||
if (checkboxGroupContext) {
|
||||
disabled = disabled || checkboxGroupContext.disabled
|
||||
}
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-checked`]: stateChecked,
|
||||
[`${prefixCls}-checked`]: sChecked,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-indeterminate`]: indeterminate,
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
const targetChecked = event.target.checked
|
||||
this.$emit('input', targetChecked)
|
||||
const { name, value, checked, checkboxGroupContext, stateChecked } = this
|
||||
if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.value === undefined)) {
|
||||
this.stateChecked = targetChecked
|
||||
const { name, value, checked, checkboxGroupContext, sChecked } = this
|
||||
if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.sValue === undefined)) {
|
||||
this.sChecked = targetChecked
|
||||
}
|
||||
const target = {
|
||||
name,
|
||||
value,
|
||||
checked: !stateChecked,
|
||||
}
|
||||
if (this.checkboxGroupContext) {
|
||||
this.checkboxGroupContext.handleChange({ target })
|
||||
} else {
|
||||
this.$emit('change', {
|
||||
target,
|
||||
stopPropagation () {
|
||||
event.stopPropagation()
|
||||
},
|
||||
preventDefault () {
|
||||
event.preventDefault()
|
||||
},
|
||||
})
|
||||
checked: !sChecked,
|
||||
}
|
||||
this.$emit('change', {
|
||||
target,
|
||||
stopPropagation () {
|
||||
event.stopPropagation()
|
||||
},
|
||||
preventDefault () {
|
||||
event.preventDefault()
|
||||
},
|
||||
})
|
||||
},
|
||||
onMouseEnter (e) {
|
||||
this.$emit('mouseenter', e)
|
||||
},
|
||||
onMouseLeave (e) {
|
||||
this.$emit('mouseleave', e)
|
||||
},
|
||||
focus () {
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
blur () {
|
||||
this.$refs.input.blur()
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
checked (val) {
|
||||
this.stateChecked = val
|
||||
this.sChecked = val
|
||||
},
|
||||
'checkboxGroupContext.checkedStatus': function (checkedStatus) {
|
||||
this.stateChecked = checkedStatus.has(this.value)
|
||||
'checkboxGroupContext.sValue': function (val) {
|
||||
this.sChecked = val.indexOf(this.value) !== -1
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { $props: props, checkboxGroupContext, checkboxClass, name, $slots, sChecked } = this
|
||||
const {
|
||||
prefixCls,
|
||||
} = props
|
||||
let disabled = props.disabled
|
||||
let onChange = this.handleChange
|
||||
if (checkboxGroupContext) {
|
||||
onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
|
||||
disabled = props.disabled || checkboxGroupContext.disabled
|
||||
}
|
||||
return (
|
||||
<label
|
||||
class={`${prefixCls}-wrapper`}
|
||||
onMouseenter={this.onMouseEnter}
|
||||
onMouseleave={this.onMouseLeave}
|
||||
>
|
||||
<span class={checkboxClass}>
|
||||
<input name={name} type='checkbox' disabled={disabled}
|
||||
class={`${prefixCls}-input`} checked={sChecked}
|
||||
onChange={onChange} ref='input'
|
||||
/>
|
||||
<span class={`${prefixCls}-inner`} />
|
||||
</span>
|
||||
{$slots.default ? <span>{$slots.default}</span> : null}
|
||||
</label>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
<template>
|
||||
<div :class="`${prefixCls}`">
|
||||
<Checkbox v-for="item in checkOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
|
||||
{{item.label}}
|
||||
</Checkbox>
|
||||
<slot v-if="checkOptions.length === 0"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Checkbox from './Checkbox.vue'
|
||||
import hasProp from '../_util/props-util'
|
||||
|
|
@ -41,52 +33,84 @@ export default {
|
|||
data () {
|
||||
const { value, defaultValue } = this
|
||||
return {
|
||||
stateValue: value || defaultValue,
|
||||
sValue: value || defaultValue,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
checkedStatus () {
|
||||
return new Set(this.stateValue)
|
||||
},
|
||||
checkOptions () {
|
||||
const { disabled } = this
|
||||
return this.options.map(option => {
|
||||
return typeof option === 'string'
|
||||
? { label: option, value: option }
|
||||
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
|
||||
})
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
const target = event.target
|
||||
const { value: targetValue, checked } = target
|
||||
const { stateValue } = this
|
||||
const { sValue } = this
|
||||
let newVal = []
|
||||
if (checked) {
|
||||
newVal = [...stateValue, targetValue]
|
||||
newVal = [...sValue, targetValue]
|
||||
} else {
|
||||
newVal = [...stateValue]
|
||||
newVal = [...sValue]
|
||||
const index = newVal.indexOf(targetValue)
|
||||
index >= 0 && newVal.splice(index, 1)
|
||||
}
|
||||
newVal = [...new Set(newVal)]
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.stateValue = newVal
|
||||
this.sValue = newVal
|
||||
}
|
||||
this.$emit('input', newVal)
|
||||
this.$emit('change', newVal)
|
||||
},
|
||||
getOptions () {
|
||||
const { options } = this.$props
|
||||
return options.map(option => {
|
||||
if (typeof option === 'string') {
|
||||
return {
|
||||
label: option,
|
||||
value: option,
|
||||
}
|
||||
}
|
||||
return option
|
||||
})
|
||||
},
|
||||
toggleOption (option) {
|
||||
const optionIndex = this.sValue.indexOf(option.value)
|
||||
const value = [...this.sValue]
|
||||
if (optionIndex === -1) {
|
||||
value.push(option.value)
|
||||
} else {
|
||||
value.splice(optionIndex, 1)
|
||||
}
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.sValue = value
|
||||
}
|
||||
this.$emit('input', value)
|
||||
this.$emit('change', value)
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
render () {
|
||||
const { $props: props, $data: state, $slots } = this
|
||||
const { prefixCls, options } = props
|
||||
let children = $slots.default
|
||||
if (options && options.length > 0) {
|
||||
children = this.getOptions().map(option => (
|
||||
<Checkbox
|
||||
key={option.value}
|
||||
disabled={'disabled' in option ? option.disabled : props.disabled}
|
||||
value={option.value}
|
||||
checked={state.sValue.indexOf(option.value) !== -1}
|
||||
onChange={() => this.toggleOption(option)}
|
||||
class={`${prefixCls}-item`}
|
||||
>
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
))
|
||||
}
|
||||
return (
|
||||
<div class={prefixCls}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.stateValue = val
|
||||
this.sValue = val
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { Item, itemProps } from './src/index'
|
||||
import { getClass, getStyle } from '../_util/vnode'
|
||||
import Tooltip from '../tooltip'
|
||||
|
||||
export default {
|
||||
props: itemProps,
|
||||
inject: {
|
||||
inlineCollapsed: { default: false },
|
||||
},
|
||||
isMenuItem: 1,
|
||||
methods: {
|
||||
onKeyDown (e) {
|
||||
this.$refs.menuItem.onKeyDown(e)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { inlineCollapsed, $props: props, $slots, $attrs: attrs, $listeners } = this
|
||||
const itemProps = {
|
||||
props,
|
||||
attrs,
|
||||
on: $listeners,
|
||||
class: getClass(this),
|
||||
style: getStyle(this),
|
||||
}
|
||||
return <Tooltip
|
||||
placement='right'
|
||||
overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`}
|
||||
>
|
||||
<template slot='title'>
|
||||
{inlineCollapsed && props.level === 1 ? $slots.default : ''}
|
||||
</template>
|
||||
<Item {...itemProps} ref='menuItem'>
|
||||
{$slots.default}
|
||||
</Item>
|
||||
</Tooltip>
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<script>
|
||||
import RcMenu, { Divider, ItemGroup, SubMenu } from '../src'
|
||||
import PropTypes from '../util/vue-types'
|
||||
import animation from '../_util/openAnimation'
|
||||
import warning from '../_util/warning'
|
||||
import Item from './MenuItem'
|
||||
import { hasProp } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
|
||||
export const MenuMode = PropTypes.oneOf(['vertical', 'vertical-left', 'vertical-right', 'horizontal', 'inline'])
|
||||
|
||||
export const menuProps = {
|
||||
theme: PropTypes.oneOf(['light', 'dark']).def('light'),
|
||||
mode: MenuMode,
|
||||
selectable: PropTypes.bool,
|
||||
selectedKeys: PropTypes.array,
|
||||
defaultSelectedKeys: PropTypes.array,
|
||||
openKeys: PropTypes.array,
|
||||
defaultOpenKeys: PropTypes.array,
|
||||
// onOpenChange: (openKeys: string[]) => void;
|
||||
// onSelect: (param: SelectParam) => void;
|
||||
// onDeselect: (param: SelectParam) => void;
|
||||
// onClick: (param: ClickParam) => void;
|
||||
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
openTransitionName: PropTypes.string,
|
||||
prefixCls: PropTypes.string.def('ant-menu'),
|
||||
multiple: PropTypes.bool,
|
||||
inlineIndent: PropTypes.number.def(24),
|
||||
inlineCollapsed: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default {
|
||||
props: menuProps,
|
||||
Divider,
|
||||
Item,
|
||||
SubMenu,
|
||||
ItemGroup,
|
||||
provide () {
|
||||
return {
|
||||
inlineCollapsed: this.getInlineCollapsed(),
|
||||
antdMenuTheme: this.$props.theme,
|
||||
}
|
||||
},
|
||||
mixins: [BaseMixin],
|
||||
inject: {
|
||||
siderCollapsed: { default: undefined },
|
||||
collapsedWidth: { default: undefined },
|
||||
},
|
||||
data () {
|
||||
const props = this.$props
|
||||
warning(
|
||||
!(hasProp(this, 'inlineCollapsed') && props.mode !== 'inline'),
|
||||
'`inlineCollapsed` should only be used when Menu\'s `mode` is inline.',
|
||||
)
|
||||
this.switchModeFromInline = false
|
||||
this.leaveAnimationExecutedWhenInlineCollapsed = false
|
||||
this.inlineOpenKeys = []
|
||||
let sOpenKeys
|
||||
if (hasProp(this, 'defaultOpenKeys')) {
|
||||
sOpenKeys = props.defaultOpenKeys
|
||||
} else if (hasProp(this, 'openKeys')) {
|
||||
sOpenKeys = props.openKeys
|
||||
}
|
||||
return {
|
||||
sOpenKeys,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
this.handleOpenChange([])
|
||||
const { onClick } = this.props
|
||||
if (onClick) {
|
||||
onClick(e)
|
||||
}
|
||||
},
|
||||
handleOpenChange (openKeys) {
|
||||
this.setOpenKeys(openKeys)
|
||||
|
||||
const { onOpenChange } = this.props
|
||||
if (onOpenChange) {
|
||||
onOpenChange(openKeys)
|
||||
}
|
||||
},
|
||||
setOpenKeys (openKeys) {
|
||||
if (!('openKeys' in this.props)) {
|
||||
this.setState({ openKeys })
|
||||
}
|
||||
},
|
||||
getRealMenuMode () {
|
||||
const inlineCollapsed = this.getInlineCollapsed()
|
||||
if (this.switchModeFromInline && inlineCollapsed) {
|
||||
return 'inline'
|
||||
}
|
||||
const { mode } = this.props
|
||||
return inlineCollapsed ? 'vertical' : mode
|
||||
},
|
||||
getInlineCollapsed () {
|
||||
const { inlineCollapsed } = this.props
|
||||
if (this.context.siderCollapsed !== undefined) {
|
||||
return this.context.siderCollapsed
|
||||
}
|
||||
return inlineCollapsed
|
||||
},
|
||||
getMenuOpenAnimation (menuMode) {
|
||||
const { openAnimation, openTransitionName } = this.props
|
||||
let menuOpenAnimation = openAnimation || openTransitionName
|
||||
if (openAnimation === undefined && openTransitionName === undefined) {
|
||||
switch (menuMode) {
|
||||
case 'horizontal':
|
||||
menuOpenAnimation = 'slide-up'
|
||||
break
|
||||
case 'vertical':
|
||||
case 'vertical-left':
|
||||
case 'vertical-right':
|
||||
// When mode switch from inline
|
||||
// submenu should hide without animation
|
||||
if (this.switchModeFromInline) {
|
||||
menuOpenAnimation = ''
|
||||
this.switchModeFromInline = false
|
||||
} else {
|
||||
menuOpenAnimation = 'zoom-big'
|
||||
}
|
||||
break
|
||||
case 'inline':
|
||||
menuOpenAnimation = {
|
||||
...animation,
|
||||
leave: (node, done: () => void) => animation.leave(node, () => {
|
||||
// Make sure inline menu leave animation finished before mode is switched
|
||||
this.switchModeFromInline = false
|
||||
this.setState({})
|
||||
// when inlineCollapsed change false to true, all submenu will be unmounted,
|
||||
// so that we don't need handle animation leaving.
|
||||
if (this.getRealMenuMode() === 'vertical') {
|
||||
return
|
||||
}
|
||||
done()
|
||||
}),
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
return menuOpenAnimation
|
||||
},
|
||||
},
|
||||
|
||||
componentWillReceiveProps (nextProps, nextContext) {
|
||||
const { prefixCls } = this.props
|
||||
if (this.props.mode === 'inline' &&
|
||||
nextProps.mode !== 'inline') {
|
||||
this.switchModeFromInline = true
|
||||
}
|
||||
if ('openKeys' in nextProps) {
|
||||
this.setState({ openKeys: nextProps.openKeys })
|
||||
return
|
||||
}
|
||||
if ((nextProps.inlineCollapsed && !this.props.inlineCollapsed) ||
|
||||
(nextContext.siderCollapsed && !this.context.siderCollapsed)) {
|
||||
this.switchModeFromInline =
|
||||
!!this.state.openKeys.length && !!this.$el.querySelectorAll(`.${prefixCls}-submenu-open`).length
|
||||
this.inlineOpenKeys = this.state.openKeys
|
||||
this.setState({ openKeys: [] })
|
||||
}
|
||||
if ((!nextProps.inlineCollapsed && this.props.inlineCollapsed) ||
|
||||
(!nextContext.siderCollapsed && this.context.siderCollapsed)) {
|
||||
this.setState({ openKeys: this.inlineOpenKeys })
|
||||
this.inlineOpenKeys = []
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { prefixCls, className, theme } = this.props
|
||||
const menuMode = this.getRealMenuMode()
|
||||
const menuOpenAnimation = this.getMenuOpenAnimation(menuMode)
|
||||
|
||||
const menuClassName = {
|
||||
[`${prefixCls}-${theme}`]: true,
|
||||
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
|
||||
}
|
||||
|
||||
const menuProps = {
|
||||
openKeys: this.state.openKeys,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
className: menuClassName,
|
||||
mode: menuMode,
|
||||
}
|
||||
|
||||
if (menuMode !== 'inline') {
|
||||
// closing vertical popup submenu after click it
|
||||
menuProps.onClick = this.handleClick
|
||||
menuProps.openTransitionName = menuOpenAnimation
|
||||
} else {
|
||||
menuProps.openAnimation = menuOpenAnimation
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/8587
|
||||
const { collapsedWidth } = this.context
|
||||
if (
|
||||
this.getInlineCollapsed() &&
|
||||
(collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px')
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <RcMenu {...this.props} {...menuProps} />
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -3,24 +3,23 @@ import PropTypes from '../../_util/vue-types'
|
|||
import KeyCode from '../../_util/KeyCode'
|
||||
import { noop } from './util'
|
||||
import BaseMixin from '../../_util/BaseMixin'
|
||||
|
||||
const props = {
|
||||
rootPrefixCls: PropTypes.string,
|
||||
eventKey: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
selectedKeys: PropTypes.array,
|
||||
disabled: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
index: PropTypes.number,
|
||||
inlineIndent: PropTypes.number.def(24),
|
||||
level: PropTypes.number.def(1),
|
||||
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
||||
parentMenu: PropTypes.object,
|
||||
clearSubMenuTimers: PropTypes.func.def(noop),
|
||||
}
|
||||
const MenuItem = {
|
||||
name: 'MenuItem',
|
||||
|
||||
props: {
|
||||
rootPrefixCls: PropTypes.string,
|
||||
eventKey: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
selectedKeys: PropTypes.array,
|
||||
disabled: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
index: PropTypes.number,
|
||||
inlineIndent: PropTypes.number.def(24),
|
||||
level: PropTypes.number.def(1),
|
||||
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
||||
parentMenu: PropTypes.object,
|
||||
clearSubMenuTimers: PropTypes.func.def(noop),
|
||||
},
|
||||
props,
|
||||
inject: {
|
||||
parentMenuContext: { default: undefined },
|
||||
},
|
||||
|
|
@ -162,4 +161,5 @@ const MenuItem = {
|
|||
}
|
||||
|
||||
export default MenuItem
|
||||
export { props as menuItemProps }
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,13 +18,11 @@ const popupPlacementMap = {
|
|||
|
||||
export default {
|
||||
name: 'SubMenu',
|
||||
|
||||
props: {
|
||||
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
||||
title: PropTypes.any.def(''),
|
||||
selectedKeys: PropTypes.array.def([]),
|
||||
openKeys: PropTypes.array.def([]),
|
||||
// onClick: PropTypes.func,
|
||||
openChange: PropTypes.func.def(noop),
|
||||
rootPrefixCls: PropTypes.string,
|
||||
eventKey: PropTypes.string,
|
||||
|
|
@ -32,8 +30,6 @@ export default {
|
|||
active: PropTypes.bool, // TODO: remove
|
||||
isRootMenu: PropTypes.bool,
|
||||
index: PropTypes.number,
|
||||
// onItemHover: PropTypes.func,
|
||||
// onSelect: PropTypes.func,
|
||||
triggerSubMenuAction: PropTypes.string,
|
||||
popupClassName: PropTypes.string,
|
||||
getPopupContainer: PropTypes.func,
|
||||
|
|
@ -48,6 +44,7 @@ export default {
|
|||
},
|
||||
inject: {
|
||||
parentMenuContext: { default: undefined },
|
||||
antdMenuTheme: { default: 'light' },
|
||||
},
|
||||
mixins: [BaseMixin],
|
||||
isSubMenu: true,
|
||||
|
|
@ -324,6 +321,7 @@ export default {
|
|||
|
||||
render (h) {
|
||||
const props = this.$props
|
||||
const { rootPrefixCls, antdMenuTheme } = this
|
||||
const isOpen = this.isOpen()
|
||||
const prefixCls = this.getPrefixCls()
|
||||
const isInlineMode = props.mode === 'inline'
|
||||
|
|
@ -440,7 +438,7 @@ export default {
|
|||
{!isInlineMode && (
|
||||
<Trigger
|
||||
prefixCls={prefixCls}
|
||||
popupClassName={`${prefixCls}-popup ${popupClassName || ''}`}
|
||||
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${antdMenuTheme} ${popupClassName || ''}`}
|
||||
getPopupContainer={getPopupContainer}
|
||||
builtinPlacements={placements}
|
||||
popupPlacement={popupPlacement}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import PropTypes from '../../_util/vue-types'
|
||||
export default {
|
||||
prefixCls: PropTypes.string.def('rc-menu'),
|
||||
prefixCls: PropTypes.string.def('ant-menu'),
|
||||
focusable: PropTypes.bool.def(true),
|
||||
multiple: PropTypes.bool,
|
||||
defaultActiveFirst: PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import Menu from './Menu'
|
||||
import SubMenu from './SubMenu'
|
||||
import MenuItem from './MenuItem'
|
||||
import MenuItem, { menuItemProps } from './MenuItem'
|
||||
import MenuItemGroup from './MenuItemGroup'
|
||||
import Divider from './Divider'
|
||||
|
||||
export { SubMenu, MenuItem as Item, MenuItem, MenuItemGroup, MenuItemGroup as ItemGroup, Divider }
|
||||
export { SubMenu, MenuItem as Item, menuItemProps as itemProps, MenuItem, MenuItemGroup, MenuItemGroup as ItemGroup, Divider }
|
||||
|
||||
export default Menu
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
.@{menu-prefix-cls} {
|
||||
// dark theme
|
||||
&-dark,
|
||||
&-dark &-sub {
|
||||
color: @text-color-secondary-dark;
|
||||
background: @menu-dark-bg;
|
||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: .45;
|
||||
transition: all .3s;
|
||||
&:after,
|
||||
&:before {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dark&-submenu-popup {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dark &-inline&-sub {
|
||||
background: @menu-dark-submenu-bg;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset;
|
||||
}
|
||||
|
||||
&-dark&-horizontal {
|
||||
border-bottom-color: @menu-dark-bg;
|
||||
}
|
||||
|
||||
&-dark&-horizontal > &-item,
|
||||
&-dark&-horizontal > &-submenu {
|
||||
border-color: @menu-dark-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-dark &-item,
|
||||
&-dark &-item-group-title,
|
||||
&-dark &-item > a {
|
||||
color: @text-color-secondary-dark;
|
||||
}
|
||||
|
||||
&-dark&-inline,
|
||||
&-dark&-vertical,
|
||||
&-dark&-vertical-left,
|
||||
&-dark&-vertical-right {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&-dark&-inline &-item,
|
||||
&-dark&-vertical &-item,
|
||||
&-dark&-vertical-left &-item,
|
||||
&-dark&-vertical-right &-item {
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
&:after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-dark&-inline &-item,
|
||||
&-dark&-inline &-submenu-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-dark &-item:hover,
|
||||
&-dark &-item-active,
|
||||
&-dark &-submenu-active,
|
||||
&-dark &-submenu-open,
|
||||
&-dark &-submenu-selected,
|
||||
&-dark &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title,
|
||||
> .@{menu-prefix-cls}-submenu-title:hover {
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 1;
|
||||
&:after,
|
||||
&:before {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dark &-item-selected {
|
||||
border-right: 0;
|
||||
color: #fff;
|
||||
&:after {
|
||||
border-right: 0;
|
||||
}
|
||||
> a,
|
||||
> a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&&-dark &-item-selected,
|
||||
&-submenu-popup&-dark &-item-selected {
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
// Disabled state sets text to dark gray and nukes hover/tab effects
|
||||
&-dark &-item-disabled,
|
||||
&-dark &-submenu-disabled {
|
||||
&,
|
||||
> a {
|
||||
opacity: 0.8;
|
||||
color: @disabled-color-dark !important;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,5 @@
|
|||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
|
||||
// style dependencies
|
||||
import '../../tooltip/style'
|
||||
|
|
|
|||
|
|
@ -1,64 +1,144 @@
|
|||
@menuPrefixCls: rc-menu;
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
|
||||
src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@menu-prefix-cls: ~"@{ant-prefix}-menu";
|
||||
@menu-inline-toplevel-item-height: 40px;
|
||||
@menu-item-height: 40px;
|
||||
|
||||
.@{menuPrefixCls} {
|
||||
// default theme
|
||||
.@{menu-prefix-cls} {
|
||||
.reset-component;
|
||||
outline: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
box-shadow: @box-shadow-base;
|
||||
background: @component-background;
|
||||
line-height: 0; // Fix display inline-block gap
|
||||
transition: background .3s, width .2s;
|
||||
.clearfix;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-collapse {
|
||||
overflow: hidden;
|
||||
&-active {
|
||||
overflow: hidden;
|
||||
transition: height .3s ease-out;
|
||||
&-item-group-title {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
padding: 8px 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&-submenu,
|
||||
&-submenu-inline {
|
||||
transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
|
||||
}
|
||||
|
||||
&-item:active,
|
||||
&-submenu-title:active {
|
||||
background: @item-active-bg;
|
||||
}
|
||||
|
||||
&-submenu &-sub {
|
||||
cursor: initial;
|
||||
transition: background .3s @ease-in-out, padding .3s @ease-in-out;
|
||||
}
|
||||
|
||||
&-item > a {
|
||||
display: block;
|
||||
color: @text-color;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
&-item-divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
background-color: @border-color-split;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&-item:hover,
|
||||
&-item-active,
|
||||
&-submenu-active > span > &-submenu-title {
|
||||
background-color: #eaf8fe;
|
||||
&:not(&-inline) &-submenu-open,
|
||||
&-submenu-active,
|
||||
&-submenu-title:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&-horizontal &-item,
|
||||
&-horizontal &-submenu {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&-horizontal > &-item:hover,
|
||||
&-horizontal > &-item-active,
|
||||
&-horizontal > &-submenu &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
background-color: #eaf8fe;
|
||||
// fix chrome render bug
|
||||
transform: translateZ(0);
|
||||
color: @primary-color;
|
||||
> a,
|
||||
> a:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu-selected {
|
||||
background-color: #eaf8fe;
|
||||
&:not(&-horizontal) &-item-selected {
|
||||
background-color: @item-active-bg;
|
||||
}
|
||||
|
||||
& > li&-submenu {
|
||||
&-inline,
|
||||
&-vertical,
|
||||
&-vertical-left {
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
&-vertical-right {
|
||||
border-left: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-vertical&-sub,
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
border-right: 0;
|
||||
padding: 0;
|
||||
transform-origin: 0 0;
|
||||
.@{menu-prefix-cls}-item {
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
&:after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-sub,
|
||||
|
|
@ -66,67 +146,147 @@
|
|||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
min-width: 160px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-item, &-submenu-title {
|
||||
&-item,
|
||||
&-submenu-title {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 7px 7px 7px 16px;
|
||||
white-space: nowrap;
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
|
||||
color: #777 !important;
|
||||
transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out;
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
transition: font-size .15s @ease-out, margin .3s @ease-in-out;
|
||||
+ span {
|
||||
transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > &-item-divider {
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
background-color: #e5e5e5;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
&-popup {
|
||||
position: absolute;
|
||||
border-radius: @border-radius-base;
|
||||
z-index: @zindex-dropdown;
|
||||
}
|
||||
> .@{menuPrefixCls} {
|
||||
background-color: #fff;
|
||||
|
||||
> .@{menu-prefix-cls} {
|
||||
background-color: @component-background;
|
||||
border-radius: @border-radius-base;
|
||||
&-submenu-title:after {
|
||||
transition: transform .3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
transition: transform .3s @ease-in-out;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
vertical-align: baseline;
|
||||
background: #fff;
|
||||
background-image: linear-gradient(to right, @text-color, @text-color);
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
border-radius: 2px;
|
||||
transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg) translateY(2px);
|
||||
}
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:after,
|
||||
&:before {
|
||||
background: linear-gradient(to right, @primary-color, @primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&:before {
|
||||
transform: rotate(-45deg) translateX(2px);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(45deg) translateX(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
&-open {
|
||||
&.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
transform: translateY(-2px);
|
||||
&:after {
|
||||
transform: rotate(-45deg) translateX(-2px);
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg) translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
|
||||
.anticon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
top: -1px;
|
||||
&-vertical &-submenu-selected,
|
||||
&-vertical-left &-submenu-selected,
|
||||
&-vertical-right &-submenu-selected {
|
||||
color: @primary-color;
|
||||
> a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
background-color: #F3F5F7;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
box-shadow: none;
|
||||
line-height: 46px;
|
||||
|
||||
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
& > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
float: left;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&-active {
|
||||
border-bottom: 2px solid #2db7f5;
|
||||
background-color: #F3F5F7;
|
||||
color: #2baee9;
|
||||
&:hover,
|
||||
&-active,
|
||||
&-open,
|
||||
&-selected {
|
||||
border-bottom: 2px solid @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
color: @text-color;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -137,169 +297,162 @@
|
|||
clear: both;
|
||||
}
|
||||
}
|
||||
&-inline {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
padding: 12px 0;
|
||||
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
|
||||
padding: 12px 8px 12px 24px;
|
||||
}
|
||||
.@{menuPrefixCls}-submenu-arrow {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
line-height: 1.5em;
|
||||
&:before {
|
||||
content: "\f0da";
|
||||
.@{menu-prefix-cls}-item {
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-right: 3px solid @primary-color;
|
||||
transform: scaleY(.0001);
|
||||
opacity: 0;
|
||||
transition: transform .15s @ease-out, opacity .15s @ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-inline {
|
||||
.@{menuPrefixCls}-submenu-arrow {
|
||||
transform: rotate(90deg);
|
||||
transition: transform .3s;
|
||||
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0 16px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @menu-item-height;
|
||||
height: @menu-item-height;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
& .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
|
||||
.@{menuPrefixCls}-submenu-arrow {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
// disable margin collapsed
|
||||
.@{menu-prefix-cls}-submenu {
|
||||
padding-bottom: 0.01px;
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
line-height: @menu-inline-toplevel-item-height;
|
||||
height: @menu-inline-toplevel-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical&-sub,
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
&-inline {
|
||||
width: 100%;
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
&:after {
|
||||
transition: transform .15s @ease-in-out, opacity .15s @ease-in-out;
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
width: ~"calc(100% + 1px)";
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-collapsed {
|
||||
width: @menu-collapsed-width;
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
left: 0;
|
||||
text-overflow: clip;
|
||||
padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
display: none;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 16px;
|
||||
line-height: @menu-item-height;
|
||||
margin: 0;
|
||||
+ span {
|
||||
max-width: 0;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tooltip {
|
||||
pointer-events: none;
|
||||
.@{iconfont-css-prefix} {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: @text-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-group-title {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0 16px 0 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&-root&-vertical,
|
||||
&-root&-vertical-left,
|
||||
&-root&-vertical-right,
|
||||
&-root&-inline {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-sub&-inline {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
& > .@{menu-prefix-cls}-item,
|
||||
& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
line-height: @menu-item-height;
|
||||
height: @menu-item-height;
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-right: 0;
|
||||
& .@{menu-prefix-cls}-item-group-title {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.effect() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
&-open {
|
||||
|
||||
&-slide-up-enter, &-slide-up-appear {
|
||||
.effect();
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&-item-disabled,
|
||||
&-submenu-disabled {
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
background: none;
|
||||
border-color: transparent !important;
|
||||
> a {
|
||||
color: @disabled-color !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-slide-up-leave {
|
||||
.effect();
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-slide-up-enter-active, &-slide-up-appear-active {
|
||||
.effect();
|
||||
animation-name: rcMenuOpenSlideUpIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-slide-up-leave-active {
|
||||
.effect();
|
||||
animation-name: rcMenuOpenSlideUpOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcMenuOpenSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcMenuOpenSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-enter, &-zoom-appear {
|
||||
opacity: 0;
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
.effect();
|
||||
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
&-zoom-enter-active, &-zoom-appear-active {
|
||||
.effect();
|
||||
animation-name: rcMenuOpenZoomIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&-zoom-leave-active {
|
||||
.effect();
|
||||
animation-name: rcMenuOpenZoomOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcMenuOpenZoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcMenuOpenZoomOut {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './dark';
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ export default {
|
|||
popupClassName: PropTypes.any,
|
||||
},
|
||||
data () {
|
||||
this.aligned = false
|
||||
return {
|
||||
aligned: false,
|
||||
destroyPopup: false,
|
||||
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const com = pathnameArr[1] || 'button'
|
||||
const demo = pathnameArr[2] || 'index'
|
||||
return {
|
||||
component: import(`../components/tooltip/demo/${demo}.vue`),
|
||||
component: import(`../components/checkbox/demo/${demo}.vue`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue